2.7K Star 16K Fork 3.6K

GVPLayui / layui

 / 详情

table 的 defaultToolbar 中,怎么实现筛选列记忆功能

已完成
创建于  
2021-07-13 11:43

有个这样的需求,后台加载给前端的table字段很多,一两百个,但是每个人关注的字段不同,有些人会设置这个defaultToolbar中的列字段,但是每次进去页面都得重新设置,很麻烦。
想法是,defaultToolbar的filter这个功能中,用户自定义显示列时保存起来,下次进入页面默认加载用户的设置。但目前没法获取到用户设置的列。

输入图片说明

最好也可以设置列的顺序, 就是在设置是否显示时有个上下移动列顺序的功能

评论 (1)

neilchen226 创建了任务
neilchen226 关联仓库设置为贤心/layui
neilchen226 修改了描述
展开全部操作日志

用以下方法可以实现 filter 记忆功能:

table.render({
  elem: '#test'
  ,url: 'json/table/demo1.json'
  ,toolbar: 'default'
  ,cols: [function(){
    var arr = [
      {type: 'checkbox', fixed: 'left'}
      ,{field:'id', title:'ID', width:80, fixed: 'left'}
      ,{field:'username', title:'用户名', width:120}
      ,{field:'ip', title:'IP', width: 120}
      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
    ];
    
    //初始化筛选状态
    var local = layui.data ('table-filter-test');
    layui.each(arr, function(index, item){
      if(item.field in local){
        item.hide = local[item.field];
      }
    });
    return arr;
  }() ]  
  ,done: function(){
    //记录筛选状态
    var that = this;
    that.elem.next().on('mousedown', 'input[lay-filter="LAY_TABLE_TOOL_COLS"]+', function(){
      var input = $(this).prev()[0];
      layui.data ('table-filter-test', {
        key: input.name
        ,value: input.checked
      })
    });
  }
});
贤心 添加了
 
常见
标签
贤心 添加了
 
精华
标签
neilchen226 任务状态待办的 修改为已完成
贤心 修改了标题
贤心 修改了标题

登录 后才可以发表评论

状态
负责人
里程碑
Pull Requests
关联的 Pull Requests 被合并后可能会关闭此 issue
分支
开始日期   -   截止日期
-
置顶选项
优先级
参与者(2)
92529 sentsin 1578917144
JavaScript
1
https://gitee.com/layui/layui.git
git@gitee.com:layui/layui.git
layui
layui
layui

搜索帮助

53164aa7 5694891 3bd8fe86 5694891