1、BootstrapTable的列排序怎么搞。
先搞一个table，使用ajax将数据查询出来，然后可以在所有列都加上排序。满足自己的需求。
data-sortable="true"，此属性加到列上面，可以显示出上下排序的箭头。
1 <div style="float: left; 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 }
效果图如下所示，所有列都可以点击排序操作：
待续......