layui表格中的sort配合后端自定义排序

       最近给一个老项目添加功能，老项目用的layui（v2.4.5）版本，需求是某数据表格的表头添加升序及降序排列功能。

表头排序切换配置指标

       查询官方文档，了解到layui可通过配置sort属性来实现表格中数据排序，于是直接在对应列配置项添加sort:'true'(此处以藏品编号列为例)

table.render({
            elem: '#table-page',
            url: urls,
            dataType: "json",
            size: 'lg',
            cols: [
              [{
                checkbox: true
              },
              {
                field: 'number',
                title: '藏品编号',
                align: 'center',
                sort:'true'
              },
              {
                width: 150,
                field: 'showImg',
                title: '缩略图',
                align: 'left',
                templet: '#collect'
              }, {
                field: 'name',
                title: '文物名称',
                align: 'left',
                toolbar: '#xiangqin'
              }, 
                {
                width: 180,
                align: 'left',
                fixed: 'right',
                toolbar: '#exhibition',
                title: '操作',
              }
              ]
            ],
            page: true
          });
        

       得到如下图所示：

       此时已有排序功能，但现在的排序功能只能实现当前页排序，无法实现对所有数据的排序。要达到需求效果，需要后端配合写好排序，我们再拿到不同排序状态下的数据渲染到页面上。

排序切换事件：table.on('sort(filter)', callback)

       查询官方文档，发现可对排序事件进行调整，文档中table组件有一个排序切换事件：table.on('sort(filter)', callback) 。

禁用前端自动排序

       自定义排序首先要将前端自动排序禁用。

table.render({
            elem: '#table-page',
            autoSort: false, // 禁用前端自动排序。
            url: urls,
            dataType: "json",
            size: 'lg',
            cols: [/**配置项...**/],
            page: true
          });

配置切换指标

       此处配置和开头一样，就是使用sort:'true' ，此处不再赘述。

触发排序事件修改

       核心代码如下，其中sort及sta为我与后端商量好的传参字段，根据自己需要去命名。

 //监听工具条
      table.on('sort(exhibition)', function (obj) {//此处的exhibition为你自己设置的table标签的lay-filter属性值
        // console.log(obj.field); // 当前排序的字段名
        // console.log(obj.type); // 当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
        // 尽管我们的 table 自带排序功能，但并没有请求服务端。
        // 有些时候，你可能需要根据当前排序的字段，重新向后端发送请求，从而实现服务端排序，如：
        table.reload('table-page', {
          initSort: obj, // 记录初始排序，如果不设的话，将无法标记表头的排序状态。
          where: { // 请求参数（注意：这里面的参数可任意定义，并非下面固定的格式。）
            sort: obj.field == 'culRelicLevel' ? 'coll_cultrual_relic_level' : 'coll_' + obj.field, // 排序字段
            sta: obj.type == 'desc' ? 1 : 0 // 排序方式
          }
        });
      });