Blogger Information
Blog 17
fans 0
comment 1
visits 21576
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
layui table 的 筛选列,怎么实现记忆功能,刷新不丢失
Ant.
Original
1233 people have browsed it

后台加载给前端的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. });
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post