关于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
    }
  });
});
      

以上代码,主要作用是:监听table 表头的事件,获取到sort 排序的字段与排序类型(正序,倒序),把 该参数 传回 接口,并对数据库 进行排序查询。

接口中服务端代码处理:

$param['order_name'] = empty($this->request->post('field')) ?'id':$this->request->post('field');
$param['order_type'] = empty($this->request->post('order')) ?'desc':$this->request->post('order');

 

看下我联系点击三次显示的打印数据的效果

 //监听排序
    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 对象*/

       
    });


这里还要说一个 layui中 排序的一个操作规则: 如果连续 点击  三下 表头(不是点击 排序的上下小箭头),table排序会有三种排序状态,按顺序分别是  升序、降序、返回点击前 初始状态排序。

在排序的监控事件中 获取到的排序类型  就是上面代码中也写过的

console.log(obj.type); //当前排序类型:desc(降序)、asc(升序)、null(空对象,默认排序)

第三次点击,服务端接收的数据 如下

$param['order_name'] = empty($this->request->post('field')) ?'id':$this->request->post('field');  //接到的数据   "name"
$param['order_type'] = empty($this->request->post('order')) ?'desc':$this->request->post('order'); //接到的数据   null

所以在 服务端还有加一个判断处理

$param['order_name'] = empty($this->request->post('field')) ?'add_time':$this->request->post('field');
$param['order_type'] = empty($this->request->post('order')) ?'desc':$this->request->post('order');
if(empty($this->request->post('order'))){
   $param['order_name']  ='id';  //改成  最初始 默认的排序字段
}


当然,table排序还涉及如 table 渲染的显示字段是  name ,则排序需要根据 关联表的id 来排序,也是可以的,

但目前layui 对这块 支持还需要优化下 排序后的页面效果

 

posted @ 2018-09-12 10:44  木木船长  阅读(27099)  评论(0编辑  收藏  举报