前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >BootstrapTable的列排序怎么搞

BootstrapTable的列排序怎么搞

作者头像
别先生
发布2019-06-03 11:19:56
4.5K0
发布2019-06-03 11:19:56
举报
文章被收录于专栏:别先生别先生

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 }

效果图如下所示,所有列都可以点击排序操作:

待续......

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-04-02 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档