原生js实现树结构菜单

最新推荐文章于 2024-03-22 10:06:36 发布
路杰杰
最新推荐文章于 2024-03-22 10:06:36 发布
阅读量387
点赞数
文章标签： javascript 前端 html
本文链接：https://blog.csdn.net/weixin_41538417/article/details/131120639
版权
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>MyTree</title>
    <style>
        .treeItem {
            padding-left: 20px;
            margin: 16px;
        }

        .itemIcon {
            display: inline-block;
            width: 18px;
            height: 18px;
            line-height: 16px;
            color: white;
            font-weight: bolder;
            text-align: center;
            font-size: 16px;
            border-radius: 50%;
            background: rgb(85, 141, 213);
            margin-right: 10px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div style="width:30%;border:0.1px;margin:1%;display: inline-block;position: absolute;left: 0px;">
        <!-- 虚拟根节点 -->
        <div id="my-tree-root0" class="treeItem">虚拟根节点0</div>
    </div>
    <div style="width:30%;border:0.1px;margin:1%;display: inline-block;height:100vh;position: absolute;left: 30%;">
        <!-- 虚拟根节点 -->
        <div id="my-tree-root1" class="treeItem">虚拟根节点1</div>
    </div>
    <div style="width:30%;border:0.1px;margin:1%;display: inline-block;position: absolute;left: 60%;">
        <!-- 虚拟根节点 -->
        <div id="my-tree-root2" class="treeItem">虚拟根节点2</div>
    </div>

    <script>
        var list = [{
                "id": "1",
                "name": "一级目录1",
                "fatherId": "0",
            },
            {
                "id": "2",
                "name": "二级目录1",
                "fatherId": "1"
            },
            {
                "id": "3",
                "name": "二级目录2",
                "fatherId": "1"
            },
            {
                "id": "4",
                "name": "三级目录1",
                "fatherId": "2"
            },
            {
                "id": "5",
                "name": "三级目录2",
                "fatherId": "2"
            },
            {
                "id": "6",
                "name": "一级目录2",
                "fatherId": "0"
            },
            {
                "id": "7",
                "name": "三极目录3",
                "fatherId": "3"
            },
            {
                "id": "8",
                "name": "四级目录1",
                "fatherId": "7"
            },
            {
                "id": "9",
                "name": "五级目录1",
                "fatherId": "8"
            }
        ];

        function MyTree(list, rootId) {
            // 简单的深拷贝
            this.list = JSON.parse(JSON.stringify(list));
            this.rootId = rootId;
            this.nodesMap = {};
            this.treeData = [];
        }

        MyTree.prototype = {
            init: function () {
                this.treeData = this.initTreeData(this.list);
                for (let i = 0; i < this.treeData.length; i++) {
                    this.createDom(this.treeData[i]);
                }
            },

            // 将数组初始化为树结构
            initTreeData: function (arr) {
                for (let i = 0; i < arr.length; i++) this.nodesMap[arr[i].id] = arr[i];
                let reArr = [];
                for (let i = 0; i < arr.length; i++) {
                    arr[i]['showChilds'] = true;
                    if (!this.nodesMap[arr[i].fatherId]) reArr.push(arr[i]);
                    else {
                        let fatherNode = this.nodesMap[arr[i].fatherId];
                        fatherNode.childs = fatherNode.childs || [];
                        fatherNode.childs.push(arr[i]);
                    }
                }
                return reArr;
            },

            // 根据数组渲染树
            createDom: function (data) {
                let self = this;
                let fatherDom = document.getElementById(`${this.rootId}-my-tree-${data.fatherId}`);
                // 虚拟根节点
                if (!fatherDom) fatherDom = document.getElementById(this.rootId);
                let dom = document.createElement("div");
                dom.id = `${this.rootId}-my-tree-${data.id}`;
                dom.className = 'treeItem';
                let iconDom = document.createElement("div");
                iconDom.id = `${this.rootId}-my-tree-icon-${data.id}`;
                iconDom.className = "itemIcon";
                iconDom.innerHTML = "-";
                // if (data.showChilds) iconDom.innerHTML = "-";
                // else iconDom.innerHTML = "+";
                dom.appendChild(iconDom);
                dom.innerHTML += data.name;
                fatherDom.appendChild(dom);
                iconDom = document.getElementById(`${this.rootId}-my-tree-icon-${data.id}`);
                iconDom.onclick = function () {
                    self.iconClickHandler(iconDom);
                };
                // 递归渲染子树
                if (data.childs && data.childs.length > 0) {
                    for (let i = 0; i < data.childs.length; i++) this.createDom(data.childs[i]);
                }
            },

            iconClickHandler(dom) {
                if (!dom || !dom.id) return;
                let id = dom.id;
                if (id.indexOf("my-tree-icon-") == -1) return;
                id = id.substring(id.indexOf("my-tree-icon-") + 13);
                let node = this.nodesMap[id];
                if (!node) return;
                if (node.showChilds) {
                    this.hideHandler(dom);
                    dom.innerHTML = "+";
                } else {
                    this.showHandler(dom);
                    dom.innerHTML = "-";
                }
            },

            // 隐藏子树
            hideHandler: function (dom) {
                if (!dom || !dom.id) return;
                let id = dom.id;
                if (id.indexOf("my-tree-icon-") == -1) return;
                id = id.substring(id.indexOf("my-tree-icon-") + 13);
                let node = this.nodesMap[id];
                if (!node) return;
                let childs = node.childs;
                if (!childs) return;
                node.showChilds = false;
                for (let i = 0; i < childs.length; i++) {
                    let childDom = document.getElementById(`${this.rootId}-my-tree-${childs[i].id}`);
                    if (!childDom) continue;
                    childDom.style.display = 'none';
                    let childIconDom = document.getElementById(`${this.rootId}-my-tree-icon-${childs[i].id}`);
                    this.hideHandler(childIconDom);
                }
            },

            // 渲染子树
            showHandler: function (dom) {
                if (!dom || !dom.id) return;
                let id = dom.id;
                if (id.indexOf("my-tree-icon-") == -1) return;
                id = id.substring(id.indexOf("my-tree-icon-") + 13);
                let node = this.nodesMap[id];
                if (!node) return;
                let childs = node.childs;
                if (!childs) return;
                node.showChilds = true;
                for (let i = 0; i < childs.length; i++) {
                    let childDom = document.getElementById(`${this.rootId}-my-tree-${childs[i].id}`);
                    if (!childDom) continue;
                    childDom.style.display = 'block';
                    let childIconDom = document.getElementById(`${this.rootId}-my-tree-icon-${childs[i].id}`);
                    let childNode = this.nodesMap[childs[i].id];
                    childIconDom.innerHTML = "+";
                    // 递归渲染子树
                    this.hideHandler(childIconDom);
                }
            }
        }

        var myTree0 = new MyTree(list, "my-tree-root0");
        myTree0.init();
        var myTree1 = new MyTree(list, "my-tree-root1");
        myTree1.init();
        var myTree2 = new MyTree(list, "my-tree-root2");
        myTree2.init();
    </script>
</body>

</html>
在这里插入代码片`