记Bootstrap Table两种渲染方式

2019-01-08 08:23:02来源：博客园阅读 ()

这里主要区别两种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);就必须添加该属性，否则也无法正常显示。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有