BootstrapTable的列排序怎么搞

转载

mb5fcdf2ea5f3c5 2019-04-02 20:09:00

文章标签 ajax 字段 d3 struts 封装 文章分类 数据结构与算法人工智能

1、BootstrapTable的列排序怎么搞。

先搞一个table，使用ajax将数据查询出来，然后可以在所有列都加上排序。满足自己的需求。

data-sortable="true"，此属性加到列上面，可以显示出上下排序的箭头。

 1 <div style="float: left; width: 100%;">
 2 <div class="clearfix"></div>
 3 <table id="dataTable" style="font-size: 12px;" data-toolbar="#timeSearch"
 4     data-toggle="table" 
 5     data-locale="zh-CN" 
 6     data-ajax="ajaxRequest"
 7     data-side-pagination="server" 
 8     data-striped="true"
 9     data-click-to-select="true" 
10     data-sort-name="id"
11     data-sort-order="desc" 
12     data-row-style="rowStyle"
13     data-pagination="true" data-pagination-first-text="首页"
14     data-pagination-pre-text="上一页" data-pagination-next-text="下一页"
15     data-pagination-last-text="末页" data-show-jumpto="true">
16     <thead style="text-align: center;"> 
17         <tr>
18             <th data-radio="true"></th>
19             <th data-field="id" 
20                 data-width="40" data-formatter="indexFormatter" data-halign="center" data-align="center">序号</th>
21             <th data-field="code" data-sortable="true" data-formatter="codeFormatter" data-halign="center" data-width="280"
22                 data-align="center">编码</th>
23             <th data-field="field1" data-halign="center" data-sortable="true" data-width="280"
24                 data-align="center">字段1</th>
25             <th data-field="field2" data-halign="center" data-sortable="true" data-width="280"
26                 data-align="center">字段2</th>
27             <th data-field="field3" data-halign="center" data-sortable="true" data-width="280"
28                 data-align="center">字段3</th>
29             <th data-field="field4" data-halign="center" data-sortable="true" data-width="280"
30                 data-align="center">字段4</th>
31         </tr>
32     </thead>
33 </table>
34 </div>

2、ajax的处理如下所示：

"&sort=" + params.data.sort，排序的字段。"&type=" + params.data.order，排序的方式，排序升序asc或者降序desc。

 1 function ajaxRequest(params) {
 2     var pageSize = params.data.limit;
 3     var pageNum = params.data.offset/pageSize + 1;
 4     index = params.data.offset + 1;
 5     
 6     var dataStr = "pageSize = " + pageSize
 7         + "&pageNum=" + pageNum
 8         + "&sort=" + params.data.sort    //排序的字段。
 9         + "&type=" + params.data.order;  // 排序的方式，排序升序或者降序。
10     var url = 'xxxAction!findDataxxx.action';        
11     $.ajax({
12         type : 'post',
13         url : url,
14         data : dataStr,
15         dataType : 'json',
16         global : false,
17         async : true,
18         success : function(data) {
19             var count = 0;
20             var applies = [];
21             if (data && data.result) {
22                 applies = data.result.items ? data.result.items : [];
23                 count = data.result.count;
24             }
25             params.success({
26                 total : count,
27                 rows : applies
28             });
29             params.complete();
30         }
31     });
32 }

3、由于是公司自己封装的框架，自己的需求可以结合自己的实际情况。由于使用的是struts，自己根据自己需求搞吧。

 1 private String sort;
 2 private String type;
 3 自己定义自己的setter/getter。由于使用的是struts，自己根据自己需求搞吧。    
 4 
 5 public String findDataxxx() {
 6     Map<String, Object> params = new HashMap<>();
 7     Pagination<xxx> page = new Pagination<xxx>();
 8     page.setCounted(true);
 9     page.setSize(pageSize);
10     page.setIndex(pageNum);
11     Ordering order = new Ordering();
12     //可以判断自己排序的列，然后判断一下，进行排序操作。由于是公司自己封装的框架，自己的需求可以结合自己的实际情况
13     if("id".equals(sort)) {
14         order.setName("name");
15         order.setType("asc");
16     }else if("name".equals(sort)) {
17         order.setName("name");
18         order.setType(type); 
19     }else if("field1".equals(sort)){
20         order.setName("field1");
21         order.setType(type);
22     }else if("field2".equals(sort)){
23         order.setName("field2");
24         order.setType(type);
25     }else if("field3".equals(sort)){
26         order.setName("field3");
27         order.setType(type);
28     }else if("field4".equals(sort)){
29         order.setName("field4");
30         order.setType(type);
31     }
32     
33     if (Detect.notEmpty(sourceCode)) {
34         params.put("sourceCode", sourceCode);
35     }
36     if (Detect.notEmpty(startTime)) {
37         params.put("startTime", startTime);
38     }
39     if (Detect.notEmpty(endTime)) {
40         params.put("endTime", endTime);
41     }
42     //查询check数据表返回的数据
43     Pagination<xxx> findDataxxx = xxxService.findDataxxx(params, order, page);
44     dataMap.put("result", findDataxxx);
45     return SUCCESS;
46 }