easyUI 之datagrid 在前端自定义排序

首先先来看一下，直接从后台读取数据并展示到前端的列表，后端传回的数据是“按商品ID倒序排列”

前端源代码

    $('#good_tables').datagrid({
         nowrap: true,
         autoRowHeight: true,
         striped: true,
         fitColumns: true,
         collapsible: true,
         url: 'xxx',
         border: false,
         idField: 'id',
         selectOnCheck: true,
         singleSelect: true,
         width:'100%' ,
         resizable:true,
         columns: [[
             {
                 field: 'id',
                 title: '商品ID',
                 width: 60,
                 align: 'center',
                 formatter: function (value) {
                     return value+"";
                 }
             },
             {
                 field: 'goodsName',
                 title: '商品名称',
                 width: 120,
                 align: 'center',
                 formatter: function (value) {
                     return value;
                 }
             },
             {
                 field: 'activity_do',
                 title: '操作',
                 width: '15%',
                 align: 'center',
                 formatter: function (value, row) {
                     return'<a href="javascript:delGoods(' + row.id +')" style="color: red">删除</a>';
                 }
             }
         ]],
         pagination: true,
         pageSize: 10,
         rowNumbers: false
     });

修改前的代码

现在，产品们想要在前端随时切换排序方式，想正序，就正序，想倒序就倒序。

当然，我们可以将“排序方式”作为请求参数，向后端再次发送请求，获得相应排序的数据，但是这样太浪费资源了，能在前端解决的问题，就不要拖到后端。

easyUI已经提供了在前端排序的功能，只需要待排序的列上小小的添加几个参数：

修改后的JS代码：

 $('#good_tables').datagrid({
         nowrap: true,
         autoRowHeight: true,
         striped: true,
         fitColumns: true,
         collapsible: true,
         url: 'xxx',
         border: false,
         idField: 'id',
         selectOnCheck: true,
         singleSelect: true,
         width:'100%' ,
         resizable:true,
         remoteSort: false, //必填
         sortName:'id', //选填，排序字段。不填写的话，在最开始加载表格的时候，“商品ID”后面不会出现向下的箭头
         sortOrder:'asc',//选填，不填的话，按照后端传回的数据是排列（本例为desc)，填写后则按在前端设置的正序asc排列,
         columns: [[
             {
                 field: 'id',
                 title: '商品ID',
                 width: 60,
                 align: 'center',
                 sortable:true,      //必填，不填的换，点击“商品ID”单元格，无法切换排列
                 formatter: function (value) {
                     return value;
                 }
             },
             {
                 field: 'goodsName',
                 title: '商品名称',
                 width: 120,
                 align: 'center',
                 formatter: function (value) {
                     return value;
                 }
             },
             {
                 field: 'activity_do',
                 title: '操作',
                 width: '15%',
                 align: 'center',
                 formatter: function (value, row) {
                     return'<a href="javascript:delGoods(' + row.id +')" style="color: red">删除</a>';
                 }
             }
         ]],
         pagination: true,
         pageSize: 10,
         rowNumbers: false
     });

修改后的代码

效果：

加载列表后：

点击向上的箭头：

最后再来看看在切换排序的时候是不是向后台发送了请求吧~

进入开发者模式，点击Network，点击“XHR”清空现在已有的数据

可以看到，现在并没有任何请求记录在册了，接下来就请各位小伙伴随意切换排序吧，若列表仍为空，则说明没有向后端再次发送数据请求。

以上就是小编介绍的如何使用easyUI在前端对数据进行排列，觉得有用的朋友记得点个赞！