【角色管理】如何快速学会树形（Tree）结构图

开发工具与关键技术：VS 后端
作者：陈芝番
撰写时间：2020.04.14

——✦日常生活中，经常遇到具有层次关系的例子，一所大学由若干个学院组成，每个学院又有若干个专业。树是由N个节点构成的有限集合T，当N=0时，T称为空树，否则，在任一非空树T中：

有且仅有一个特定的结点，它没有前驱结点，称其为根节点；
剩下的结点分为M（M>0）个互不相交的子集T1，T2......Tm,其中每个子集本身又是一棵树，并称其为根的子树。

——✦注意：

树的定义具有递归性，即树中还有树，树的递归定义揭示出树的固有特性。
由于子树的互不相交性，树中每个结点只属于一棵树（子树），且树中的每一个结点都是该树中某一棵子树的根。

——✦源代码如下：//list:表格展示 data:一般展示 form：表单展示

data: [{
                "id": 16, "pid": 0, "name": "系统角色", "jingle": "system", "href": "javascript:;", "level": 1, "sort": 2, "icon": "icon-cog", "status": 1, "create_time": 1531020243, "update_time": 1531020299, "children": [{
                    "id": 25, "pid": 16, "name": "前台职位", "jingle": "admin", "href": "", "level": 2, "sort": 1, "icon": "", "status": 1, "create_time": 1531021892, "update_time": 1531021892, "children": [{ "id": 28, "pid": 25, "name": "结核病防治科室", "jingle": "add admin", "href": "", "level": 3, "sort": 1, "icon": "", "status": 1, "create_time": 1538020839, "update_time": 1538020839, "children": [] },
                    { "id": 29, "pid": 25, "name": "院长", "jingle": "edit admin", "href": "", "level": 3, "sort": 1, "icon": "", "status": 1, "create_time": 1538020871, "update_time": 1538020871, "children": [] },
                    { "id": 29, "pid": 25, "name": "结核科主任", "jingle": "edit admin", "href": "", "level": 3, "sort": 1, "icon": "", "status": 1, "create_time": 1538020871, "update_time": 1538020871, "children": [] },
                    { "id": 30, "pid": 25, "name": "普通医护人员", "jingle": "delete admin", "href": "", "level": 3, "sort": 1, "icon": "", "status": 1, "create_time": 1538023903, "update_time": 1538023903, "children": [] }]},
                { "id": 27, "pid": 16, "name": "精神卫生科室", "jingle": "web site", "href": "", "level": 2, "sort": 1, "icon": "", "status": 1, "create_time": 1536912438, "update_time": 1536912438, "children": [{ "id": 31, "pid": 27, "name": "编辑", "jingle": "edit site", "href": "", "level": 3, "sort": 1, "icon": "", "status": 1, "create_time": 1538097015, "update_time": 1538097015, "children": [] }] },
                { "id": 32, "pid": 16, "name": "皮肤性病科室", "jingle": "friend link", "href": "", "level": 2, "sort": 1, "icon": "", "status": 1, "create_time": 1538278095, "update_time": 1538278095, "children": [{ "id": 33, "pid": 32, "name": "新增", "jingle": "add link", "href": "", "level": 3, "sort": 1, "icon": "", "status": 1, "create_time": 1538279661, "update_time": 1538279661, "children": [] }] }]},
                {
                "id": 6, "pid": 0, "name": "数据权限", "jingle": "power", "href": "javascript:;", "level": 1, "sort": 3, "icon": "icon-lock", "status": 1, "create_time": 1530934634, "update_time": 1531020289, "children": [{
                    "id": 7, "pid": 6, "name": "数据权限", "jingle": "menu", "href": "", "level": 2, "sort": 1, "icon": "", "status": 1, "create_time": 1530934662, "update_time": 1531020115, "children":
                     [{ "id": 8, "pid": 7, "name": "肺结核", "jingle": "menu add", "href": "", "level": 3, "sort": 1, "icon": "", "status": 1, "create_time": 1530934854, "update_time": 1530934854, "children": [] },
                      { "id": 9, "pid": 7, "name": "结核病胸膜炎", "jingle": "menu edit", "href": "", "level": 3, "sort": 1, "icon": "", "status": 1, "create_time": 1530934943, "update_time": 1530934943, "children": [] },
                      { "id": 9, "pid": 7, "name": "肺外结核", "jingle": "menu edit", "href": "", "level": 3, "sort": 1, "icon": "", "status": 1, "create_time": 1530934943, "update_time": 1530934943, "children": [] },
                      { "id": 9, "pid": 7, "name": "抑郁症", "jingle": "menu edit", "href": "", "level": 3, "sort": 1, "icon": "", "status": 1, "create_time": 1530934943, "update_time": 1530934943, "children": [] },
                      { "id": 9, "pid": 7, "name": "精神分裂症", "jingle": "menu edit", "href": "", "level": 3, "sort": 1, "icon": "", "status": 1, "create_time": 1530934943, "update_time": 1530934943, "children": [] },
                      { "id": 9, "pid": 7, "name": "淋病", "jingle": "menu edit", "href": "", "level": 3, "sort": 1, "icon": "", "status": 1, "create_time": 1530934943, "update_time": 1530934943, "children": [] },
                      { "id": 9, "pid": 7, "name": "梅毒", "jingle": "menu edit", "href": "", "level": 3, "sort": 1, "icon": "", "status": 1, "create_time": 1530934943, "update_time": 1530934943, "children": [] },
                      { "id": 9, "pid": 7, "name": "高血压", "jingle": "menu edit", "href": "", "level": 3, "sort": 1, "icon": "", "status": 1, "create_time": 1530934943, "update_time": 1530934943, "children": [] },
                      { "id": 9, "pid": 7, "name": "糖尿病", "jingle": "menu edit", "href": "", "level": 3, "sort": 1, "icon": "", "status": 1, "create_time": 1530934943, "update_time": 1530934943, "children": [] },
                      { "id": 10, "pid": 7, "name": "恶性肿瘤", "jingle": "menu delete", "href": "", "level": 3, "sort": 1, "icon": "", "status": 1, "create_time": 1530934977, "update_time": 1530934977, "children": [] }]
                },]},

            {"id": 17, "pid": 0, "name": "功能权限", "jingle": "blog", "href": "javascript:;", "level": 1, "sort": 4, "icon": "icon-hot", "status": 1, "create_time": 1531020432, "update_time": 1538018320, "children": [{ "id": 45, "pid": 17, "name": "综合展示", "jingle": "blog", "href": "", "level": 2, "sort": 1, "icon": "", "status": 1, "create_time": 1548208237, "update_time": 1548208237, "children": [{ "id": 46, "pid": 45, "name": "综合展示", "jingle": "examine", "href": "", "level": 3, "sort": 1, "icon": "", "status": 1, "create_time": 1548208407, "update_time": 1548208407, "children": [] }] },
            { "id": 47, "pid": 17, "name": "疫情预警", "jingle": "notice", "href": "", "level": 2, "sort": 1, "icon": "", "status": 1, "create_time": 1551319464, "update_time": 1551319464, "children": [{ "id": 48, "pid": 47, "name": "疫情预警", "jingle": "add notice", "href": "", "level": 3, "sort": 1, "icon": "", "status": 1, "create_time": 1551319880, "update_time": 1551319880, "children": [] }] },
            { "id": 47, "pid": 17, "name": "专题分析", "jingle": "notice", "href": "", "level": 2, "sort": 1, "icon": "", "status": 1, "create_time": 1551319464, "update_time": 1551319464, "children": [{ "id": 48, "pid": 47, "name": "专题分析", "jingle": "add notice", "href": "", "level": 3, "sort": 1, "icon": "", "status": 1, "create_time": 1551319880, "update_time": 1551319880, "children": [] }] },
            { "id": 47, "pid": 17, "name": "报告报表", "jingle": "notice", "href": "", "level": 2, "sort": 1, "icon": "", "status": 1, "create_time": 1551319464, "update_time": 1551319464, "children": [{ "id": 48, "pid": 47, "name": "报告报表", "jingle": "add notice", "href": "", "level": 3, "sort": 1, "icon": "", "status": 1, "create_time": 1551319880, "update_time": 1551319880, "children": [] }] }
            ]},          
            {"id": 39, "pid": 0, "name": "资源权限", "jingle": "email", "href": "javascript:;", "level": 1, "sort": 4, "icon": "icon-email", "status": 1, "create_time": 1539843564, "update_time": 1539843772, "children": [       
            { "id": 41, "pid": 40, "name": "只读", "jingle": "add tpl", "href": "", "level": 3, "sort": 1, "icon": "", "status": 1, "create_time": 1539844655, "update_time": 1539844655, "children": [] },          
            { "id": 43, "pid": 40, "name": "编辑", "jingle": "edit email", "href": "", "level": 3, "sort": 1, "icon": "", "status": 1, "create_time": 1539912274, "update_time": 1539912274, "children": [] }]             
            }, ],

——✦在不同的应用场合，可以用不同的方法来表示树，常用的方法有如下：

直观（树形，倒置树）表示法：非常形象，树的形状就像倒立树。
嵌套集合表示法：该表示法用集合表示结点之间的层次关系，对于其中任意两个集合，或者一个集合包含另一个集合。
凹入表（缩进）表示法：该表示法类似于书的目录，用结点逐层缩进的方法表示树中各结点之间的层次关系。
广义表（嵌套括号）表示法：该表示法用括号嵌套表示结点之间的层次关系，主要用于树的理论的概括。

——✦表格列表以树形菜单排列

 table_tree: function () {

            var child = this.thead.querySelectorAll("[data-field]");

            var changes = this.thead.getAttribute("data-tree-changes");

            if (changes) {

                var cha = document.createElement("th");

                cha.innerHTML = "<i class='verTreeIcon icon-check-box blue ver-tree-check-all ver-tree-checks'></i>";

                cha.width = 30;

                this.thead.insertBefore(cha, this.thead.children[0])

            }

            var chas = document.createElement("th");

            this.thead.insertBefore(chas, this.thead.children[0]);

            chas.style.width = "5em";

            var html = this.list_item(this.data, child, 0, changes);

            var tbody = document.createElement("tbody");

            tbody.innerHTML = html;

            this.tree.appendChild(tbody);

            this.tree_options_list();

            this.checkInput();

        },

【角色管理】如何快速学会树形（Tree）结构图

——✦注意：

——✦源代码如下：//list:表格展示 data:一般展示 form：表单展示

——✦在不同的应用场合，可以用不同的方法来表示树，常用的方法有如下：

——✦表格列表以树形菜单排列

——✦树的存储方式同样有顺序存储和链式存储两种方式。

猜你喜欢