您的位置:首页 > 产品设计 > UI/UE

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

2017-02-16 13:39 267 查看
开发时要用到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=\"摘牌\" onclick="showReportNumDetail(\''+row.participantid+'\',\''+row.participantname+'\',\''+row.listingPrice+'\',\''+row.tradeTimepart+'\',\''+row.listingId+'\')">';
}else{
return '<input type=\"button\"  disabled=\"disabled\" class=\"btn-primary\"  value=\"摘牌\" onclick="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=\"摘牌\" onclick="showReportNumDetail(\''+row.participantid+'\',\''+row.participantname+'\',\''+row.listingPrice+'\',\''+row.tradeTimepart+'\',\''+row.listingId+'\')">';
}else{
return '<input type=\"button\"  disabled=\"disabled\" class=\"btn-primary\"  value=\"摘牌\" onclick="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);

查询出来返回到前台即可,此时便可以正常进行排序了。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  java easyui 前端