记Bootstrap Table两种渲染方式

这里主要区别两种Bootstrap Table的数据渲染方式，一、属性渲染方式，二、JS渲染方式

工作直接接手前人的，之前都直接在table标签上渲染属性，后面因为项目需要，同一页面的表格，需要申请不同的接口获取数据，写两个表格后期数据量大的时候浪费页面资源还增加了请求，所以最后改成了JS渲染方式，先贴表格效果：

一是属性渲染方式：省去表格所在项目引用的样式，单论数据加载，HTML代码就是简单的table表格的结构，table标签上添加data-属性，控制表格渲染效果。

HTML:

 <table id="UnDistributeTable" class="table table-hover  table-responsive table-bordered grayTable" data-toggle="table"
        data-query-params="Setparams_UnDistribute" data-query-params-type="" data-method="post"
        data-url="/api/data "
        data-side-pagination="server" data-sort-name=""
        data-id-field="WorkID" data-height="" data-page-number="1" data-response-handler="GetData" data-striped=true
        data-pagination="true" data-page-size="15" data-page-list="[50,100,200]">
     <thead>
         <tr>
             <th data-field="PONum" data-sortable="true">
                 PO单号
             </th>
             <th data-field="AllotWorkNum" data-sortable="true">
                 分配单号
             </th>
             <th data-field="NKAFlagName" data-sortable="true">
                 单据类型
             </th>
             <th data-field="Purpose" data-sortable="true">
                 用途
             </th>
             <th data-field="SumQuantity">
                 物料总量
             </th>
             <th data-field="SumAllocationQuantity" >
                 已分配数量
             </th>
             <th data-field="OperatorName">
                 上级办理人
             </th>
             <th data-field="OperatorTime">
                 上级办理时间
             </th>
             <th data-field="" data-formatter="Opera" >
                 操作
             </th>
         </tr>
     </thead>
 </table>

HTML Code

JS:

 function Setparams_UnDistribute(params) {
     var e = [{ PageSize: params.pageSize, PageIndex: params.pageNumber, OrderByField: params.sortName, OrderByType: params.sortOrder == "asc" ? 0 : 1, AllotState: 0,PONum:"" }];
     return e;
 }

 function GetData(res) {
     return {
         "total": res.Total,   //总页数
         "rows": res.Data   //数据
     };
 }

JS Code

这样就能够加载出路径url的数据了。

二就是JS加载方式，不会在table标签上添加其他的属性，table的结构更加清楚。

HTML:

 <table id="DistributeTable" class="table table-hover  table-responsive table-bordered grayTable" >
     <thead>
         <tr>
             <th data-field="CheckState" >
                 审核状态
             </th>
             <th data-field="PONum" data-sortable="true">
                 PO单号
             </th>
             <th data-field="WorkNum" data-sortable="true">
                 分配单号
             </th>
             <th data-field="NKAFlagName" data-sortable="true">
                 单据类型
             </th>
             <th data-field="Purpose" data-sortable="true">
                 用途
             </th>
             <th data-field="SumQuantity" >
                 物料总量
             </th>
             <th data-field="SumAllocationQuantity" >
                 本次分配数量
             </th>
             <th data-field="OperatorName" data-sortable="true">
                 分配人
             </th>
             <th data-field="OperatorTime" data-sortable="true">
                 分配时间
             </th>
             <th data-field="SumQuantity" data-sortable="true">
                 物料总量
             </th>
             <th data-field="" data-formatter="OperaView">
                 操作
             </th>
         </tr>
     </thead>
 </table>

HTML Code

JS:

 $(function () {
   var oTable = new TableInit();
   oTable.Init();
 });
 var TableInit = function () {
     var oTableInit = new Object();
     //初始化Table
     oTableInit.Init = function () {
         var url = ‘/api/data’;         //请求后台的URL（*）

         $('#DistributeTable').bootstrapTable({
             url: url,
             method: 'post',
             striped: true,
             cache: false,                  //是否使用缓存，默认为true
             pagination: true,
             sortable: true,
             sortName:"PONum",
             queryParams: oTableInit.queryParams,
             sidePagination: "server",
             pageNumber: 1,
             pageSize:15,
             pageList: [25, 50, 100],
             uniqueId: "id",              //每一行的唯一标识，一般为主键列
             responseHandler: function (res) {
                 return {
                     "total": res.Total,
                     "rows": res.Data
                 };

             }
         });
     };

     //得到查询的参数
     oTableInit.queryParams = function (params) {
         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:"" }];
         return e;
     };
     return oTableInit;
 };

JS Code

两种方式，渲染所得效果一致，完美，具体使用时，采用哪种方式渲染表格都可以，属性渲染更清楚显示出表格与参数设置的对应关系，适用于功能固定的表格，如果页面同一表所要加载的数据源会发生变化的话，最好使用第二种JS 渲染表格的方式，可以添加表格加载条件，来判断具体加载哪一数据源的数据，控制表格表格加载数据并渲染。

另，Bootstrap Table表格中有一点我比较迷茫的地方还没弄清楚，所以也提一下，就是table标签中一般有data-toggle=”table”属性值的设置，设置了就表示不写JS启用表格，一般在对table进行JS初始化的时候，比如写$(“#table”).bootstrapTable({“data”, data});这种的时候，如果声明了该属性，就无法正常渲染表格；但是如果使用Bootstrap Table方法渲染表格，比如$(“#table”).bootstrapTable(“load”, data);就必须添加该属性，否则也无法正常显示。

注-版权声明：本文为博主原创文章，未经博主允许不得转载。