java前端easyui中datagrid表格点击表头排序
2017-02-16 13:39
267 查看
开发时要用到datagrid表格的点击表头排序功能,所以根据easyui的API查到设置remoteSort属性和sortable属性值即可成功进行排序,所以代码如下:
代码中红色字母及是设置的排序属性,remoteSort=false代表客户端排序remoteSort=true代表服务端排序,设置好后,点击排序表头发现可以排序,但是排序不正确,比如电量分别为100,2000,300,从小到大排序完之后是 100,2000,300,从大到小排序完后是300,2000,100,感觉这样客户端的排序是按照首位数进行排序的,显然这样排序是不正确的,所以只能应用服务端进行排序,点击时请求后台,返回排序好的数据,js中代码如下:
调用loadlistgrid方法参数是:
sort:排序列字段名。
order:排序方式,可以是 'asc' 或者 'desc',默认值是 'asc'。
把sort和order穿入后台,加入sql中,sb.append(" order by ").append(sortname).append(" ").append(sortvalue);
查询出来返回到前台即可,此时便可以正常进行排序了。
$('#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);
查询出来返回到前台即可,此时便可以正常进行排序了。
相关文章推荐
- jQuery数据表格(点击表头排序,有点问题)
- JavaScript-点击表格的表头进行排序
- easyui datagrid 点击列表头排序出现错乱的原因
- EasyUI 中datagrid 点击表头进行排序
- AJAX 表格字段数据排序,点击表头每列排序
- easyui datagrid 点击列表头排序出现错乱的原因
- EasyUI Datagrid 分页的情况下实现点击表头的小三角图标对数据库中所有数据重新排序
- AJAX 表格字段数据排序,点击表头每列排序
- EasyUI Datagrid 分页的情况下实现点击表头的小三角图标对数据库中所有数据重新排序
- LigerUI之grid表格点击表头标题排序实现
- FLEX DataGrid 点击表头后按不同方式排序
- easyui datagrid 点击表头排序问题
- web中table表格点击表头排序
- AJAX 表格字段数据排序,点击表头每列排序
- Vue 固定头 固定列 点击表头可排序的表格组件
- AJAX 表格字段数据排序,点击表头每列排序
- jQuery EasyUI学习教程之datagrid点击列表头排序
- jQuery EasyUI学习教程之datagrid点击列表头排序
- easyUI扩展datagrid支持按列点击表头自定义排序
- JS实现点击表头表格自动排序(含数字、字符串、日期)