摘要:通過(guò)建立樹(shù)形結(jié)構(gòu)后臺(tái)傳輸?shù)臄?shù)據(jù),這里為了不影響閱讀,刪除掉了不必要的部分?jǐn)?shù)據(jù)格式操作成功租戶下所有部門部門部門部門名稱部門,以及部門格式為,二級(jí)部門格式為,以此類推部門的上級(jí)部門,如果為表示該部門為頂級(jí)部門租戶該部門下綁定車輛數(shù)部門租戶信息
通過(guò)id、parentId建立樹(shù)形結(jié)構(gòu)
后臺(tái)傳輸?shù)?b>json數(shù)據(jù),這里為了不影響閱讀,刪除掉了不必要的部分
數(shù)據(jù)格式{ "httpCode": 200, "code": 200, "message": "操作成功", "data": { "orgList": [ // 租戶下所有部門 { "id": 88, //部門id "name": "部門1", //部門名稱 "orgCode": "/38/88/", //部門code,以及部門格式為/**/,二級(jí)部門格式為/**/**/,以此類推 "parentId": null, //部門的上級(jí)部門id,如果parentId為null表示該部門為頂級(jí)部門 "tenantId": 38, //租戶Id "binds": 0 //該部門下綁定車輛數(shù) }, { "id": 90, "name": "part2", "orgCode": "/38/88/90/", "parentId": 88, "tenantId": 38, "binds": 0 }, { "id": 92, "name": "part3", "orgCode": "/38/88/90/92/", "parentId": 90, "tenantId": 38, "binds": 0 }, { "id": 93, "name": "part4", "orgCode": "/38/88/90/92/93/", "parentId": 92, "tenantId": 38, "binds": 0 }, { "id": 96, "name": "部門2", "orgCode": "/38/96/", "parentId": null, "tenantId": 38, "binds": 1 }, { "id": 98, "name": "part22", "orgCode": "/38/96/98/", "parentId": 96, "tenantId": 38, "binds": 1 }, { "id": 100, "name": "111", "orgCode": "/38/88/90/92/93/100/", "parentId": 93, "tenantId": 38, "binds": 0 } ], "tenantInfo": { //租戶信息 "id": 38, //租戶Id "name": "測(cè)試租戶", //租戶名稱 "orgCode": "/38/", //租戶code "parentId": null, //因?yàn)樵谠O(shè)計(jì)中租戶就是頂級(jí)部門,所以不會(huì)有parentId "tenantId": 38, //租戶id "binds": 1 //租戶下綁定的總車輛數(shù) } } }
這里后臺(tái)沒(méi)有直接返回樹(shù)形結(jié)構(gòu)是由于有多處使用該接口,而只有在該頁(yè)面需要做成樹(shù)狀圖,所以需要前端處理下數(shù)據(jù)格式,完成效果如下
實(shí)現(xiàn)方法大概思路,因?yàn)榉祷氐臄?shù)據(jù)中orgCode是有規(guī)律的,所以新建兩個(gè)Map結(jié)構(gòu),level通過(guò)orgCode將數(shù)據(jù)劃分為不同的級(jí)別,然后以級(jí)別為鍵值對(duì)數(shù)據(jù)進(jìn)行存儲(chǔ),childrenNode 通過(guò)以parnetId為鍵值來(lái)對(duì)數(shù)據(jù)進(jìn)行存儲(chǔ),存儲(chǔ)完成之后,通過(guò)findSuperiors遞歸將childrenNode 中的數(shù)據(jù)按照級(jí)別由高到低的通過(guò)parnetId填存到level中
//遞歸結(jié)構(gòu)樹(shù) findSuperiors(max, map, children, min) { if (max < min) { return } map.get(max).map(item => { if (children.get(item["parentId"]).length > 0) { item.children = children.get(item["id"]); } }) this.findSuperiors(max - 1, map, children, min); } //請(qǐng)求后臺(tái)數(shù)據(jù) services.get_tree(this.id) .then(res => { this.treeData = []; let childrenNode = new Map(), level = new Map(); for (let key of res.orgList) { let parentId = key["parentId"]; if (childrenNode.has(parentId)) { childrenNode.get(parentId).push(key); } else { childrenNode.set(parentId, []); childrenNode.get(parentId).push(key); } let lev = key["orgCode"].split("/").length - 3; if (level.has(lev)) { level.get(lev).push(key); } else { level.set(lev, []); key.children = []; level.get(lev).push(key); } } let min = Math.min.apply(Math, [...level.keys()]), max = Math.max.apply(Math, [...level.keys()]); this.findSuperiors(max, level, childrenNode, min); if (res.tenantInfo) { res.tenantInfo.children = []; res.tenantInfo.children = level.get(min); this.treeData.push(res.tenantInfo); } else { this.treeData = level.get(min); } } )
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/117402.html
摘要:通過(guò)建立樹(shù)形結(jié)構(gòu)后臺(tái)傳輸?shù)臄?shù)據(jù),這里為了不影響閱讀,刪除掉了不必要的部分?jǐn)?shù)據(jù)格式操作成功租戶下所有部門部門部門部門名稱部門,以及部門格式為,二級(jí)部門格式為,以此類推部門的上級(jí)部門,如果為表示該部門為頂級(jí)部門租戶該部門下綁定車輛數(shù)部門租戶信息 通過(guò)id、parentId建立樹(shù)形結(jié)構(gòu) 后臺(tái)傳輸?shù)膉son數(shù)據(jù),這里為了不影響閱讀,刪除掉了不必要的部分 數(shù)據(jù)格式 { httpCode:...
摘要:通過(guò)建立樹(shù)形結(jié)構(gòu)后臺(tái)傳輸?shù)臄?shù)據(jù),這里為了不影響閱讀,刪除掉了不必要的部分?jǐn)?shù)據(jù)格式操作成功租戶下所有部門部門部門部門名稱部門,以及部門格式為,二級(jí)部門格式為,以此類推部門的上級(jí)部門,如果為表示該部門為頂級(jí)部門租戶該部門下綁定車輛數(shù)部門租戶信息 通過(guò)id、parentId建立樹(shù)形結(jié)構(gòu) 后臺(tái)傳輸?shù)膉son數(shù)據(jù),這里為了不影響閱讀,刪除掉了不必要的部分 數(shù)據(jù)格式 { httpCode:...
閱讀 3985·2021-11-23 10:09
閱讀 1347·2021-11-23 09:51
閱讀 2946·2021-11-23 09:51
閱讀 1594·2021-09-07 09:59
閱讀 2359·2019-08-30 15:55
閱讀 2306·2019-08-30 15:55
閱讀 2955·2019-08-30 15:52
閱讀 2567·2019-08-26 17:04