JS實(shí)現(xiàn)layui?table篩選框記憶功能
更新時(shí)間：2022年09月29日 11:06:55 作者：蒙蒙大川
這篇文章主要介紹了JS實(shí)現(xiàn)layui?table篩選框記憶功能,本案例放入本地緩存的方式，使用MutationObserver實(shí)現(xiàn)監(jiān)控點(diǎn)擊事件，需要的朋友可以參考下
碰到表中列很多如下表
使用layui table的篩選功能.選完之后呢,關(guān)掉瀏覽器再打開(kāi)或者換個(gè)頁(yè)面再打開(kāi)的時(shí)候,選擇就白選了.這種情況下,客戶(hù)就要求加個(gè)記憶功能.讓她下次再打開(kāi)的時(shí)候,還能記憶上次選擇的
網(wǎng)上幾乎沒(méi)有這種使用的例子.總之是沒(méi)有找到相關(guān)資料,于是我就把實(shí)現(xiàn)的過(guò)程記錄下來(lái),方便大家用到的時(shí)候做個(gè)參考.
實(shí)現(xiàn): 記憶的數(shù)據(jù)可以存到數(shù)據(jù)庫(kù),可以存到本地緩存
本案例放入本地緩存的方式
使用MutationObserver 實(shí)現(xiàn)監(jiān)控點(diǎn)擊事件.
由于篩選的跳窗是點(diǎn)開(kāi)后后加的代碼,所以一般的事件onclick是觸發(fā)不到的.. 就是點(diǎn)擊篩選按鈕,此時(shí)加載跳出框代碼, 也就在此是注冊(cè)onclik 點(diǎn)擊事件是不行的. 如果早注冊(cè)事件,早于頁(yè)面元素注冊(cè),也是抓不到事件滴.頁(yè)面還沒(méi)渲染出來(lái),早早的注冊(cè)了頁(yè)面里邊的點(diǎn)擊事件,后來(lái)頁(yè)面渲染出來(lái)后,點(diǎn)擊是無(wú)法響應(yīng)的,有個(gè)先后順序.
經(jīng)過(guò)控制臺(tái)點(diǎn)擊按鈕分析頁(yè)面代碼等等操作
/////篩選框記憶功能
//1頁(yè)面打開(kāi),先讀本地緩存
//2讀入cols 設(shè)置hide true 或者false
//3渲染table
//4加入 篩選框選擇框事件獲取 并設(shè)置本地緩存
<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;
//選擇
form.on('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=''>請(qǐng)選擇</option>";
for (var i = 0; i < data.length; i++) {
strHtml += "<option value='"+data[i].OptionColumnID+"'>"+data[i].ColumnDisplayName+"</option>";
}
$("#OptionColumnID").html(strHtml);
form.render('select');
},
error:function(e){
}
});
});
/* window.localStorage.setItem('UserName',$("#UserName").val());
window.localStorage.setItem('Password',$("#Password").val());*/
/////篩選框記憶功能
//1頁(yè)面打開(kāi),先讀本地緩存
//2讀入cols 設(shè)置hide true 或者false
//3渲染table
//4加入 篩選框選擇框事件獲取 并設(shè)置本地緩存
var cols=[[
{checkbox: true, field:'OptionColumnValueID'},
{field: "OptionColumnValueID", hide:false, title: "ID", sort: true},
{field: "ColumnValue", hide:false, title: "字典名稱(chēng)"} ,
{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 =window.localStorage.getItem(localfield);
if(hidevalue==='false')
{
cols[0][i].hide=false;
}else if(hidevalue==='true')
{
cols[0][i].hide=true;
}
}
}
}
//方法級(jí)渲染
table.render({
elem: '#LAY_table_user'//table元素的ID
,id: 'test'//容器的ID
//,toolbar: "#toolbarTpl"
,toolbar: '#toolbarDemo' //開(kāi)啟頭部工具欄，并為其綁定左側(cè)模板
,defaultToolbar: ['filter', 'exports', 'print']
,url: '/ist'
,cols: cols
/* ,done: function () {
$("[data-field='OptionColumnValueID']").css('display','none');
}*/
,page: true
,limits: [10,1000,10000]
,limit: 10
,where: {
}
});
/////篩選框記憶功能
//1頁(yè)面打開(kāi),先讀本地緩存
//2讀入cols 設(shè)置hide true 或者false
//3渲染table
//4加入 篩選框選擇框事件獲取 并設(shè)置本地緩存
// 選擇需要觀(guān)察變動(dòng)的節(jié)點(diǎn)
const targetNode =document.getElementsByClassName('layui-table-tool');//document.getElementById('some-
const targetNode1 =document.getElementsByClassName('layui-table-tool-self')[0];//document.getElementById('some-id');
// console.log(targetNode);
// console.log(targetNode1);
// 觀(guān)察器的配置（需要觀(guān)察什么變動(dòng)）
const config = { attributes: true, childList: true, subtree: true };
// 當(dāng)觀(guān)察到變動(dòng)時(shí)執(zhí)行的回調(diào)函數(shù)
const callback = function(mutationsList, observer) {
console.log(mutationsList);
// console.log(observer);
// Use traditional 'for loops' for IE 11
for(let mutation of mutationsList) {
if (mutation.type === 'childList') {
// console.log('A child node has been added or removed');
}
else if (mutation.type === 'attributes') {
console.log(mutation.target.innerText);
//先根據(jù)innertext 列名稱(chēng) 對(duì)cols 進(jìn)行field 查詢(xún),查到field 可以找到本地緩存的字段,約定,本地緩存的命名規(guī)則為表名字母縮寫(xiě)_加field名組成,防止沖突
var field="";
for (var i=0;i<cols[0].length;i++)
{
if(cols[0][i].title===mutation.target.innerText) //標(biāo)題相同 則取field
{
field=cols[0][i].field;
break;
}
}
if(field!=="")
{
// 組裝緩存key
let localkey='test'+field;
//判斷value值
if(mutation.target.classList[2]!=undefined) //說(shuō)明2: "layui-form-checked" 復(fù)選框是已選擇的,說(shuō)明此列是在表中顯示的
{
window.localStorage.setItem(localkey,false);
}else //沒(méi)被選擇,說(shuō)明此列不在table中顯示
{
window.localStorage.setItem(localkey,true);
}
}
}
}
};
// 創(chuàng)建一個(gè)觀(guān)察器實(shí)例并傳入回調(diào)函數(shù)
const observer = new MutationObserver(callback);
// 以上述配置開(kāi)始觀(guān)察目標(biāo)節(jié)點(diǎn)
observer.observe(targetNode1, config);
//監(jiān)聽(tīng)工具條
table.on('toolbar()', function(obj){
var data = obj.data;
console.log(obj);
});
//監(jiān)聽(tīng)工具條
table.on('tool(user)', function(obj){
var data = obj.data;
console.log(obj);
if(obj.event === 'del'){
layer.confirm('確定要?jiǎng)h除:'+data.ColumnValue+'么？',
{
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) ; }
});
//監(jiān)聽(tīng)工具條結(jié)束
//監(jiān)聽(tīng)排序
table.on('sort(user)', function(obj){ //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對(duì)應(yīng)的值"
table.reload('test', {//刷新列表
initSort: obj //記錄初始排序，如果不設(shè)的話(huà)，將無(wú)法標(biāo)記表頭的排序狀態(tài)。 layui 2.1.1 新增參數(shù)
,where: { //請(qǐng)求參數(shù)
field: obj.field //排序字段
,order: obj.type //排序方式
}
});
});
//監(jiān)聽(tīng)排序結(jié)束
//查詢(xún)
$("#chaxun").click(function(){
table.reload('test', {//刷新列表
where: {
OptionTableID:$('#TableName').val()
,OptionColumnID:$('#xxx').val()
},page: {
curr: 1 //重新從第 1 頁(yè)開(kāi)始
}
});
})
//批量
$("#allDel").click(function(){
var checkStatus = table.checkStatus('test')
,data = checkStatus.data;
if (data === undefined || data.length == 0) {
layer.alert("請(qǐng)勾選要操作的數(shù)據(jù)!")
}else{
var itemids='';
for(var o in data){
itemids +=data[o].xxx+",";
}
layer.confirm('確定要?jiǎng)h除選中的數(shù)據(jù)嗎?',
{
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)
if(ret.res=="ok"){
layer.alert('操作成功!', function(index){
layer.close(index);
layer.close(indexload);
table.reload('test', {
where: {
}
});
});
}else{
layer.close(indexload);
}
}
});
}
});
}
</script>到此這篇關(guān)于實(shí)現(xiàn)layui table篩選框記憶功能的文章就介紹到這了,更多相關(guān)layui table篩選框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了微信小程序--組件（swiper）詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2017-06-06
這篇文章主要為大家介紹了停止編寫(xiě)API函數(shù)的原因及示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了微信小程序 跳轉(zhuǎn)方式總結(jié)的相關(guān)資料,需要的朋友可以參考下2017-04-04
用Move.js配合創(chuàng)建CSS3動(dòng)畫(huà)的入門(mén)指引
這篇文章主要介紹了用Move.js配合創(chuàng)建CSS3動(dòng)畫(huà)的入門(mén)指引,文中介紹了這個(gè)JavaScript庫(kù)中的一些基本方法的使用,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了微信小程序圖片寬100%顯示并且不變形的相關(guān)資料,需要的朋友可以參考下2017-06-06
JS屬性scrollTop?clientHeight?scrollHeight理解學(xué)習(xí)
這篇文章主要為大家介紹了JS屬性scrollTop?clientHeight?scrollHeight理解學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
腳本整合指定文件/文件夾執(zhí)行定制化ESLint命令使用實(shí)例
這篇文章主要為大家介紹了腳本整合指定文件/文件夾執(zhí)行定制化?ESLint命令使用實(shí)例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
這篇文章主要介紹了微信小程序下拉刷新界面的實(shí)現(xiàn)的相關(guān)資料,希望通過(guò)本文能幫助到大家實(shí)現(xiàn)這樣的功能，需要的朋友可以參考下2017-09-09
微信小程序 跳轉(zhuǎn)傳參數(shù)與傳對(duì)象詳解及實(shí)例代碼
這篇文章主要介紹了微信小程序 跳轉(zhuǎn)傳參數(shù)與傳對(duì)象詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-03-03
這篇文章主要為大家介紹了ESLint規(guī)范TypeScript代碼使用方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11