layui中table的sort排序介绍

1. layui table的sort排排序介绍

layui 是一个比较成熟的前端UI框架，它提供了很多的组件，其中 table 组件是比较常用的一个，用于数据展示。在实际开发中，我们常常需要对表格的数据进行排序，这时候 layui table 组件提供的 sort 排序功能就派上用场了。接下来就具体介绍一下 layui table 的 sort 排序功能的使用：

1.1 sort排序功能的基本用法

sort 排序功能的使用比较简单，只需要设置表头的 lay-sort 属性就可以了，其值可以是 asc(升序) 或 desc(降序)。

<table id="test">
  <thead>
    <tr>
      <th lay-data="{field:'id',sort:true}">ID</th>
      <th lay-data="{field:'username',sort:true}">用户名</th>
      <th lay-data="{field:'email',sort:true}">邮箱</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>10001</td>
      <td>user-1</td>
      <td>user-1@test.com</td>
      <td><button class="layui-btn layui-btn-xs">编辑</button></td>
    </tr>
    <tr>
      <td>10002</td>
      <td>user-2</td>
      <td>user-2@test.com</td>
      <td><button class="layui-btn layui-btn-xs">编辑</button></td>
    </tr>
    <tr>
      <td>10003</td>
      <td>user-3</td>
      <td>user-3@test.com</td>
      <td><button class="layui-btn layui-btn-xs">编辑</button></td>
    </tr>
    <tr>
      <td>10004</td>
      <td>user-4</td>
      <td>user-4@test.com</td>
      <td><button class="layui-btn layui-btn-xs">编辑</button></td>
    </tr>
    <tr>
      <td>10005</td>
      <td>user-5</td>
      <td>user-5@test.com</td>
      <td><button class="layui-btn layui-btn-xs">编辑</button></td>
    </tr>
  </tbody>
</table>

上面的代码就是最基本的使用方式了，其中 lay-data 属性用于设置 field 和 sort 可以在 layui 的 table 渲染之前生成，这样就可以设置表格的排序。

1.2 多重数据源的排序

在实际开发中，一个表格可能涉及到多个数据源的排序，此时可以通过对 table 组件配置 sort 属性的方式来实现。

// 给多个表格设置排序
table.render({
  elem: '#test1'
  ,data: table1Data
  ,cols: [[
    {type: 'checkbox','sort': true}
    ,{field:'user', title:'用户'}
    ,{field:'score', title:'评分','sort': true}
  ]]
  ,even: true
  ,limit: 5
});
table.render({
  elem: '#test2'
  ,data: table2Data
  ,cols: [[
    {type: 'checkbox','sort': true}
    ,{field:'user', title:'用户'}
    ,{field:'score', title:'评分','sort': true}
  ]]
  ,even: true
  ,limit: 5
});

以上代码中实现了对两个表格的多重数据源的排序，只需要在 cols 参数中给需要排序的列中的 sort 属性赋值即可。

1.3 配置自定义的排序方法

在实际开发中，有些时候需要根据非数字类型的数据来进行排序，此时可以配置自定义的排序方法。

// 自定义排序方法
function stringSorter(a, b) {
  if (typeof a === 'string' && typeof b === 'string') {
    return a.localeCompare(b);
  } else {
    return (a < b ? -1 : (a > b ? 1 : 0));
  }
}
table.render({
  elem: '#test'
  ,data: [{
    'id': 10001,
    'username': 'user-1',
    'email': 'user-1@test.com'
  }, {
    'id': 10002,
    'username': 'user-2',
    'email': 'user-2@test.com'
  }, {
    'id': 10003,
    'username': 'user-3',
    'email': 'user-3@test.com'
  }, {
    'id': 10004,
    'username': 'user-4',
    'email': 'user-4@test.com'
  }, {
    'id': 10005,
    'username': 'user-5',
    'email': 'user-5@test.com'
  }]
  ,cols: [[
    {field:'id', title:'ID','sort': true}
    ,{field:'username', title:'用户名','sort': true, sortType: 'stringSorter'}
    ,{field:'email', title:'邮箱','sort': true}
    ,{title:'操作'}
  ]]
  ,even: true
  ,limit: 5
});

上面的代码中定义了一个 stringSorter 方法作为自定义的排序方法，当需要对非数字类型的数据进行排序时，可以通过为需要排序的列设置 sortType 属性，并将其值设置为刚才定义的方法名来实现。

1.4 总结

sort 排序功能是 layui table 组件中比较重要的一个功能，通过对表头的排序属性设置，可以实现对表格数据的排序。在实际开发中，需要根据不同的业务需求，对 sort 排序功能进行一定的自定义。