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

最新推荐文章于 2023-04-28 10:43:00 发布

weixin_34290352

最新推荐文章于 2023-04-28 10:43:00 发布

阅读量477

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/guxingy/p/10172566.html

版权

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

效果如下：

代码：

<!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 = 0; i < arr.length; i++) {
                var item = arr[i];
                if (item.level == level) {
                    return item;
                }
            }
            return null;
        };

        //折叠节点 非当前父节点
        var collapseNodes = function (allTwoNodes, twoNode) {
            for (var i = 0; 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: 1, pId: 0, name: "父节点1 - 展开", open: true },

            // 第二层
            { id: 11, pId: 1, name: "父节点11 - 折叠", icon: "zTree_v3/css/zTreeStyle/img/diy/2.png", open: true },
            // 第三层
            { id: 111, pId: 11, name: "叶子节点111", click: false, open: true },
            { id: 112, pId: 11, name: "叶子节点112", open: true },
            // 第四层
            { id: 1121, pId: 112, name: "三级1" },
            { id: 1122, pId: 112, name: "三级2" },
            { id: 1123, pId: 112, name: "三级3" },

            // 第二层
            { id: 12, pId: 1, name: "父节点12", open: true },
            // 第三层
            { id: 121, pId: 12, name: "叶子节点121" },
            { id: 122, pId: 12, name: "叶子节点122", open: true },
            // 第四层
            { id: 1221, pId: 122, name: "三级1" },
            { id: 1222, pId: 122, name: "三级2" },
            { id: 1223, pId: 122, 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, 1);
                    var oneNode = getNodeByLevel(nodes, 0);
                    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>

转载于:https://www.cnblogs.com/guxingy/p/10172566.html

weixin_34290352

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery/JS插件 zTree树，点击当前节点展开，其他节点关闭

好像没找到现成的，就自己写了一个demo。效果如下：代码：<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></t...
复制链接

扫一扫