记BootstrapTable两种渲染⽅式
这⾥主要区别两种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
6data-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:
1function Setparams_UnDistribute(params) {
2var e = [{ PageSize: params.pageSize, PageIndex: params.pageNumber, OrderByField: params.sortName, OrderByType: params.sortOrder == "asc" ? 0 : 1, AllotState: 0,PONum:"" }];
3return e;
4 }
5
6function GetData(res) {
7return {
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">
bootstrap项目32物料总量
33</th>
34<th data-field="" data-formatter="OperaView">
35操作
36</th>
37</tr>
38</thead>
39</table>
HTML Code
JS:
1 $(function () {
2var oTable = new TableInit();
3 oTable.Init();
4 });
5var TableInit = function () {
6var oTableInit = new Object();
7//初始化Table
8 oTableInit.Init = function () {
9var 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) {
26return {
27 "total": res.Total,
28 "rows": res.Data
29 };
30
31 }
32 });
33 };
34
35//得到查询的参数
36 oTableInit.queryParams = function (params) {
37var e = [{ PageSize: params.limit, PageIndex: Math.floor(params.offset / params.limit) + 1, OrderByField: params.sort , OrderByType: der == "asc" ? 0 : 1, AllotState: 1, PONum:"" }]; 38return e;
39 };
40return oTableInit;
41 };
JS Code
两种⽅式，渲染所得效果⼀致，完美，具体使⽤时，采⽤哪种⽅式渲染表格都可以，属性渲染更清楚显⽰出表格与参数设置的对应关系，适⽤于功能固定的表格，如果页⾯同⼀表所要加载的数据源会发⽣变化的话，最好使⽤第⼆种JS 渲染表格的⽅式，可以添加表格加载条件，来判断具体加载哪⼀数据源的数据，控制表格表格加载数据并渲染。
另，Bootstrap Table表格中有⼀点我⽐较迷茫的地⽅还没弄清楚，所以也提⼀下，就是table标签中⼀
般有data-toggle=”table”属性值的设置，设置了就表⽰不写JS启⽤表格，⼀般在对table进⾏JS初始化的时候，⽐如写$(“#table”).bootstrapTable({“data”, data})；这种的时候，如果声明了该属性，就⽆法正常渲染表格；但是如果使⽤Bootstrap Table⽅法渲染表格，⽐如$(“#table”).bootstrapTable(“load”, data)；就必须添加该属性，否则也⽆法正常显⽰。
注-版权声明：本⽂为博主原创⽂章，未经博主允许不得转载。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论