EasyUI 中datagrid 点击表头进行排序

最新推荐文章于 2023-04-27 08:29:33 发布

原创最新推荐文章于 2023-04-27 08:29:33 发布 · 1.4w 阅读

2 ·

CC 4.0 BY-SA版权

java程序设计同时被 3 个专栏收录

31 篇文章

订阅专栏

jsp

2 篇文章

订阅专栏

2 篇文章

订阅专栏

本文介绍如何使用EasyUI框架中的数据表格组件实现前后端联动排序功能。通过自定义排序方法，用户可以对表格中的任意列进行升序或降序排列，并且这些排序请求会被正确地传递到后端进行处理。

前台处理：

//排序
function sort(obj,sortName,sortOrder){
    var queryParams = $('#'+obj).datagrid('options').queryParams;
    queryParams.sortName = sortName;
    queryParams.sortOrder = sortOrder;
    $('#'+obj).datagrid('reload');
}

$('#tt').datagrid({
url:'getData.action',//数据来源
rownumbers:true,//行号
striped:true,//奇偶行颜色区分
singleSelect:true,//单选
fitColumns:true,//列自适应
nowrap:false,
columns:[[
  {field:name,width:70,sortable:true,align:'center',title:'人名'}
  {field:score,width:70,sortable:true,align:'center',title:'成绩'}

]],
queryParams:{"sortName":"","sortOrder":""},
remoteSort:false,
onSortColumn:function (sort,order){
     sort('tt',sort,order);//调用排序方法。
},
pagination:true,//显示分页
pagePosition:'bottom',//分页栏位置 both 上下 bottom、top
pageList:[12,24,36]//分页数据大小
});

后台处理：

String sortOrder = request.getParameter("sortOrder");
String sortName = request.getParameter("sortName");

if(null!=sortName&&!sortName.equals("")){
   String orderargs[]= new String[2];
   orderargs[0]=sortName;
   if(sortName.equals("score")){
    orderargs[1]="name";

   }else if(sortName.equals("name")){
    orderargs[1]="score";

   }

   if(sortOrder.equals("asc")){
    resultPage=aaManager.getResultPageOrderAsc(dc, rows, startIndex, orderargs);
   }else{
    resultPage=aaManager.getResultPage(dc, rows, startIndex, orderargs);
   }
  }else{
   String orderargs[]={"score"};
   resultPage=aaManager.getResultPage(dc, rows, startIndex, orderargs);
  }