java前端easyui中datagrid表格点击表头排序

开发时要用到datagrid表格的点击表头排序功能,所以根据easyui的API查到设置remoteSort属性和sortable属性值即可成功进行排序,所以代码如下:
	$('#resultTable').datagrid({
		nowrap: true,
		width:798,
		height: 365,
		striped: true,
		remoteSort: false,
		rowNumber:true,
		singleSelect:true,
		collapsible:true,
		columns:[[
		          {field:"participantid",title:'participantid',width:100,align:'center',hidden:true},
		          {field:"listingId",title:'listingId',width:100,align:'center',hidden:true},
		          {field:"tradeTimepart",title:'tradeTimepart',width:100,align:'center',hidden:true},
		          {field:'participantname',titleAlign:'center',title:'交易单元',width:160,align:'left'},
		          {field:'ordernum',titleAlign:'center',title:'编号',width:40,align:'right'},
		          {field:'traderole',titleAlign:'center',title:'角色',width:60,align:'center',
			    	  formatter: function(value,row,index){
							if(value==1){
								return "售方";
							}else{
								return "购方";
							}
				    	  }   },
			      {field:'currentEnergy',titleAlign:'center',title:'挂牌电量',sortable:true,width:80,align:'right'},  
			      {field:'listingPrice',titleAlign:'center',title:'挂牌电价',sortable:true,width:80,align:'right'},
			      {field:'sjd',titleAlign:'center',title:'时间段',width:140,align:'right'},
			      {field:'listingTime',titleAlign:'center',title:'挂牌时间',width:165,align:'right'},
			      {field:'zp',titleAlign:'center',title:'摘牌',width:65,align:'left',
			    	  formatter: function(value,row,index){
			    		  if(zpColor=="0"){
				    		  return '<input type=\"button\"  class=\"btn-primary\"  value=\"摘牌\" οnclick="showReportNumDetail(\''+row.participantid+'\',\''+row.participantname+'\',\''+row.listingPrice+'\',\''+row.tradeTimepart+'\',\''+row.listingId+'\')">';
			    		  }else{
				    		  return '<input type=\"button\"  disabled=\"disabled\" class=\"btn-primary\"  value=\"摘牌\" οnclick="showReportNumDetail(\''+row.participantid+'\',\''+row.participantname+'\',\''+row.listingPrice+'\',\''+row.tradeTimepart+'\',\''+row.listingId+'\')">';
			    		  }
						}  
			      }
		]],

	});	

代码中红色字母及是设置的排序属性,remoteSort=false代表客户端排序remoteSort=true代表服务端排序,设置好后,点击排序表头发现可以排序,但是排序不正确,比如电量分别为100,2000,300,从小到大排序完之后是 100,2000,300,从大到小排序完后是300,2000,100,感觉这样客户端的排序是按照首位数进行排序的,显然这样排序是不正确的,所以只能应用服务端进行排序,点击时请求后台,返回排序好的数据,js中代码如下:

	$('#resultTable').datagrid({
		nowrap: true,
		width:798,
		height: 365,
		striped: true,
		remoteSort: true,//设置服务端排序
		rowNumber:true,
		singleSelect:true,
		collapsible:true,
		columns:[[
		          {field:"participantid",title:'participantid',width:100,align:'center',hidden:true},
		          {field:"listingId",title:'listingId',width:100,align:'center',hidden:true},
		          {field:"tradeTimepart",title:'tradeTimepart',width:100,align:'center',hidden:true},
		          {field:'participantname',titleAlign:'center',title:'交易单元',width:160,align:'left'},
		          {field:'ordernum',titleAlign:'center',title:'编号',width:40,align:'right'},
		          {field:'traderole',titleAlign:'center',title:'角色',width:60,align:'center',
			    	  formatter: function(value,row,index){
							if(value==1){
								return "售方";
							}else{
								return "购方";
							}
				    	  }   },
			      {field:'currentEnergy',titleAlign:'center',title:'挂牌电量',sortable:true,width:80,align:'right'},  
			      {field:'listingPrice',titleAlign:'center',title:'挂牌电价',sortable:true,width:80,align:'right'},
			      {field:'sjd',titleAlign:'center',title:'时间段',width:140,align:'right'},
			      {field:'listingTime',titleAlign:'center',title:'挂牌时间',width:165,align:'right'},
			      {field:'zp',titleAlign:'center',title:'摘牌',width:65,align:'left',
			    	  formatter: function(value,row,index){
			    		  if(zpColor=="0"){
				    		  return '<input type=\"button\"  class=\"btn-primary\"  value=\"摘牌\" οnclick="showReportNumDetail(\''+row.participantid+'\',\''+row.participantname+'\',\''+row.listingPrice+'\',\''+row.tradeTimepart+'\',\''+row.listingId+'\')">';
			    		  }else{
				    		  return '<input type=\"button\"  disabled=\"disabled\" class=\"btn-primary\"  value=\"摘牌\" οnclick="showReportNumDetail(\''+row.participantid+'\',\''+row.participantname+'\',\''+row.listingPrice+'\',\''+row.tradeTimepart+'\',\''+row.listingId+'\')">';
			    		  }
						}  
			      }
		]],
		onSortColumn: function (sort, order) {
            loadlistgrid(sort, order);
        }
	});	
function loadlistgrid(sortname,sortvalue){
	var tradeseqid = $("#tradeName").combobox('getValue');
	if(tradeseqid==null || tradeseqid==""){
		top.$.messager.alert('消息','请选择交易序列!');
		return;
	}
	/**
	 * 请求数据
	 */
	$('#resultTable').datagrid("loadData",[]);
	var params = {
			items:{
				tradeseqId:tradeseqid,
				role:role,
				sortname:sortname,
				sortvalue:sortvalue
			}				
		};
	$.ajax({
		url : "/pmos/rest/pmoslisting/pmoszp/?"+Math.random(),
		type : "post",
		dataType : "json",
		contentType: "application/json",
		data:JSON.stringify(params),
		success : function(data) {
			if(data.successful==false){
				top.$.messager.alert('消息','查询失败!');
				return;
			}
			if(data.successful==true){
				if(data.resultValue.items.length>0){
					$('#resultTable').datagrid("loadData",{rows: data.resultValue.items});
				}
				else{
					$('#resultTable').datagrid("loadData",[]);
					top.$.messager.alert('消息','该交易序列无数据!');
				}
			}
		},
		error : function(event, request, settings) {
			top.$.messager.alert('消息','操作失败!');
		}
	});
	
	
}

调用loadlistgrid方法参数是:
sort:排序列字段名。
order:排序方式,可以是 'asc' 或者 'desc',默认值是 'asc'。

把sort和order穿入后台,加入sql中,sb.append("  order by  ").append(sortname).append("      ").append(sortvalue);

查询出来返回到前台即可,此时便可以正常进行排序了。


  • 2
    点赞
  • 3
    评论
  • 2
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

评论 3 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

泡沫在飞

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值