实现layuitable筛选框记忆功能
碰到表中列很多如下表
使⽤layui table的筛选功能.选完之后呢，关掉浏览器再打开或者换个页⾯再打开的时候，选择就⽩选了.这种情况下，客户就要求加个记忆功能.让她下次再打开的时候，还能记忆上次选择的
⽹上⼏乎没有这种使⽤的例⼦.总之是没有到相关资料，于是我就把实现的过程记录下来,⽅便⼤家⽤到的时候做个参考.
实现: 记忆的数据可以存到数据库，可以存到本地缓存
本案例放⼊本地缓存的⽅式
使⽤ MutationObserver 实现监控点击事件.
由于筛选的跳窗是点开后后加的代码，所以⼀般的事件onclick是触发不到的.. 就是点击筛选按钮，此时加载跳出框代码, 也就在此是注册onclik 点击事件是不⾏的. 如果早注册事件，早于页⾯元素注册，也是抓不到事件滴.页⾯还没渲染出来，早早的注册了页⾯⾥边的点击事件，后来页⾯渲染出来后，点击是⽆法响应的，有个先后顺序.
经过控制台点击按钮分析页⾯代码等等操作
/////筛选框记忆功能
//1页⾯打开，先读本地缓存
//2读⼊cols 设置hide true 或者false
//3渲染table
//4加⼊筛选框选择框事件获取并设置本地缓存
<script src="JQuery/jquery-2.2.2.min.js"></script>
<script src="/layui-v2.6.4/layui.js"></script>
<script>
layui.use(['table','form'], function(){
var table = layui.table;
var $ = layui.$;//等同于jquery
var form = layui.form;
/
/选择
<('select(TableName)', function(data){
$.ajax({
type: 'get',
url: '/sss',
data: {OptionTableID:data.value},
async:false,
dataType: 'json',
success: function (data) {
console.log(data);
var strHtml = "<option value=''>请选择</option>";
for (var i = 0; i < data.length; i++) {
strHtml += "<option value='"+data[i].OptionColumnID+"'>"+data[i].ColumnDisplayName+"</option>";
}
$("#OptionColumnID").html(strHtml);
},
error:function(e){
}
});
});
/* window.localStorage.setItem('UserName',$("#UserName").val());
window.localStorage.setItem('Password',$("#Password").val());*/
/////筛选框记忆功能
//1页⾯打开，先读本地缓存
//2读⼊cols 设置hide true 或者false
//3渲染table
//4加⼊筛选框选择框事件获取并设置本地缓存
var cols=[[
{checkbox: true, field:'OptionColumnValueID'},
{field: "OptionColumnValueID", hide:false, title: "ID", sort: true},
{field: "ColumnValue", hide:false, title: "字典名称"} ,
{title: "操作", align: "center", fixed: "right", templet: "#barDemo"}
]
];
intCols();
function intCols()
{
for (var i=0;i<cols[0].length;i++)
{
if(cols[0][i].field!=undefined)
{
let localfield='test'+cols[0][i].field;
let hidevalue =Item(localfield);
if(hidevalue==='false')
{
cols[0][i].hide=false;
}else if(hidevalue==='true')
{
cols[0][i].hide=true;
}
}
}
}
//⽅法级渲染
elem: '#LAY_table_user'//table元素的ID
,id: 'test'//容器的ID
//,toolbar: "#toolbarTpl"
,toolbar: '#toolbarDemo'//开启头部⼯具栏，并为其绑定左侧模板
,defaultToolbar: ['filter', 'exports', 'print']
,url: '/ist'
,cols: cols
/* ,done: function () {
$("[data-field='OptionColumnValueID']").css('display','none');
}*/
,page: true
,
function怎么记忆limits: [10,1000,10000]
,limit: 10
,where: {
}
});
/////筛选框记忆功能
//1页⾯打开，先读本地缓存
//2读⼊cols 设置hide true 或者false
//3渲染table
//4加⼊筛选框选择框事件获取并设置本地缓存
// 选择需要观察变动的节点
const targetNode =ElementsByClassName('layui-table-tool');//ElementById('some-
const targetNode1 =ElementsByClassName('layui-table-tool-self')[0];//ElementById('some-id');
// console.log(targetNode);
// console.log(targetNode1);
// 观察器的配置（需要观察什么变动）
const config = { attributes: true, childList: true, subtree: true };
// 当观察到变动时执⾏的回调函数
const callback = function(mutationsList, observer) {
console.log(mutationsList);
// console.log(observer);
// Use traditional 'for loops' for IE 11
for(let mutation of mutationsList) {
if (pe === 'childList') {
// console.log('A child node has been added or removed');
}
else if (pe === 'attributes') {
console.log(mutation.target.innerText);
//先根据innertext 列名称对cols 进⾏field 查询，查到field 可以到本地缓存的字段，约定，本地缓存的命名规则为表名字母缩写_加field名组成，防⽌冲突var field="";
for (var i=0;i<cols[0].length;i++)
{
if(cols[0][i].title===mutation.target.innerText) //标题相同则取field
{
field=cols[0][i].field;
break;
}
}
if(field!=="")
{
// 组装缓存key
let localkey='test'+field;
//判断value值
if(mutation.target.classList[2]!=undefined) //说明2: "layui-form-checked" 复选框是已选择的，说明此列是在表中显⽰的 {
window.localStorage.setItem(localkey,false);
}else//没被选择，说明此列不在table中显⽰
{
window.localStorage.setItem(localkey,true);
}
}
}
}
};
// 创建⼀个观察器实例并传⼊回调函数
const observer = new MutationObserver(callback);
/
/ 以上述配置开始观察⽬标节点
observer.observe(targetNode1, config);
//监听⼯具条
<('toolbar()', function(obj){
var data = obj.data;
console.log(obj);
});
//监听⼯具条
<('tool(user)', function(obj){
var data = obj.data;
console.log(obj);
if(obj.event === 'del'){
{
title: '删除',
btn: ['确定', '取消']
},function(index){
autid(data.OptionColumnValueID,table);
//obj.del();
layer.close(index);
});
}else if(obj.event === 'edit'){
window.location.href="/xxx/xxxx
}
else if(obj.event === 'LAYTABLE_COLS'){
console.log(123) ; }
});
//监听⼯具条结束
//监听排序
<('sort(user)', function(obj){ //注：tool是⼯具条事件名，test是table原始容器的属性 lay-filter="对应的值"
initSort: obj //记录初始排序，如果不设的话，将⽆法标记表头的排序状态。 layui 2.1.1 新增参数
,where: { //请求参数
field: obj.field //排序字段
,order: pe //排序⽅式
}
});
});
//监听排序结束
//查询
$("#chaxun").click(function(){
where: {
OptionTableID:$('#TableName').val()
,
OptionColumnID:$('#xxx').val()
},page: {
curr: 1//重新从第 1 页开始
}
});
})
//批量
$("#allDel").click(function(){
var checkStatus = table.checkStatus('test')
,data = checkStatus.data;
if (data === undefined || data.length == 0) {
layer.alert("请勾选要操作的数据!")
}else{
var itemids='';
for(var o in data){
itemids +=data[o].xxx+",";
}
{
title: '删除',
btn: ['确定', '取消']
},function(index){
autid(itemids,table);
//obj.del();
layer.close(index);
});
}
});
});
function autid(itemids,table){
var indexload = layer.load(1, {
shade: [0.3,'#000'],
success: function(layero, indexload){
$.ajax({
url: '/xxx',
type:'POST',
dataType: 'json',
data: {
itemIds:itemids
},
success: function (ret) {
console.log(ret)
s=="ok"){
layer.alert('操作成功!', function(index){ layer.close(index);
layer.close(indexload);
where: {
}
});
});
}else{
layer.close(indexload);
}
}
});
}
});
}
</script>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论