一、項目說明
?、俅隧椖渴茿SP.NET項目，開發語言是C#
?、赽ootstrap-table使用需要下載對應的css和js插件
?、劬唧w詳情還需查看api文檔
二、前端代碼
<div class="table-responsive">
<table id="table" class="text-nowrap"> </table>
</div>
【說明】 ①text-nowrap設置表格超出不換行而顯示滾動條，避免表格列過多
?、趖able-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" > 啟用</span>';
else
return '<span class="glyphicon glyphicon-remove label label-danger" > 不啟用</span>';
}
}, {
field: 'REMARK1',
title: '備注'
},
]
});
【說明】以上是表格初始化方法
?、僬埱缶W址返回的數據是json數組
?、趥鬟f的默認參數有頁數和頁的大小，如果在服務端分頁，分頁方式為：server
?、郾砀耠S動（隨著頁面大小的改變，表格的大小隨之改變）
這里寫了一個tableHeight（）方法獲取屏幕的高度，同時利用Windows的resize方法重新傳遞參數，刷新表格
function tableHeight() {
var h = $(window).height();
return h-25;
}
【重新設置表格屬性值并刷新】
$(window).resize(function () {
$("#table").bootstrapTable('resetView', {
height: tableHeight()
});
});
$("#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當前行數
總結
以上所述是小編給大家介紹的Bootstrap table表格初始化表格數據的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
