ligerui grid 实现表头缓存

ligerui grid 实现表头缓存

1. 实现思路
   监听表头的右键菜单，当CheckBox出现改变时缓存下当前的列是否显示，再下次加载此表格的时候加载缓存用来控制列是否显示。

2. 使用技术
   缓存使用的是localforage.min.js 缓存到本地浏览器的数据库中

3. 解决问题

   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;
            }

4. 具体实现

在 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;
        }
    },