使用datagrid实现页面间的排序查询

最近使用easy-ui的表格时,发现有很多强大的东西,暂列一个实现排序的demo案例:

div中给table一个class或者是id都可以.

<div class="row" id="datagrid-panel">
<div class="col-sm-12">
<div class="box border darkblue">
<div class="box-title">
<h4>
<i class="fa fa-th" style="color:#fff;"></i>
列表信息
</h4>
</div>
<div class="box-body">
<table class="easyui-datagrid"></table>
</div>
</div>
</div>
</div>


页面引入easy-ui datagrid相应的js文件.不一一列举了...
在页面加载执行:

$(".easyui-datagrid").datagrid({
url: "${ctxPath}/salesreport/list.html",
queryParams: {
beginDate: beginDate,
endDate:endDate
},
singleSelect:true,
remoteSort:false,
fitColumns:true,
multiSort:true,
nowrap: true,//false - 单元格数据多的时候进行折行 true - 不管数据有多少,都在一行显示
border: false,
loadMsg:"正在努力加载数据中...",
columns: [
[
{field: "goodsId", title: "商品id",hidden:"true", width: 300}
, {field: "goodsName", title: "商品名称", width: 300}
, {field: "barcode", title: "条形码", width: 200}
, {field: "goodsPrice", title: "销售单价", width: 200,sortable:true,
sorter:function(a,b){
return (a > b ? 1 : -1 );
}}

, {field: "amount", title: "销售数量", width: 200,sortable:true,
sorter:function(a,b){
return (a > b ? 1 : -1 );
}}
, {field: "costAll", title: "成本", width: 200,sortable:true,
sorter:function(a,b){
return (a > b ? 1 : -1 );
}}
, {field: "turnover", title: "营业额", width: 200,sortable:true,
sorter:function(a,b){
return (a > b ? 1 : -1 );
}}
, {field: "grossProfit", title: "毛利", width: 200,sortable:true,
sorter:function(a,b){
return (a > b ? 1 : -1 );
}}
, {field: "grossProfitRate", title: "毛利率", width: 200,sortable:true,
sorter:function(a,b){
return (a > b ? 1 : -1 );
}}
]
]
});根据自己需要排序的进行给field字段设置sortable属性.注意禁用后台排序,给属性

remoteSort:false,

多个排序时,使用
multiSort:true,这是属性,英文好点儿的话,都能理解的.
暂时记录一下,谢谢.