一、項目說明
①此項目是ASP.NET項目，開發語言是C#
②bootstrap-table使用需要下載對應的css和js插件
③具體詳情還需查看api文檔
二、前端代碼
<div class="table-responsive"> <table id="table" class="text-nowrap"> </table> </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方法重新傳遞參數，刷新表格
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表格初始化表格數據的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
