layui table筛选列实现记忆功能,刷新不丢失

2024-10-21html教程
119

layui table给前端的table字段很多,一两百个,但是每个人关注的字段不同,有些人会设置这个defaultToolbar中的列字段,但是每次进去页面都得重新设置,很麻烦。
想法是,defaultToolbar的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 = true;  // 在本地标识中则隐藏
      }
    });
    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];
      var input = $(this).prev()[0];
            if (input.checked === true){  // 复选框取消,则加入本地缓存标识
                layui.data ('table-filter-lock', {key: input.name,value: !input.checked})
            }else {  // 复选框勾上,则移除本地标识
                layui.data('table-filter-lock', {key: input.name, remove: true});
            }
    });
  }
});
​

The End
layui 筛选项 记忆功能

相关推荐

layui根据经纬度在弹出层中显示具体位置
我们要实现在layui根据经纬度在弹出层中显示具体位置,具体要怎么操作呢? 1、首先你需要引入百度地图的js,这个ak我们去百度地图开发者平台申请,一定要申请浏览器版的ak. script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0ak=你的ak...
2024-10-24 html教程
152

layui table筛选列实现记忆功能,刷新不丢失
layui table给前端的table字段很多,一两百个,但是每个人关注的字段不同,有些人会设置这个defaultToolbar中的列字段,但是每次进去页面都得重新设置,很麻烦。 想法是,defaultToolbar的filter这个功能中,用户自定义显示列时保存起来,下次进入页面默认加...
2024-10-21 html教程
119

layui表格渲染templet解析单元格的问题
在解析单元格的时候自定义列为这样: {field: 'tpye', title: '所属类别', align:"center",templet:'#typeBar'} 我们通常这样简单的解析像这样也没什么毛病: script type="text/html" id="typeBar" {{# if(d.tpye == 1){ }} 系统优化 {{# }else if(d.tpye==2...
2024-10-21 html教程
166