原生 JS 实现树组件

  效果:

  使用原生 JS 实现一个简单的树插件。

  首先元数据的数据结构,每个节点需要包含自己的主键和父级节点的主键,才能描述树形结构。比如:

       [{
                "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"
            }
        ]

   处理该类数据,处理为树形数据结构,方便渲染:

            // 将数组初始化为树结构
            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;
            },

  处理后的数据结构如下:

[
    {
        "id": "1",
        "name": "一级目录1",
        "fatherId": "0",
        "showChilds": true,
        "childs": [
            {
                "id": "2",
                "name": "二级目录1",
                "fatherId": "1",
                "showChilds": true,
                "childs": [
                    {
                        "id": "4",
                        "name": "三级目录1",
                        "fatherId": "2",
                        "showChilds": true
                    },
                    {
                        "id": "5",
                        "name": "三级目录2",
                        "fatherId": "2",
                        "showChilds": true
                    }
                ]
            },
            {
                "id": "3",
                "name": "二级目录2",
                "fatherId": "1",
                "showChilds": true,
                "childs": [
                    {
                        "id": "7",
                        "name": "三极目录3",
                        "fatherId": "3",
                        "showChilds": true,
                        "childs": [
                            {
                                "id": "8",
                                "name": "四级目录1",
                                "fatherId": "7",
                                "showChilds": true,
                                "childs": [
                                    {
                                        "id": "9",
                                        "name": "五级目录1",
                                        "fatherId": "8",
                                        "showChilds": true
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    },
    {
        "id": "6",
        "name": "一级目录2",
        "fatherId": "0",
        "showChilds": true
    }
]

  将数据渲染到页面上:

       // 根据数组渲染树
            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);
                }
            }

  完整组件代码:

    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);
                }
            }
        }

  测试 html:

<!DOCTYPE html>
<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>

 

  

 

posted @ 2022-06-01 20:06  牛有肉  阅读(1966)  评论(0编辑  收藏  举报