layui 使用心得

1.关于layui中tablle 渲染数据后 sort排序问题

table.render({
          id:'test',
          elem: '#test'
          //,height: 350
          ,url: "/admin/members/list/"
          , request: {
              pageName: 'page' //页码的参数名称，默认：page
              ,limitName: 'limit' //每页数据量的参数名，默认：limit
          }
          ,initSort: {
              field: 'id' //排序字段，对应 cols 设定的各字段名
              ,type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
          }
          ,sort:true  //重点1：这里的sort表示 table表在取得接口数据后，对页面渲染后的table数据进行排序。同时，这里的true 会影响页面sort 上下小箭头的 显示效果
          ,method: 'post'
          ,page: true
          ,limit: 10
          ,toolbar: '#toolbarDemo'
          ,cols: [[
              {field:'id', title:'ID',fixed: 'left', unresize: true, sort: true, width:70}
              ,{field:'user_name', title:'员工姓名'}
              ,{field:'name', title:'部门', sort: true}
              ,{field:'station', title:'岗位', sort: true}
              ,{field:'identity_card', title:'身份证',}
              ,{field:'user_phone', title:'手机号'}
              ,{field:'add_time', title:'添加时间', width:170}
              ,{field:'tag', title:'标签',}
              ,{field:'update_time', title:'必修',toolbar: '#barTs'}
              ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:160}
          ]]
      });

由于分页问题，这种排序很多时候不符合项目需求，根据官方文档介绍，可以进行table sort与接口进行交互，从而影响数据 全文排序 效果

table.on('sort(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
  console.log(obj.field); //当前排序的字段名
  console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
  console.log(this); //当前排序的 th 对象
  
  //尽管我们的 table 自带排序功能，但并没有请求服务端。
  //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
  table.reload('test', {
    initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。 layui 2.1.1 新增参数
    ,where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
      field: obj.field //排序字段   在接口作为参数字段  field order
      ,order: obj.type //排序方式   在接口作为参数字段  field order
    }
  });
});