登录  /  注册
博主信息
博文 17
粉丝 0
评论 1
访问量 25547
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
layui table 的 筛选列,怎么实现记忆功能,刷新不丢失
Ant.
原创
1460人浏览过

后台加载给前端的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举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学