layui 让表格头部选择栏本地存储

2019年7月10日 作者 ruike

编辑table.js

如下位置添加代码如下:

//table 列隐藏本地化(配置从localStroage)
var deploy = localStorage.getItem("tableHidden" + tableFlag + "");
var arr = new Boolean(deploy) ? eval(deploy) : [];
// console.log('[START]'+ typeof arr+ '[END]');
$.each(arr, function (index, ele) {
    var checked = ele.checked;
    var key = ele.key;
    var name = ele.name;

    layui.each(options.cols, function(i1, item1){
        layui.each(item1, function(i2, item2){
            if(i1+ '-'+ i2 === key){
                var hide = item2.hide;

                //同步勾选列的 hide 值和隐藏样式
                item2.hide = !checked;
                that.elem.find('*[data-key="'+ options.index +'-'+ key +'"]')
                [checked ? 'removeClass' : 'addClass'](HIDE);

                //根据列的显示隐藏,同步多级表头的父级相关属性值
                if(hide != item2.hide){
                    that.setParentCol(!checked, name);
                }

                //重新适配尺寸
                that.resize();
            }
        });
    });
});

var tableHidden = "";
$('.layui-unselect.layui-form-checkbox').each(function (index, ele) {
    var key = $(ele).siblings('input').attr('data-key');
    var name = $(ele).siblings('input').attr('name');
    var checked = $(ele).attr('class').indexOf('layui-form-checked') !== -1 ? true : false;
    tableHidden += "{'key':'" + key + "','checked':" + checked + ",'name':'" + name + "'},";
});
console.log(tableFlag);
localStorage.setItem("tableHidden" + tableFlag + "", "[" + tableHidden + "]");

在前端页面使用

<script>
    //不同页面设置不同值用以区分
    //使用到筛选栏必须配置
    var tableFlag='testpage';
</script>