用cookie实现对easyui-tree节点状态的缓存

原创于 2018-07-20 10:22:32 发布 · 335 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#菜鸟记录 #自我感悟

这篇博客介绍了如何利用JavaScript的Cookie功能，在EasyUI的Tree组件中保存和恢复节点的展开/折叠状态。通过在节点展开和折叠时读取与更新Cookie，实现了在页面刷新后依然能记住树形结构的状态。

js:

var cookieName = "nodeName";//设置cookie为其命名
function expandORcollapse() {
$('#projectTree').tree(
{

//当节点展开始触发
onExpand: function (node, data) {

//读取cookie
            var cvalue = $.cookie(cookieName);
            if (cvalue) {
                var cvalue1 = cvalue;
                var ns = "," + node.id + ",";
                if (cvalue1.indexOf(ns) >= 0) {
                    //(先分割再聚合)分割成数组，再重新拼接成新的字符串
                    cvalue1 = cvalue1.split(ns).join("");
                }
            }

//最后给cookie赋值并给予时限（为7天）
$.cookie(cookieName, cvalue1, { expires: 7 })；

//当节点折叠时触发
onCollapse: function (node, data) {

//读取并判断
            var str = $.cookie(cookieName);
            var cv = str;
            var n1 =","+ node.id+",";
            if (cv == undefined || cv == "") {
                cv =n1;
            } else if (cv.indexOf(n1)>=0) { //去重，如果已有该节点id就不再添加
                cv = cv;
            }
            else {
                cv +=n1;
            }

//赋值并设置时限
$.cookie(cookieName, cv, { expires: 7 });
}

});
}

最后加载数据时实现展开或者折叠

var rooNode = $.cookie(cookieName);

function LoadUserTree(rooNode) {

    $('#projectTree').tree(
   {

        onLoadSuccess: function (node, data) {
            if (rooNode != null) {
                var n = 0;

//分割字符串
                var s = rooNode.split(",");
                for (var i = 0; i < s.length; i++) {
                    n = s[i];
                    if (n != "") {
                        var node11 = $("#" + content).tree("find", n);
                        $("#" + content).tree("collapse", node11.target);
                    }
                }

            }
        }

   });
}