JQuery/JS插件 zTree树，点击当前节点展开，其他节点关闭

时间：2022-10-03 17:20:50

好像没找到现成的，就自己写了一个demo。

效果如下：

JQuery/JS插件 zTree树，点击当前节点展开，其他节点关闭

代码：

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <meta charset="utf-8" />

    <script src="../jquery-2.1.4.js"></script>

    <link href="zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />

    <script src="zTree_v3/js/jquery.ztree.core-3.5.js"></script>

    <script type="text/javascript">

        //获取当前父节点 参数：等级

        var getNodeByLevel = function (arr, level) {

            for (var i = ; i < arr.length; i++) {

                var item = arr[i];

                if (item.level == level) {

                    return item;

                }

            }

            return null;

        };

        //折叠节点 非当前父节点

        var collapseNodes = function (allTwoNodes, twoNode) {

            for (var i = ; i < allTwoNodes.length; i++) {

                var item = allTwoNodes[i];

                if ((twoNode != null) && (twoNode.id == item.id)) {

                    continue;

                }

                treeObj.expandNode(item, false, true, false);

            }

        }

        var zNodes = [

            // 第一层

            { id: , pId: , name: "父节点1 - 展开", open: true },

            // 第二层

            { id: , pId: , name: "父节点11 - 折叠", icon: "zTree_v3/css/zTreeStyle/img/diy/2.png", open: true },

            // 第三层

            { id: , pId: , name: "叶子节点111", click: false, open: true },

            { id: , pId: , name: "叶子节点112", open: true },

            // 第四层

            { id: , pId: , name: "三级1" },

            { id: , pId: , name: "三级2" },

            { id: , pId: , name: "三级3" },

            // 第二层

            { id: , pId: , name: "父节点12", open: true },

            // 第三层

            { id: , pId: , name: "叶子节点121" },

            { id: , pId: , name: "叶子节点122", open: true },

            // 第四层

            { id: , pId: , name: "三级1" },

            { id: , pId: , name: "三级2" },

            { id: , pId: , name: "三级3" },

        ];

        var setting = {

            type: "expandAll",//全部展开

            view: {

                showLine: false,//不显示连接线

            },

            data: {

                simpleData: {

                    enable: true

                }

            },

            callback: { //回调函数

                beforeClick: function (treeId, treeNode, clickFlag) {

                },

                onClick: function (vent, treeId, treeNode, clickFlag) {

                    //console.log(treeNode);

                    //console.log(treeNode.getParentNode());

                    //console.log(treeNode.getIndex());

                    //console.log(treeNode.getPath());

                    var nodes = treeNode.getPath();

                    var twoNode = getNodeByLevel(nodes, );

                    var oneNode = getNodeByLevel(nodes, );

                    var allTwoNodes = oneNode.children;

                    collapseNodes(allTwoNodes, twoNode);

                },

                onCollapse: function (event, treeId, treeNode) {

                    //alert('onCollapse / 折叠');//折叠

                },

                onExpand: function (event, treeId, treeNode) {

                    //alert('onExpand / 展开');//展开

                }

            }

        };

        //树初始化

        var treeObj = null;

        $(document).ready(function () {

            treeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);

        });

    </script>

</head>

<body>

    <div class="content_wrap">

        <div class="zTreeDemoBackground left">

            <!-- ztree的容器 -->

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

        </div>

    </div>

</body>

</html>

相关文章