zTree保持展开单一路径的实现

今天实现了zTree的保持展开单一路径

什么意思呢，保持展开单一路径就是说：同一级别的节点，只打开一个，类似下面的简单演示，点击node1，展开显示1和2，点击node2，会关闭node1，展开显示3和4

+root                                   +root

       -node1                                +node1

                1                                -node2

                2                                          3

       +node2                                         4

       +node3                               +node3

实现如下：

核心代码

//保持单一展开路径
function singlePath(currNode) {
    //console.log(currNode);
    //节点级别，即节点展开的等级，是爸爸辈还是儿子辈
    var cLevel = currNode.level;
    //这里假设id是唯一的
    var cId = currNode.id;
    //此对象可以保存起来，没有必要每次查找
    var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
    /**
     * 展开的所有节点，这是从父节点开始查找（也可以全文查找）
     * 从当前节点的父节点开始查找，看有没有打开的节点，如果有则判断，若为同一级别的不同节点，则关闭，否则不关闭
    */
    var expandedNodes = treeObj.getNodesByParam("open", true, currNode.getParentNode());
    console.log(expandedNodes);
    for(var i = expandedNodes.length - 1; i >= 0; i--){
        var node = expandedNodes[i];
        var level = node.level;
        var id = node.id;
        if (cId != id && level == cLevel) {
            treeObj.expandNode(node, false);
        }
    }
}

实例

<SCRIPT type="text/javascript">
    <!--
    var curMenu = null, zTree_Menu = null;
    var setting = {
        view: {
            showLine: true,
            showIcon: true,
            selectedMulti: false,
            dblClickExpand: false,
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            beforeExpand: zTreeBeforeExpand //BLISS
        }
    };
    var zNodes =[
        { id:1, pId:0, name:"文件夹"},
        { id:11, pId:1, name:"收件箱"},
        { id:111, pId:11, name:"收件箱1"},
        { id:112, pId:111, name:"收件箱2"},
        { id:113, pId:112, name:"收件箱3"},
        { id:114, pId:113, name:"收件箱4"},
        { id:12, pId:1, name:"垃圾邮件"},
        { id:13, pId:1, name:"草稿"},
        { id:14, pId:1, name:"已发送邮件"},
        { id:15, pId:1, name:"已删除邮件"},
        { id:3, pId:0, name:"快速视图"},
        { id:31, pId:3, name:"文档"},
        { id:32, pId:3, name:"照片"}
    ];
    //展开回调函数
    function zTreeBeforeExpand(treeId, treeNode) {
        singlePath(treeNode);
        return true;
    };
    //保持单一展开路径
    function singlePath(currNode) {
        //console.log(currNode);
        //节点级别，即节点展开的等级，是爸爸辈还是儿子辈
        var cLevel = currNode.level;
        //这里假设id是唯一的
        var cId = currNode.id;
        //此对象可以保存起来，没有必要每次查找
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        /**
         * 展开的所有节点，这是从父节点开始查找（也可以全文查找）
         * 从当前节点的父节点开始查找，看有没有打开的节点，如果有则判断，若为同一级别的不同节点，则关闭，否则不关闭
        */
        var expandedNodes = treeObj.getNodesByParam("open", true, currNode.getParentNode());
        console.log(expandedNodes);
        for(var i = expandedNodes.length - 1; i >= 0; i--){
            var node = expandedNodes[i];
            var level = node.level;
            var id = node.id;
            if (cId != id && level == cLevel) {
                treeObj.expandNode(node, false);
            }
        }
    }
    /*//刷新当前展开节点的子节点
    function RefreshZTree()
    {
        if(lastExpandNode != null)
        {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.reAsyncChildNodes(lastExpandNode, refresh);
        }
    };
    //jquery定时刷新函数
    function periodlyFunc()
    {
        RefreshZTree();
    };*/
    $(document).ready(function(){
        var treeObj = $("#treeDemo");
        $.fn.zTree.init(treeObj, setting, zNodes);
        zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo");
        
        curMenu = zTree_Menu.getNodes()[0];
        zTree_Menu.selectNode(curMenu);
        zTree_Menu.expandNode(curMenu);

        //setInterval(periodlyFunc(), 5000); //bliss
    });
    //-->
</SCRIPT>

<div id="treeDemo" class="ztree">
</div>

ok!

推荐个网站：http://www.treejs.cn/v3/demo.php#_503

此为个人经验或看法，若有错误或不足，望路过大佬海涵和指点