layui中table的sort排序介绍

前言

layui是一款基于jQuery的前端UI框架，提供了丰富的UI组件和方便的接口，table是其中之一。table组件可以用于展示和处理大量数据，排序是其中一个重要的功能。

排序介绍

table组件的排序功能通过sort属性来实现。sort属性可以设置为'asc'（升序）或'desc'（降序），也可以设置为一个函数。

table.render({
  elem: '#test',
  data: [{
    name: '张三',
    age: 20,
    city: '北京'
  },{
    name: '李四',
    age: 18,
    city: '上海'
  },{
    name: '王五',
    age: 22,
    city: '广州'
  }],
  cols: [[
    {field:'name', title:'姓名', sort: true},
    {field:'age', title:'年龄', sort: 'desc'},
    {field:'city', title:'城市'}
  ]]
});

在上述示例代码中，sort属性设置为true表示可以排序，设置为'asc'或'desc'表示默认的排序方式。若需要自定义排序规则，可以传入一个排序函数。

排序函数

排序函数可以在sort属性中传入一个函数，用于自定义排序规则。函数接受两个参数a和b，分别表示需要比较的两个值。根据比较结果，返回负数、零或正数，来确定排序的顺序。

table.render({
  elem: '#test',
  data: [{
    name: '张三',
    score: 90
  },{
    name: '李四',
    score: 75
  },{
    name: '王五',
    score: 82
  }],
  cols: [[
    {field:'name', title:'姓名'},
    {field:'score', title:'分数', sort: function(a, b){
      return a.score - b.score;
    }}
  ]]
});

上述示例中，sort属性的值为一个排序函数，根据分数来排序。

总结

通过layui的table组件的sort属性，我们可以实现表格的排序功能。可以使用简单的升序或降序排序，也可以根据自定义规则进行排序。灵活使用sort属性，可以满足不同业务场景下表格排序的需求。