這裡主要區別兩種Bootstrap Table的數據渲染方式，一、屬性渲染方式，二、JS渲染方式 工作直接接手前人的，之前都直接在table標簽上渲染屬性，後面因為項目需要，同一頁面的表格，需要申請不同的介面獲取數據，寫兩個表格後期數據量大的時候浪費頁面資源還增加了請求，所以最後改成了JS渲染方式， ...
這裡主要區別兩種Bootstrap Table的數據渲染方式，一、屬性渲染方式，二、JS渲染方式
工作直接接手前人的，之前都直接在table標簽上渲染屬性，後面因為項目需要，同一頁面的表格，需要申請不同的介面獲取數據，寫兩個表格後期數據量大的時候浪費頁面資源還增加了請求，所以最後改成了JS渲染方式，先貼表格效果：
一是屬性渲染方式：省去表格所在項目引用的樣式，單論數據載入，HTML代碼就是簡單的table表格的結構，table標簽上添加data-屬性，控製表格渲染效果。
HTML:
1 <table id="UnDistributeTable" class="table table-hover table-responsive table-bordered grayTable" data-toggle="table" 2 data-query-params="Setparams_UnDistribute" data-query-params-type="" data-method="post" 3 data-url="/api/data " 4 data-side-pagination="server" data-sort-name="" 5 data-id-field="WorkID" data-height="" data-page-number="1" data-response-handler="GetData" data-striped=true 6 data-pagination="true" data-page-size="15" data-page-list="[50,100,200]"> 7 <thead> 8 <tr> 9 <th data-field="PONum" data-sortable="true"> 10 PO單號 11 </th> 12 <th data-field="AllotWorkNum" data-sortable="true"> 13 分配單號 14 </th> 15 <th data-field="NKAFlagName" data-sortable="true"> 16 單據類型 17 </th> 18 <th data-field="Purpose" data-sortable="true"> 19 用途 20 </th> 21 <th data-field="SumQuantity"> 22 物料總量 23 </th> 24 <th data-field="SumAllocationQuantity" > 25 已分配數量 26 </th> 27 <th data-field="OperatorName"> 28 上級辦理人 29 </th> 30 <th data-field="OperatorTime"> 31 上級辦理時間 32 </th> 33 <th data-field="" data-formatter="Opera" > 34 操作 35 </th> 36 </tr> 37 </thead> 38 </table>HTML Code
JS:
1 function Setparams_UnDistribute(params) { 2 var e = [{ PageSize: params.pageSize, PageIndex: params.pageNumber, OrderByField: params.sortName, OrderByType: params.sortOrder == "asc" ? 0 : 1, AllotState: 0,PONum:"" }]; 3 return e; 4 } 5 6 function GetData(res) { 7 return { 8 "total": res.Total, //總頁數 9 "rows": res.Data //數據 10 }; 11 }JS Code
這樣就能夠載入出路徑url的數據了。
二就是JS載入方式，不會在table標簽上添加其他的屬性，table的結構更加清楚。
HTML:
1 <table id="DistributeTable" class="table table-hover table-responsive table-bordered grayTable" > 2 <thead> 3 <tr> 4 <th data-field="CheckState" > 5 審核狀態 6 </th> 7 <th data-field="PONum" data-sortable="true"> 8 PO單號 9 </th> 10 <th data-field="WorkNum" data-sortable="true"> 11 分配單號 12 </th> 13 <th data-field="NKAFlagName" data-sortable="true"> 14 單據類型 15 </th> 16 <th data-field="Purpose" data-sortable="true"> 17 用途 18 </th> 19 <th data-field="SumQuantity" > 20 物料總量 21 </th> 22 <th data-field="SumAllocationQuantity" > 23 本次分配數量 24 </th> 25 <th data-field="OperatorName" data-sortable="true"> 26 分配人 27 </th> 28 <th data-field="OperatorTime" data-sortable="true"> 29 分配時間 30 </th> 31 <th data-field="SumQuantity" data-sortable="true"> 32 物料總量 33 </th> 34 <th data-field="" data-formatter="OperaView"> 35 操作 36 </th> 37 </tr> 38 </thead> 39 </table>HTML Code
JS:
1 $(function () { 2 var oTable = new TableInit(); 3 oTable.Init(); 4 }); 5 var TableInit = function () { 6 var oTableInit = new Object(); 7 //初始化Table 8 oTableInit.Init = function () { 9 var url = ‘/api/data’; //請求後臺的URL（*） 10 11 $('#DistributeTable').bootstrapTable({ 12 url: url, 13 method: 'post', 14 striped: true, 15 cache: false, //是否使用緩存，預設為true 16 pagination: true, 17 sortable: true, 18 sortName:"PONum", 19 queryParams: oTableInit.queryParams, 20 sidePagination: "server", 21 pageNumber: 1, 22 pageSize:15, 23 pageList: [25, 50, 100], 24 uniqueId: "id", //每一行的唯一標識，一般為主鍵列 25 responseHandler: function (res) { 26 return { 27 "total": res.Total, 28 "rows": res.Data 29 }; 30 31 } 32 }); 33 }; 34 35 //得到查詢的參數 36 oTableInit.queryParams = function (params) { 37 var e = [{ PageSize: params.limit, PageIndex: Math.floor(params.offset / params.limit) + 1, OrderByField: params.sort , OrderByType: params.order == "asc" ? 0 : 1, AllotState: 1, PONum:"" }]; 38 return e; 39 }; 40 return oTableInit; 41 };JS Code
兩種方式，渲染所得效果一致，完美，具體使用時，採用哪種方式渲染表格都可以，屬性渲染更清楚顯示出表格與參數設置的對應關係，適用於功能固定的表格，如果頁面同一表所要載入的數據源會發生變化的話，最好使用第二種JS 渲染表格的方式，可以添加表格載入條件，來判斷具體載入哪一數據源的數據，控製表格表格載入數據並渲染。
另，Bootstrap Table表格中有一點我比較迷茫的地方還沒弄清楚，所以也提一下，就是table標簽中一般有data-toggle=”table”屬性值的設置，設置了就表示不寫JS啟用表格，一般在對table進行JS初始化的時候，比如寫$(“#table”).bootstrapTable({“data”, data});這種的時候，如果聲明瞭該屬性，就無法正常渲染表格；但是如果使用Bootstrap Table方法渲染表格，比如$(“#table”).bootstrapTable(“load”, data);就必須添加該屬性，否則也無法正常顯示。
註-版權聲明：本文為博主原創文章，未經博主允許不得轉載。
