ligerui grid 實現表頭緩存
-
實現思路
監聽表頭的右鍵菜單，當CheckBox出現改變時緩存下當前的列是否顯示，再下次加載此表格的時候加載緩存用來控制列是否顯示。 -
使用技術
緩存使用的是localforage.min.js 緩存到本地瀏覽器的數據庫中 -
解決問題
grid 如何與緩存中的配置一一對應
每個grid 都必須要有一個唯一的標識，將這個gird唯一的標識作爲緩存的數據庫的名稱，以此來實現緩存與gird 一一對應。
如何給grid 一個唯一的標識
每個界面的grid都需要緩存表頭，而每個界面可能有多個grid，因此在這裏我用了window.location.pathname 來獲取當前頁面的地址 如：test/test.do 然後再加上獲取到grid的id（多個grid在同一界面下id不重複），這個一來每個界面的grid 都有一個唯一的標識
// url的地址欄+grid的id =grid 的唯一的標識
function getDbName(grid){
let pathName = window.location.pathname;
let id = grid.id;
return pathName+"/#"+id;
}
- 具體實現
在 ligerui.all.js 與 ligerGrid.js 找到_initBuildPopup 函數
其實就是三個步驟
一獲取數據庫名稱
二在表頭右鍵菜單彈出的checkboc事件觸發時緩存
三 加載緩存
完整代碼
_initBuildPopup: function ()
{
var g = this, p = this.options;
//不同界面的grod 的唯一標識 用來作爲瀏覽器數據庫的數據庫名稱
let dataBaseName=getDbName(g);
$(':checkbox', g.popup).unbind();
$('tbody tr', g.popup).remove();
$(g.columns).each(function (i, column)
{
if (column.issystem) return;
if (column.isAllowHide == false) return;
var chk = 'checked="checked"';
if (column._hide) chk = '';
var header = column.display;
$('tbody', g.popup).append('<tr><td class="l-column-left"><input type="checkbox" ' + chk + ' class="l-checkbox" columnindex="' + i + '"/></td><td class="l-column-right">' + header + '</td></tr>');
});
if ($.fn.ligerCheckBox)
{
$('input:checkbox', g.popup).ligerCheckBox(
{
onBeforeClick: function (obj)
{
if (!obj.checked) return true;
if ($('input:checked', g.popup).length <= p.minColToggle)
return false;
return true;
}
});
}
//表頭 - 顯示/隱藏'列控制'按鈕事件
if (p.allowHideColumn)
{
$('tr', g.popup).hover(function ()
{
$(this).addClass('l-popup-row-over');
},
function ()
{
$(this).removeClass('l-popup-row-over');
});
var onPopupCheckboxChange = function ()
{
if ($('input:checked', g.popup).length + 1 <= p.minColToggle)
{
return false;
}
let selfCk=this;
//獲取列 index
let columnindex = parseInt($(selfCk).attr("columnindex"));
//獲取列 表頭
let display = getColumnDisplayByIndex(columnindex,g.columns);
//緩存
cachePopup(dataBaseName,display,selfCk.checked);
g.toggleCol(columnindex, selfCk.checked, true);
};
if ($.fn.ligerCheckBox)
$(':checkbox', g.popup).bind('change', onPopupCheckboxChange);
else
$(':checkbox', g.popup).bind('click', onPopupCheckboxChange);
}
//加載緩存
loadCachePopup(dataBaseName,p.columns);
/**
* 獲取列的表頭
* @param columnindex 列index
* @param gridColums
* @returns {undefined}
*/
function getColumnDisplayByIndex(columnindex,gridColums){
let matchArray = gridColums.filter(function(obj,i){
if (obj.columnindex == columnindex) {
return obj;
}
});
//獲取表頭
let display = matchArray&&matchArray.length>0?matchArray[0].display:undefined;
return display;
}
/**
* 加載緩存-- 用來控制表格的列顯示隱藏
* @param dataBaseName
* @param columns
*/
function loadCachePopup(dataBaseName,columns){
if(!dataBaseName||dataBaseName.length==0)
return;
if(!columns||columns.length==0)
return;
//根據不同語言lang 作爲不同的key 分別 保存
let lang = getCookie("lang")||"zh";
let store = null;
try {
//創建數據庫 如果存在不會覆蓋
store = top.localforage.createInstance({
name: dataBaseName
});
}catch (e) {
console.info("創建數據庫出錯"+e);
return ;
}
if(store == null)
return ;
store.getItem(lang, function(err, value) {
if (value && value.length > 0) {
for(let i=0;i<value.length;i++){
let v=value[i];
let matchArray = columns.filter(function (obj, i) {
return obj.display == v.display;
});
if(matchArray.length==0)
continue;
//切換顯示或者隱藏
let columnIndex=matchArray[0].columnindex;
let visible=v.visible;
g.toggleCol(columnIndex, visible, false);
}
}
});
}
/***
* 緩存-- 將指定的那些列顯示或者隱藏緩存起來
* @param dataBaseName 數據庫名稱
* @param display 表頭
* @param visible 是否顯示
*/
function cachePopup(dataBaseName,display,visible){
let lang = getCookie("lang")||"zh";
if(!dataBaseName||dataBaseName.length==0)
return;
if(!display||display.length==0)
return ;
let store = null;
try {
//創建數據庫
store = top.localforage.createInstance({
name: dataBaseName
});
} catch (e) {
console.info("創建數據庫出錯"+e);
return ;
}
if(store == null)
return ;
//根據不同語言lang 作爲不同的key 分別 保存
store.getItem(lang).then(function (value) {
let old = value;
if (old) {
let obj = {display: display, visible: visible};
let matchIndex = old.findIndex(function (item) {
return obj.display == item.display;
});
if (matchIndex == -1) {
old.push(obj);
} else {
old.splice(matchIndex, 1, obj);
}
store.setItem(lang, old);
} else {
let obj = {display: display, visible: visible};
store.setItem(lang, [obj]);
}
}).catch(function (err) {
console.log(err);
});
};
function getCookie(cname)
{
let name = cname + "=";
let ca = document.cookie.split(';');
for(let i=0; i<ca.length; i++)
{
let c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
}
//用url的地址欄+grid的id 保證唯一性
function getDbName(grid){
let pathName = window.location.pathname;
let id = grid.id;
return pathName+"/#"+id;
}
},