Js表格组件神器
????????由于Bootstrap Table是 Bootstrap 的一個組件，所以它是依賴 Bootstrap 的，我們首先需要添加 Bootstrap 的引用。Bootstrap 的包直接在?Bootstrap v3 中文文檔??里面可以找到。
廢話不多說，下面我們來就看一看使用方法：
① 在cshtml頁面引用相關組件，并定義好一個空的表格
@{Layout = null; } <!DOCTYPE html> <html> <head><meta name="viewport" content="width=device-width" /><title>BootStrap Table使用</title>@*1、Jquery組件引用*@<script src="~/Scripts/jquery-1.10.2.js"></script>@*2、bootstrap組件引用*@<script src="~/Content/bootstrap/bootstrap.js"></script><link href="~/Content/bootstrap/bootstrap.css" rel="stylesheet" />@*3、bootstrap table組件以及中文包的引用*@<script src="~/Content/bootstrap-table/bootstrap-table.js"></script><link href="~/Content/bootstrap-table/bootstrap-table.css" rel="stylesheet" /><script src="~/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>@*4、頁面Js文件的引用*@<script src="~/Scripts/Home/Index.js"></script> </head> <body><div class="panel-body" style="padding-bottom:0px;"><div class="panel panel-default"><div class="panel-heading">查詢條件</div><div class="panel-body"><form id="formSearch" class="form-horizontal"><div class="form-group" style="margin-top:15px"><label class="control-label col-sm-1" for="txt_search_departmentname">部門名稱</label><div class="col-sm-3"><input type="text" class="form-control" id="txt_search_departmentname"></div><label class="control-label col-sm-1" for="txt_search_statu">狀態</label><div class="col-sm-3"><input type="text" class="form-control" id="txt_search_statu"></div><div class="col-sm-4" style="text-align:left;"><button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查詢</button></div></div></form></div></div> <div id="toolbar" class="btn-group"><button id="btn_add" type="button" class="btn btn-default"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增</button><button id="btn_edit" type="button" class="btn btn-default"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改</button><button id="btn_delete" type="button" class="btn btn-default"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>刪除</button></div><table id="tb_departments"></table></div> </body> </html>?② Js初始化
$(function () {//1.初始化Tablevar oTable = new TableInit();oTable.Init();//2.初始化Button的點擊事件var oButtonInit = new ButtonInit();oButtonInit.Init();});var TableInit = function () {var oTableInit = new Object();//初始化TableoTableInit.Init = function () {$('#tb_departments').bootstrapTable({url: '/Home/GetDepartment', //請求后臺的URL（*）method: 'get', //請求方式（*）toolbar: '#toolbar', //工具按鈕用哪個容器striped: true, //是否顯示行間隔色cache: false, //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*）pagination: true, //是否顯示分頁（*）sortable: false, //是否啟用排序sortOrder: "asc", //排序方式queryParams: oTableInit.queryParams,//傳遞參數（*）sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*）pageNumber:1, //初始化加載第一頁，默認第一頁pageSize: 10, //每頁的記錄行數（*）pageList: [10, 25, 50, 100], //可供選擇的每頁的行數（*）search: true, //是否顯示表格搜索，此搜索是客戶端搜索，不會進服務端，所以，個人感覺意義不大strictSearch: true,showColumns: true, //是否顯示所有的列showRefresh: true, //是否顯示刷新按鈕minimumCountColumns: 2, //最少允許的列數clickToSelect: true, //是否啟用點擊選中行height: 500, //行高，如果沒有設置height屬性，表格自動根據記錄條數覺得表格高度uniqueId: "ID", //每一行的唯一標識，一般為主鍵列showToggle:true, //是否顯示詳細視圖和列表視圖的切換按鈕cardView: false, //是否顯示詳細視圖detailView: false, //是否顯示父子表columns: [{checkbox: true}, {field: 'Name',title: '部門名稱'}, {field: 'ParentName',title: '上級部門'}, {field: 'Level',title: '部門級別'}, {field: 'Desc',title: '描述'}, {field: 'operate',title: '操作',align: 'center',width: "290px",events: EvenInit, // 觸發事件formatter: operateFormatter // 格式化操作}],onLoadSuccess: function(row) { //加載成功時執行$("thead").css("background-color", "#33CABB");$("thead").css("color", "white");},onLoadError: function() { //加載失敗時執行console.log("加載數據失敗", {time: 1500,icon: 2});}});};//得到查詢的參數oTableInit.queryParams = function (params) {var temp = { //這里的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的limit: params.pageSize, //頁面大小offset: params.pageNumber, //頁碼departmentname: $("#txt_search_departmentname").val(),statu: $("#txt_search_statu").val()};return temp;};return oTableInit; };function operateFormatter(value, row, index) {return ['<button type="button" class="RoleOfA btn btn-default btn-sm" style="margin-right:15px;" >刪除</button>','<button type="button" class="RoleOfD btn btn-default btn-sm" style="margin-right:15px;">審批</button>','<button type="button" class="RoleOfB btn btn-default btn-sm" style="margin-right:15px;">修改</button>','<button type="button" class="RoleOfC btn btn-default btn-sm" style="margin-right:15px;" >查看詳情</button>',].join(''); }window.EvenInit = {'click .RoleOfA': function(e, value, row, index) {var _iframe = window.parent;_iframe.modalOut('../../html/modal/itemDelete.html', {id: row.id,url: '/user/unitDelect'}, function() {$('#table_list').bootstrapTable('refresh');});},'click .RoleOfB': function(e, value, row, index) {var _iframe = window.parent;_iframe.modalOut('../../html/modal/unitAdd.html', {id: row.id,myModalLabel: '修改',placeholder: '不填寫則不修改密碼',}, function() {$('#table_list').bootstrapTable('refresh');});},'click .RoleOfC': function(e, value, row, index) {var _iframe = window.parent;_iframe.modalOut('../../html/modal/unitSelect.html', {id: row.id}, function() {});},'click .RoleOfD': function(e, value, row, index) {var _iframe = window.parent;_iframe.modalOut('../../html/modal/particulars.html', {id: row.id,url:'/user/userParticulars',}, function() {$('#table_list').bootstrapTable('refresh');});},};var ButtonInit = function () {var oInit = new Object();var postdata = {};oInit.Init = function () {//初始化頁面上面的按鈕事件};return oInit; };③? 在Controller里面對應的方法?
public JsonResult GetDepartment(int limit, int offset, string departmentname, string statu) {var lstRes = new List<Department>();for (var i = 0; i < 50; i++){var oModel = new Department();oModel.ID = Guid.NewGuid().ToString();oModel.Name = "銷售部" + i ;oModel.Level = i.ToString();oModel.Desc = "暫無描述信息";lstRes.Add(oModel);}var total = lstRes.Count;var rows = lstRes.Skip(offset).Take(limit).ToList();return Json(new { total = total, rows = rows }, JsonRequestBehavior.AllowGet); }這里有一點需要注意：如果是服務端分頁，返回的結果必須包含total、rows兩個參數。漏寫或錯寫都會導致表格無法顯示數據。相反，如果是客戶端分頁，這里要返回一個集合對象到前端。?
④?效果及說明
二、父子表：
①?初始化表格，注冊行展開事件
$("#tb_powerset").bootstrapTable({url: '/api/MenuApi/GetParentMenu',method: 'get',detailView: true,//父子表//sidePagination: "server",pageSize: 10,pageList: [10, 25],columns: [{field: 'MENU_NAME',title: '菜單名稱'}, {field: 'MENU_URL',title: '菜單URL'}, {field: 'PARENT_ID',title: '父級菜單'}, {field: 'MENU_LEVEL',title: '菜單級別'}, ],//注冊加載子表的事件。注意下這里的三個參數！onExpandRow: function (index, row, $detail) {oInit.InitSubTable(index, row, $detail);}});還是來看看子表加載事件onExpandRow對應方法function (index, row, $detail)的三個參數，
index：父表當前行的行索引。
row：父表當前行的Json數據對象。
$detail：當前行下面創建的新行里面的td對象。
第三個參數尤其重要，因為生成的子表的table在裝載在$detail對象里面的。bootstrap table為我們生成了$detail這個對象，然后我們只需要往它里面填充我們想要的table即可。
② 我們來看oInit.InitSubTable()這個方法?
//初始化子表格(無線循環)oInit.InitSubTable = function (index, row, $detail) {var parentid = row.MENU_ID;var cur_table = $detail.html('<table></table>').find('table');$(cur_table).bootstrapTable({url: '/api/MenuApi/GetChildrenMenu',method: 'get',queryParams: { strParentID: parentid },ajaxOptions: { strParentID: parentid },clickToSelect: true,detailView: true,//父子表uniqueId: "MENU_ID",pageSize: 10,pageList: [10, 25],columns: [{checkbox: true}, {field: 'MENU_NAME',title: '菜單名稱'}, {field: 'MENU_URL',title: '菜單URL'}, {field: 'PARENT_ID',title: '父級菜單'}, {field: 'MENU_LEVEL',title: '菜單級別'}, ],//無線循環取子表，直到子表里面沒有記錄onExpandRow: function (index, row, $Subdetail) {oInit.InitSubTable(index, row, $Subdetail);}});};本篇文章參考了JS組件系列——表格組件神器：bootstrap table
總結
- 上一篇： 串口调试助手版本合集
- 下一篇： 创业板公司相符如何经济转型