数据表格的筛选列取消了列,表格刷新时隐藏之前隐藏的列

分享 未结 1 234
大脸猫猫
大脸猫猫 2019-8-12
悬赏:80飞吻

实现思路:隐藏的列记录下来,页面加载的时候找到对应的列参数hide:true
实现过程:
<div memory_table_filter="market_customer_index_table" 
table_filter="index-table"
table_orgs='{ "toolbar": true, "defaultToolbar": ["filter"] }'>
<table class="layui-table" lay-filter="index-table">
<thead>
<tr>
<th lay-data="{field:'field1', fixed:'left', width:80}">客户编号</th>
<th lay-data="{field:'field2', width:150}">添加时间</th>
<th lay-data="{field:'field3', width:150}">接收时间</th>
<th lay-data="{field:'field4', width:80}">回访次数</th>
<th lay-data="{field:'field5', width:80}">姓名</th>
<th lay-data="{field:'field6', width:60}">性别</th>
<th lay-data="{field:'field7', width:120}">联系电话</th>
<th lay-data="{field:'field8', width:110}">微信</th>
<th lay-data="{field:'field9', width:120}">QQ</th>
<th lay-data="{field:'field10', minWidth:160}">所属地区</th>
<th lay-data="{field:'field11', width:120}">咨询项目</th>
<th lay-data="{field:'field12', width:120}">来源</th>
<th lay-data="{field:'field13', width:80}">分配方式</th>
<th lay-data="{field:'field14', minWidth:120}">备注</th>
<th lay-data="{field:'field18', fixed:'right', width:150}">操作</th>
</tr>
</thead>
<tbody>

</tbody>
</table>
</div>
<script>
$dom.find('[memory_table_filter]').map(function () {
//该方法初始化表格的参数都以自定义参数的方式配置在父容器里
var table_filter = $(this).attr('table_filter'); //和表格的 lay-filter 一致
var memory_table_filter = $(this).attr('memory_table_filter'); //用于缓存指定表格的隐藏的列
var table_orgs = JSON.parse($(this).attr('table_orgs')); //table.init要用到的参数
var hide_list = layui.datmemory_table_filter || []; //获取缓存的隐藏的列
$.each(hide_list, function (i, item) {
//找到对应的th,在转成数据表格之前修改参数hide:true
var layData = eval('(' + $('[lay-data^="{field:\'' + item + '\'"]').attr("lay-data") + ')');
if (typeof layData === 'object') {
layData.hide = 'true';
$('[lay-data^="{field:\'' + item + '\'"]').attr("lay-data", JSON.stringify(layData));
}
});
table.init(table_filter, table_orgs);
});
</script>

接下来就需要怎么设置缓存啦,在table.js里面找了筛选列的操作,form.on('checkbox(LAY_TABLE_TOOL_COLS)',function(e){}),在里面判断了是否需要设置缓存,如果能在e.othis找到parents('[memory_table_filter]'),就需要在里边记录取消选择的列啦
form.on('checkbox(LAY_TABLE_TOOL_COLS)', function (e) {
var i = $(obj.elem)
, checked = this.checked
, key = othis.dattable_name || [];
$.each(tableColList, function (i, item) {
if (item == fieldName) {
tableColList.splice(i, 1);
return false;
}
})
layui.dattable_name) {
layui.dattable_name;
tableColList.unshift(fieldName);
layui.data('memory_table_filter', {
key: table_name
, value: tableColList
});
}
}
}
that.elem.find('*[data-key="' + options.index + '-' + key + '"]')
[checked ? 'removeClass' : 'addClass'](HIDE);

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

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

最终结果:过程有点扭曲,总之还是算艰难的实现了该功能!
回帖
  • 社区异常:layui.data(' --> layui.dat
    蓝色字体的区域都是被异常替换啦的
    0 回复