本文實(shí)例為大家分享了bootstrap table表格的使用方法，供大家參考，具體內(nèi)容如下
1.進(jìn)入頁(yè)面，根據(jù)指定的URL加載數(shù)據(jù)(json格式)
2.加載成功，根據(jù)$table.bootstrapTable({options})顯示表格樣式。
感覺還是挺漂亮的哈，OK，下面貼代碼解釋功能。
開始之前，當(dāng)然要引用js啦
<link href="~/Content/bootstrap.min.css" rel="stylesheet" /><link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" /><link href="~/Content/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" /><script src="~/Scripts/jquery-1.9.1.js"></script><script src="~/Scripts/bootstrap.min.js"></script><script src="~/Content/bootstrap-table/bootstrap-table.min.js"></script>
html代碼，一是指定table要使用的工具欄，而是寫一個(gè)空的table
<div class="row"> <div class="col-md-12"> <div class="btn-group" id="toobar" role="group" aria-label="..."> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-plus"></span>新增 </button> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-edit"></span>修改 </button> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-remove"></span>刪除 </button> </div> <table id="myTable"></table> </div> </div>
js代碼，使用("#table").bootstraptable({options})填充table
$("#myTable").bootstrapTable({ url: '/BootstrapTable/GetTestData', method: 'get', toolbar: '#toobar',//工具列 striped: true,//隔行換色 cache: false,//禁用緩存 pagination: true,//啟動(dòng)分頁(yè) sidePagination: 'client',//分頁(yè)方式 pageNumber: 1,//初始化table時(shí)顯示的頁(yè)碼 pageSize: 10,//每頁(yè)條目 showFooter: false,//是否顯示列腳 showPaginationSwitch: true,//是否顯示 數(shù)據(jù)條數(shù)選擇框 sortable: false,//排序 search: true,//啟用搜索 showColumns: true,//是否顯示 內(nèi)容列下拉框 showRefresh: true,//顯示刷新按鈕 idField: 'SystemCode',//key值欄位 clickToSelect: true,//點(diǎn)擊選中checkbox singleSelect: true,//啟用單行選中 columns: [{ checkbox: true }, { field: 'SystemCode', title: '系統(tǒng)代碼', titleTooltip: 'young for you' }, { field: 'SystemDesc', title: '系統(tǒng)名稱' }, { field: 'Isvalid', title: '是否有效' }, { field: 'UUser', title: '更新人' }, { field: 'UDate', title: '更新時(shí)間' }], onClickCell: function (field, value, row, $element) { //alert(row.SystemDesc); } });其中URL是table 數(shù)據(jù)源地址，如果table啟動(dòng)了分頁(yè)功能，后臺(tái)取數(shù)據(jù)的方法要加上limit、offset兩個(gè)int類型的參數(shù)，這里把后臺(tái)代碼也貼一下。
public JsonResult GetTestData(int limit, int offset) { BugzillaModelContainer db = new BugzillaModelContainer(); List<B_SystemInfo> systemInfo = db.B_SystemInfo.ToList(); for (int i = 0; i < 20; i++) { B_SystemInfo tempSystem = new B_SystemInfo(); tempSystem.SystemCode = (i + 1).ToString(); tempSystem.SystemDesc = "測(cè)試系統(tǒng)" + (i + 1).ToString(); tempSystem.Isvalid = "Y"; tempSystem.UUser = "result_for" + (i + 1).ToString(); tempSystem.UDate = System.DateTime.Now.ToShortDateString(); systemInfo.Add(tempSystem); } var total = systemInfo.Count(); var rows = systemInfo.Skip(offset).Take(limit).ToList(); return Json(systemInfo, JsonRequestBehavior.AllowGet); }offset表示從多少條數(shù)據(jù)開始取，limit表示取多少條數(shù)據(jù)。
客戶端搜索只要設(shè)置search=true即可。
服務(wù)端搜索，需要設(shè)置參數(shù)。
首先設(shè)置
("#table").bootstraptable({queryParams: oTableInit.queryParams}),//傳遞參數(shù)（*）
然后獲取查詢的參數(shù)
//得到查詢的參數(shù) oTableInit.queryParams = function (params) { var temp = { //這里的鍵的名字和控制器的變量名必須一直，這邊改動(dòng)，控制器也需要改成一樣的 limit: params.limit, //頁(yè)面大小 offset: params.offset, //頁(yè)碼 systemcode: $("#systemcode").val(), }; return temp;};通過(guò)button事件刷新table，重新獲取數(shù)據(jù)源，即可。
$("#btnQuery").click(function () { $table.bootstrapTable('refresh'); });最后貼上全部html代碼~
<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <link href="~/Content/bootstrap.min.css" rel="external nofollow" rel="stylesheet" /> <link href="~/Content/bootstrap-theme.min.css" rel="external nofollow" rel="stylesheet" /> <link href="~/Content/bootstrap-table/bootstrap-table.min.css" rel="external nofollow" rel="stylesheet" /> <script src="~/Scripts/jquery-1.9.1.js"></script> <script src="~/Scripts/bootstrap.min.js"></script> <script src="~/Content/bootstrap-table/bootstrap-table.min.js"></script></head><body> <div class="container"> <div class="row"> <div class="col-md-8"> </div> </div> <div class="row"> <div class="col-md-12"> <div class="btn-group" id="toobar" role="group" aria-label="..."> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-plus"></span>新增 </button> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-edit"></span>修改 </button> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-remove"></span>刪除 </button> </div> <table id="myTable"></table> </div> </div> </div> <script> $(function () { var itable = TableInit(); itable.Init(); }); var TableInit = function () { var myTableInit = new Object(); myTableInit.Init = function () { $("#myTable").bootstrapTable({ url: '/BootstrapTable/GetTestData', method: 'get', toolbar: '#toobar',//工具列 striped: true,//隔行換色 cache: false,//禁用緩存 pagination: true,//啟動(dòng)分頁(yè) sidePagination: 'client',//分頁(yè)方式 pageNumber: 1,//初始化table時(shí)顯示的頁(yè)碼 pageSize: 10,//每頁(yè)條目 showFooter: false,//是否顯示列腳 showPaginationSwitch: true,//是否顯示 數(shù)據(jù)條數(shù)選擇框 sortable: false,//排序 search: true,//啟用搜索 showColumns: true,//是否顯示 內(nèi)容列下拉框 showRefresh: true,//顯示刷新按鈕 idField: 'SystemCode',//key值欄位 clickToSelect: true,//點(diǎn)擊選中checkbox singleSelect: true,//啟用單行選中 columns: [{ checkbox: true }, { field: 'SystemCode', title: '系統(tǒng)代碼', titleTooltip: 'young for you' }, { field: 'SystemDesc', title: '系統(tǒng)名稱' }, { field: 'Isvalid', title: '是否有效' }, { field: 'UUser', title: '更新人' }, { field: 'UDate', title: '更新時(shí)間' }], onClickCell: function (field, value, row, $element) { //alert(row.SystemDesc); } }); }; return myTableInit; }; </script></body></html>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
