基于cookie实现zTree树刷新后展开状态不变

要实现基于cookie的zTree树刷新后展开状态不变，可以按照以下步骤操作：

1. 引入cookie插件

首先，在页面中引入cookie插件，例如jquery.cookie.js：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

2. 初始化zTree时设置cookie

在初始化zTree树的时候，可以设置cookie参数，例如：

var setting = {
    treeId: "treeDemo",
    async: {
        enable: true,
        url: "ajaxData.php"
    },
    data: {
        simpleData: {
            enable: true
        }
    },
    callback: {
        onExpand: function(event, treeId, treeNode) {
            $.cookie("treeDemo_" + treeNode.tId, 1); // 设置cookie
        },
        onCollapse: function(event, treeId, treeNode) {
            $.cookie("treeDemo_" + treeNode.tId, null); // 删除cookie
        }
    }
};

var zTreeObj = $.fn.zTree.init($("#treeDemo"), setting);

这里在onExpand和onCollapse事件中设置和删除cookie，key值为“treeDemo_”加上treeNode的tId。

3. 刷新页面时从cookie中读取节点状态

当页面刷新时，需要从cookie中读取上次展开的节点状态，然后重新展开。

// 从cookie中读取节点展开状态
var expandNodes = $.cookie();
for (var nodeId in expandNodes) {
    if (nodeId.indexOf("treeDemo_") == 0 && expandNodes[nodeId] == 1) {
        var treeNode = zTreeObj.getNodeByTId(nodeId.substr(9));
        zTreeObj.expandNode(treeNode, true, false, false); // 重新展开节点
    }
}

这里使用了jQuery的$.cookie()方法，遍历所有cookie中的键值对，找到以“treeDemo_”开头且值为1的键值对，然后使用zTree的expandNode方法重新展开节点。

示例1：

下面是一个完整的例子，实现了带有异步加载的zTree，在刷新页面后展开状态不变。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>基于cookie实现zTree树刷新后展开状态不变</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/zTree.v3/3.5.49/css/zTreeStyle/zTreeStyle.min.css">
</head>
<body>
    <ul id="treeDemo" class="ztree"></ul>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/zTree.v3/3.5.49/js/jquery.ztree.all.min.js"></script>
    <script>
        var setting = {
            treeId: "treeDemo",
            async: {
                enable: true,
                url: "data.json"
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onExpand: function(event, treeId, treeNode) {
                    $.cookie("treeDemo_" + treeNode.tId, 1); // 设置cookie
                },
                onCollapse: function(event, treeId, treeNode) {
                    $.cookie("treeDemo_" + treeNode.tId, null); // 删除cookie
                }
            }
        };

        $(function() {
            var zTreeObj = $.fn.zTree.init($("#treeDemo"), setting);

            // 从cookie中读取节点展开状态
            var expandNodes = $.cookie();
            for (var nodeId in expandNodes) {
                if (nodeId.indexOf("treeDemo_") == 0 && expandNodes[nodeId] == 1) {
                    var treeNode = zTreeObj.getNodeByTId(nodeId.substr(9));
                    zTreeObj.expandNode(treeNode, true, false, false); // 重新展开节点
                }
            }
        });
    </script>
</body>
</html>

示例2：

另外，如果zTree中节点比较多，cookie存储的节点展开状态信息会很大，可能会造成一定的性能问题。为了解决这个问题，可以使用localStorage代替cookie存储信息。

// 设置节点展开状态到localStorage中
function setTreeState(treeNode) {
    var state = {};
    state[treeNode.tId] = treeNode.open;
    localStorage.setItem("treeState_" + treeNode.treeId, JSON.stringify(state));
}

// 从localStorage中读取节点展开状态
function getTreeState(treeId) {
    var state = localStorage.getItem("treeState_" + treeId);
    if (state) {
        state = JSON.parse(state);
    }
    return state || {};
}

// 初始化zTree时设置节点状态
var zTreeObj = $.fn.zTree.init($("#treeDemo"), setting);
var treeId = zTreeObj.setting.treeId;
var treeState = getTreeState(treeId);
for (var nodeId in treeState) {
    var treeNode = zTreeObj.getNodeByTId(nodeId);
    zTreeObj.expandNode(treeNode, treeState[nodeId], false, true, false);
}

// 在展开和折叠事件中调用setTreeState方法
var callback = setting.callback || {};
setTreeState.call(callback, treeNode);

这里使用了localStorage来存储zTree节点的展开状态，通过JSON.stringify和JSON.parse来序列化和反序列化状态。在初始化zTree时，读取localStorage中的节点状态，然后使用zTree的expandNode方法重新展开节点。在展开和折叠事件中，调用setTreeState方法来设置节点状态到localStorage中。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于cookie实现zTree树刷新后展开状态不变 - Python技术站

基于cookie实现zTree树刷新后展开状态不变

1. 引入cookie插件

2. 初始化zTree时设置cookie

3. 刷新页面时从cookie中读取节点状态

相关文章