递归生成部门树节点

递归生成部门树节点

{{ detail.nickname }}

{{ formatTime(detail.create_time) }} 字数 {{ detail.content && detail.content.length }} 阅读 {{ detail.read_num }}

"```\n// 生成部门树\nfunction generateDepartmentTree(data, htmlArr) {\n  data.forEach(function(item) {\n    htmlArr.push(`<li>\n                    <span class=\"zh-name\" data-id=\"${item.id}\">\n                      <span class=\"zh-fold\"></span>\n                      <span class=\"zh-text\">${item.name}</span>\n                    </span>`);\n    if(item.children && item.children.length) {\n      htmlArr.push(`<ul>`);\n      generateDepartmentTree(item.children, htmlArr);\n      htmlArr.push(`</ul>`);\n    }\n    htmlArr.push(`</li>`);\n  });\n}\n\nvar departmentTreeHtmlArr = [];\nvar list = [\n    {\n        id: 1,\n        name: '1',\n        children: [\n            {\n                id: 10,\n                name: '10',\n                children: [\n                    {\n                        id: 110,\n                        name: '110'\n                    },\n                    {\n                        id: 111,\n                        name: '111'\n                    }\n                ]\n            }\n        ]\n    }\n];\ngenerateDepartmentTree(list, departmentTreeHtmlArr);\nvar departmentTreeHtml = departmentTreeHtmlArr.join('');\nconsole.log(departmentTreeHtml);\n\ndocument.querySelector('ul').innerHTML = departmentTreeHtml ;\n```\n\n结果:\n\n<ul>\n    <li>\n        <span class=\"zh-name\" data-id=\"1\">\n            <span class=\"zh-arrow\"></span>\n            <span class=\"zh-text\">1</span>\n        </span>\n        <ul>\n            <li>\n                <span class=\"zh-name\" data-id=\"10\">\n                    <span class=\"zh-arrow\"></span>\n                    <span class=\"zh-text\">10</span>\n                </span>\n                <ul>\n                    <li>\n                        <span class=\"zh-name\" data-id=\"110\">\n                            <span class=\"zh-arrow\"></span>\n                            <span class=\"zh-text\">110</span>\n                        </span>\n                    </li>\n                    <li>\n                        <span class=\"zh-name\" data-id=\"111\">\n                            <span class=\"zh-arrow\"></span>\n                            <span class=\"zh-text\">111</span>\n                        </span>\n                    </li>\n                </ul>\n            </li>\n        </ul>\n    </li>\n</ul>\n\n**添加`padding-left`值:**\n\n```\nfunction generateDepartmentTree(data, htmlArr, paddingLeft=0) {\n  var isExistChildren;\n  data.forEach(function(item) {\n    isExistChildren = item.children && item.children.length;\n    htmlArr.push(`<li>\n                    <span class=\"zh-name\" data-id=\"${item.id}\" style=\"padding-left: ${paddingLeft}px;\">\n                      <span class=\"zh-fold ${ isExistChildren ? '' : 'zh-fold-empty' }\"></span>\n                      <span class=\"zh-text\" title=\"${item.name}\">${item.name}</span>\n                    </span>`);\n    if(isExistChildren) {\n      htmlArr.push(`<ul>`);\n      generateDepartmentTree(item.children, htmlArr, paddingLeft+20);\n      htmlArr.push(`</ul>`);\n    }\n    htmlArr.push(`</li>`);\n  });\n}\n```"
PS:写作不易,如要转裁,请标明转载出处。

如果此篇对您有帮助,可小额赞助,以兹鼓励!