使用easyUI框架实现列表的整体排序

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

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

1 ·

CC 4.0 BY-SA版权

本文介绍了在使用easyUI框架展示数据列表时，如何实现多页数据的整体排序功能。关键在于设置remoteSort为true，并在后台处理查询排序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用easyUI框架查询数据时，展现数据列表形式，有时候会根据业务需求，需要实现列表数据的整体排序功能，即存在多页数据时，点击数据列，要实现所有数据的排序，下面我们来看一下如何实现，

1、首先要处理loadTable()方法中的配置

		$('#table1').datagrid({
			fit : true,
			fitColumns : true,
			nowrap : false,
			striped : true,
			view: myview,								
		    emptyMsg: '未查询到满足条件的记录 !',
			border : false,
			url : '<%=path%>/yuQing/queryYuQingInfo',
			queryParams:{from:from,to:to},//,entLLNum:entLLNum,entGZNum:entGZNum
			pageSize : 30,
			rownumbers : true,
			idField : 'id',
			remoteSort : true,
			pagination:true,
			frozenColumns :
			[[{field : 'ck',checkbox : true} ] ],

其中，需要注意的地方是，remoteSort：true ，这个量需要设定为true，然后，我们在配置数据列的排序，

					{
						field : 'entname',
						title : '企业名称↓',
						width : 20,
						align : 'center',
						remoteSort : true,
						sortable:true,
						sortOrder:'desc',
					},

其中的排序需要的配置参数有remoteSort、sortable、sortOrder，以上操作完成后，我们需要处理后台的查询方法；

2、后台的查询，要实现排序

			    if (StringUtils.isNotEmpty(page.getOrder())&&StringUtils.isNotEmpty(page.getSort())) {
			    	if("createTime".equals(page.getSort())){
			    		hql += " order by createtime "+page.getOrder();
			    	}else if("fabuTime".equals(page.getSort())){
			    		hql += " order by fabutime "+page.getOrder();
			    	}else {
			    	    hql += " order by "+ page.getSort()+" "+page.getOrder();
			    	}
				}else{
					hql+="  order by fabutime,id desc ";
				}

该段代码为后台实现的排序，从page参数中获取前端传递的需要排序的字段和排序的顺序，使用hql或者sql实现排序，需要注意的是，order by 后边的字段是数据库表或实体类中的字段名，否则排序会出错，判定条件中的字段，则是定义的js中的字段，为了省去判定的麻烦，可以让页面上字段值与数据库或实体类中的字段名保持一致。