一、項目說明
①此項目是ASP.NET項目，開發語言是C#
②bootstrap-table使用需要下載對應的css和js插件
③具體詳情還需查看api文檔
二、前端代碼
1 <div class="table-responsive">
2 <table id="table" class="text-nowrap"> </table>
3 </div>
【說明】 ①text-nowrap設置表格超出不換行而顯示滾動條，避免表格列過多
②table-responsive：有table-responsive，表格有滾動條沒有table-responsive，網頁有滾動條
$('#table').bootstrapTable({ url: '/B_Product/GetProductData', //請求后台的URL（*）
method: 'get', //請求方式（*）
toolbar: '#toolbar', //工具按鈕用哪個容器
striped: true, //是否顯示行間隔色
cache: false, //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*）
pagination: true, //是否顯示分頁（*）
sortable: false, //是否啟用排序
sortOrder: "asc", //排序方式
queryParams: function (pageRequest) { return pageRequest; },// //傳遞參數（*）
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: tableHeight(), //行高，如果沒有設置height屬性，表格自動根據記錄條數覺得表格高度
uniqueId: "Id", //每一行的唯一標識，一般為主鍵列
showToggle: false, //是否顯示詳細視圖和列表視圖的切換按鈕
cardView: false, //是否顯示詳細視圖
detailView: false, //是否顯示父子表
showExport: true, //是否顯示導出按鈕
buttonsAlign: "right", //按鈕位置
exportTypes: ['excel'], //導出文件類型
Icons: 'glyphicon-export', columns: [{
checkbox: true }, { field: 'ID', title: '編號', visible: false }, { field: 'PRODUCTID', title: '產品編號' }, { field: 'PRODUCTNAME', title: '產品名稱' }, { field: 'PRODUCTUSER', title: '貨主名稱' }, { field: 'PRICE', title: '單價（元）' }, { field: 'BARCODERULE', title: '條碼規則' }, { field: 'ISUSING', title: '啟用狀態', formatter: function (value, row, index) { if (value == "啟用") return '<span class="glyphicon glyphicon-ok label label-success" style="font-size:90%"> 啟用</span>'; else
return '<span class="glyphicon glyphicon-remove label label-danger" style="font-size:90%"> 不啟用</span>'; } }, { field: 'REMARK1', title: '備注' }, ] });
【說明】以上是表格初始化方法
①請求網址返回的數據是json數組
②傳遞的默認參數有頁數和頁的大小，如果在服務端分頁，分頁方式為：server
③表格隨動（隨着頁面大小的改變，表格的大小隨之改變）
這里寫了一個tableHeight（）方法獲取屏幕的高度，同時利用Windows的resize方法重新傳遞參數，刷新表格
1 function tableHeight() { 2 var h = $(window).height(); 3 return h-25; 4 }
【重新設置表格屬性值並刷新】
1 $(window).resize(function () { 2 $("#table").bootstrapTable('resetView', { 3 height: tableHeight() 4 }); 5 });
$("#table").bootstrapTable("refresh");//表格刷新數據
④為表格設置checkbox
在columns:中設置第一列 checkbox: true，將會用全選功能
field: 'ID', 此名稱需和json對應的key值相同才會顯示對應的value值
title: '編號', title是列名，顯示的名稱
visible: false 表示初始為不可見，可通過表格右上方的按鈕設置列的顯示和不顯示
⑤在表格中設置樣式
表格中顯示按鈕等不同狀態的
formatter: function (value, row, index) {
if (value == "啟用")
return '<span class="glyphicon glyphicon-ok label label-success" > 啟用</span>';
else
return '<span class="glyphicon glyphicon-remove label label-danger" > 不啟用</span>';
}
返回的參數有三個，value代表當前值，row表示當前行，index當前行數