使用datagrid实现页面间的排序查询 电玩女神 2022-05-31 03:15 89阅读 0赞 最近使用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> ![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
还没有评论,来说两句吧...