有實力自適應網(wǎng)站建設哪家好視頻號推廣
即點擊當前表格右上角篩選圖標后,對表頭進行顯示隱藏勾選,再刷新頁面依然保留當前篩選狀態(tài)。
要實現(xiàn)layui表格組件的篩選列記憶功能,可以采取以下步驟:
- 存儲篩選數(shù)據(jù):當用戶進行篩選操作時,將篩選的數(shù)據(jù)以某種形式存儲起來。可以選擇將數(shù)據(jù)存儲到本地緩存中,或者發(fā)送到服務器端進行存儲。
- 監(jiān)聽篩選事件:使用MutationObserver或其他事件監(jiān)聽器來監(jiān)聽表格組件的篩選事件。當用戶進行篩選操作時,監(jiān)聽器會捕獲到相關的事件并執(zhí)行相應的操作。
- 保存篩選狀態(tài):在監(jiān)聽到篩選事件后,將篩選的狀態(tài)(如篩選的字段、篩選的條件等)保存下來。同樣可以選擇將狀態(tài)保存到本地緩存中,或者發(fā)送到服務器端進行保存。
- 恢復篩選狀態(tài):當用戶重新打開頁面或刷新頁面時,從本地緩存或服務器端獲取之前保存的篩選狀態(tài),并將其應用到表格組件上。
核心代碼
, cols: [function () {var arr = [{type: 'checkbox', fixed: 'left', width: 80}, {field: 'depart_name', title: '一級管理', sort: true}, {field: 'second_user_name', title: '二級管理', sort: true, hide: true}, {field: 'butler_name', title: '三級管理', sort: true, hide: true}, {field: 'poi_name', title: '客戶名稱', sort: true}, {field: 'poi_address', title: '客戶地址', sort: true}, {field: 'poi_phone', title: '客戶電話', sort: true}, {field: 'place', title: '位置調(diào)整', templet: '#checkPoint', unresize: true, align: 'center'}, {field: 'lock', title: '操作', templet: '#checkboxTpl', unresize: true, align: 'center', width: 120}];// 初始化篩選狀態(tài)var local = layui.data('table-filter-lock');layui.each(arr, function (index, item) {if (item.field in local) {item.hide = local[item.field];}});return arr;}()],done: function () {// 記錄篩選狀態(tài)var that = this;that.elem.next().on('mousedown', 'input[lay-filter="LAY_TABLE_TOOL_COLS"]+', function () {var input = $(this).prev()[0];// 此處表名可任意定義layui.data('table-filter-lock', {key: input.name, value: input.checked})});}
@漏刻有時