博客列表 >layui table 的 筛选列,怎么实现记忆功能,刷新不丢失

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

Ant.
Ant. 原创
2024年03月06日 09:23:581263浏览

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

  1. table.render({
  2. elem: '#test'
  3. ,url: 'json/table/demo1.json'
  4. ,toolbar: 'default'
  5. ,cols: [function(){
  6. var arr = [
  7. {type: 'checkbox', fixed: 'left'}
  8. ,{field:'id', title:'ID', width:80, fixed: 'left'}
  9. ,{field:'username', title:'用户名', width:120}
  10. ,{field:'ip', title:'IP', width: 120}
  11. ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
  12. ];
  13. //初始化筛选状态
  14. var local = layui.data ('table-filter-test');
  15. layui.each(arr, function(index, item){
  16. if(item.field in local){
  17. item.hide = true; // 在本地标识中则隐藏
  18. }
  19. });
  20. return arr;
  21. }() ]
  22. ,done: function(){
  23. //记录筛选状态
  24. var that = this;
  25. that.elem.next().on('mousedown', 'input[lay-filter="LAY_TABLE_TOOL_COLS"]+', function(){
  26. var input = $(this).prev()[0];
  27. var input = $(this).prev()[0];
  28. if (input.checked === true){ // 复选框取消,则加入本地缓存标识
  29. layui.data ('table-filter-lock', {key: input.name,value: !input.checked})
  30. }else { // 复选框勾上,则移除本地标识
  31. layui.data('table-filter-lock', {key: input.name, remove: true});
  32. }
  33. });
  34. }
  35. });
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议