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

电玩女神 2022-05-31 03:15 133阅读 0赞

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

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

![SouthEast][]  
页面引入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,

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

暂时记录一下,谢谢.

[SouthEast]: /images/20220531/ebd7c31293e642cda881c8ed0ed5d3c5.png