IT狗

记Bootstrap Table两种渲染方式

这里主要区别两种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>

此文由 IT狗 编辑,本网站所发布展示的作品/文章版权归原作者所有,任何商业用途均须联系作者!

相关推荐

评论 暂无评论