使用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,

这是属性,英文好点儿的话,都能理解的.

暂时记录一下,谢谢.