使用typeScript 進(jìn)行扁平化數(shù)據(jù)轉(zhuǎn)樹實(shí)現(xiàn)demo
使用typeScript 進(jìn)行扁平化數(shù)據(jù)轉(zhuǎn)樹
// 類型定義,同時(shí)也是一個(gè)完整數(shù)據(jù) interface TreeNode { id: number; name: string; url: string; path: string; parentId: number; orderNo: number; icon?: string; enable?: number; tableName: string; permission?: string[]; children?: TreeNode[]; } // ts實(shí)現(xiàn)代碼 // treeNodes:是傳入傳參并定義了該類型 :TreeNode[] 函數(shù)返回類型 function makeTree(treeNodes: TreeNode[]): TreeNode[] { // 提前生成節(jié)點(diǎn)查找表。 const nodesMap = new Map<number, TreeNode>( treeNodes.map((node) => [node.id, node]) ); const virtualRoot = {} as Partial<TreeNode>; treeNodes.forEach((node, i) => { const parent = nodesMap.get(node.parentId) ?? virtualRoot; (parent.children ??= []).push(node); }); // 返回children值 return virtualRoot.children ?? []; }
需要轉(zhuǎn)換的數(shù)據(jù)
const lists = [ { id: 104, name: "角色管理", url: "/Sys_Role1", path: "/Sys_Role1", parentId: 2, orderNo: 0, icon: "", enable: 1, tableName: "Sys_Role1", permission: ["Search", "Add", "Delete", "Update"], }, { id: 6, name: "系統(tǒng)日志", url: "/Sys_Log/Manager", path: "/Manager", parentId: 5, orderNo: 0, icon: "", enable: 1, tableName: "Sys_Log", permission: ["Search", "Delete", "Export"], }, { id: 149, name: "首頁3", url: "/home", path: "/home", parentId: 168, orderNo: 0, icon: "ant-design:appstore-outlined", enable: 1, tableName: "首頁", permission: [ "Search", "Add", "Delete", "Update", "Import", "Export", "Upload", "Audit", ], }, { id: 62, name: "菜單設(shè)置", url: "/sysmenu", path: "/sysmenu", parentId: 61, orderNo: 10, icon: "", enable: 1, tableName: "Sys_Menu", permission: ["Search"], }, { id: 63, name: "下拉框綁定設(shè)置", url: "/Sys_Dictionary", path: "/Sys_Dictionary", parentId: 61, orderNo: 10, icon: "", enable: 1, tableName: "Sys_Dictionary", permission: ["Search", "Add", "Delete", "Update", "Export"], }, { id: 65, name: "代碼生成", url: "/coder", path: "/coder", parentId: 64, orderNo: 10, icon: "", enable: 1, tableName: "/", permission: ["Search", "Add", "Delete", "Update"], }, { id: 143, name: "訂單管理", url: "/order", path: "/order", parentId: 168, orderNo: 100, icon: "ant-design:account-book-outlined", enable: 1, tableName: "OMS_Orders", permission: [ "Search", "Add", "Delete", "Update", "Import", "Export", "Upload", "Audit", ], }, { id: 170, name: "倉庫主頁", url: "/home", path: "/home", parentId: 169, orderNo: 100, icon: "ant-design:appstore-outlined", enable: 1, tableName: "倉庫主頁", permission: [ "Search", "Add", "Delete", "Update", "Import", "Export", "Upload", "Audit", ], }, { id: 150, name: "貨運(yùn)管理", url: "/shipment", path: "/shipment", parentId: 168, orderNo: 200, icon: "ant-design:deployment-unit-outlined", enable: 1, tableName: "shipment", permission: [ "Search", "Add", "Delete", "Update", "Import", "Export", "Upload", "Audit", ], }, { id: 171, name: "入庫管理", url: "/inbound", path: "/inbound", parentId: 169, orderNo: 200, icon: "ant-design:arrow-down-outlined", enable: 1, tableName: "入庫管理", permission: [ "Search", "Add", "Delete", "Update", "Import", "Export", "Upload", "Audit", ], }, { id: 137, name: "產(chǎn)品管理", url: "/product", path: "/product", parentId: 168, orderNo: 300, icon: "ant-design:codepen-outlined", enable: 1, tableName: "OMS_Product", permission: [ "Search", "Add", "Delete", "Update", "Import", "Export", "Upload", "Audit", ], }, { id: 172, name: "轉(zhuǎn)運(yùn)管理", url: "/cross", path: "/cross", parentId: 169, orderNo: 300, icon: "ant-design:arrows-alt-outlined", enable: 1, tableName: "轉(zhuǎn)運(yùn)管理", permission: [ "Search", "Add", "Delete", "Update", "Import", "Export", "Upload", "Audit", ], }, { id: 145, name: "倉庫管理", url: "/warehouse", path: "/warehouse", parentId: 168, orderNo: 400, icon: "ant-design:gold-outlined", enable: 1, tableName: "倉庫管理", permission: [ "Search", "Add", "Delete", "Update", "Import", "Export", "Upload", "Audit", ], }, { id: 173, name: "出庫管理", url: "/outbound", path: "/outbound", parentId: 169, orderNo: 400, icon: "ant-design:arrow-up-outlined", enable: 1, tableName: "出庫管理", permission: [ "Search", "Add", "Delete", "Update", "Import", "Export", "Upload", "Audit", ], }, { id: 146, name: "入庫", url: "/inbound", path: "/inbound", parentId: 145, orderNo: 401, icon: "", enable: 1, tableName: "Ruku", permission: [ "Search", "Add", "Delete", "Update", "Import", "Export", "Upload", "Audit", ], }, { id: 147, name: "轉(zhuǎn)運(yùn)", url: "/crossdock", path: "/crossdock", parentId: 145, orderNo: 402, icon: "", enable: 1, tableName: "crossdock", permission: [ "Search", "Add", "Delete", "Update", "Import", "Export", "Upload", "Audit", ], }, { id: 148, name: "出庫", url: "/outbound", path: "/outbound", parentId: 145, orderNo: 403, icon: "", enable: 1, tableName: "outbound", permission: [ "Search", "Add", "Delete", "Update", "Import", "Export", "Upload", "Audit", ], }, { id: 151, name: "退貨", url: "/return", path: "/return", parentId: 145, orderNo: 404, icon: "", enable: 1, tableName: "return", permission: [ "Search", "Add", "Delete", "Update", "Import", "Export", "Upload", "Audit", ], }, { id: 152, name: "庫存", url: "/inventory", path: "/inventory", parentId: 145, orderNo: 405, icon: "", enable: 1, tableName: "inventory", permission: [ "Search", "Add", "Delete", "Update", "Import", "Export", "Upload", "Audit", ], }, { id: 153, name: "工單", url: "/work", path: "/work", parentId: 145, orderNo: 406, icon: "", enable: 1, tableName: "work", permission: [ "Search", "Add", "Delete", "Update", "Import", "Export", "Upload", "Audit", ], }, { id: 154, name: "資金與賬單", url: "/bill", path: "/bill", parentId: 168, orderNo: 500, icon: "ant-design:dollar-outlined", enable: 1, tableName: "資金與賬單", permission: [ "Search", "Add", "Delete", "Update", "Import", "Export", "Upload", "Audit", ], }, { id: 174, name: "退貨管理", url: "/return", path: "/return", parentId: 169, orderNo: 500, icon: "ant-design:delete-row-outlined", enable: 1, tableName: "退貨管理", permission: [ "Search", "Add", "Delete", "Update", "Import", "Export", "Upload", "Audit", ], }, { id: 155, name: "倉庫賬戶", url: "/customerAccount", path: "/customerAccount", parentId: 154, orderNo: 501, icon: "", enable: 1, tableName: "account", permission: [ "Search", "Add", "Delete", "Update", "Import", "Export", "Upload", "Audit", ], }, { id: 156, name: "倉庫賬單", url: "/flow", path: "/flow", parentId: 154, orderNo: 502, icon: "", enable: 1, tableName: "flow", permission: [ "Search", "Add", "Delete", "Update", "Import", "Export", "Upload", "Audit", ], }, { id: 157, name: "倉儲(chǔ)報(bào)表", url: "/storage", path: "/storage", parentId: 168, orderNo: 600, icon: "ant-design:bar-chart-outlined", enable: 1, tableName: "storage", permission: [ "Search", "Add", "Delete", "Update", "Import", "Export", "Upload", "Audit", ], }, { id: 175, name: "工單管理", url: "/work", path: "/work", parentId: 169, orderNo: 600, icon: "ant-design:container-outlined", enable: 1, tableName: "工單管理", permission: [ "Search", "Add", "Delete", "Update", "Import", "Export", "Upload", "Audit", ], }, { id: 163, name: "用戶管理", url: "/omsuser", path: "/omsuser", parentId: 168, orderNo: 700, icon: "ant-design:user-outlined", enable: 1, tableName: "用戶管理", permission: [ "Search", "Add", "Delete", "Update", "Import", "Export", "Upload", "Audit", ], }, { id: 176, name: "產(chǎn)品管理", url: "/product", path: "/product", parentId: 169, orderNo: 700, icon: "ant-design:codepen-outlined", enable: 1, tableName: "產(chǎn)品管理", permission: [ "Search", "Add", "Delete", "Update", "Import", "Export", "Upload", "Audit", ], }, { id: 164, name: "賬號(hào)管理", url: "/account", path: "/account", parentId: 163, orderNo: 701, icon: "", enable: 1, tableName: "oms_account", permission: ["Search"], }, { id: 165, name: "權(quán)限管理", url: "/role", path: "/role", parentId: 163, orderNo: 702, icon: "", enable: 1, tableName: "oms_role", permission: ["Search"], }, { id: 177, name: "庫存管理", url: "/inventory", path: "/inventory", parentId: 169, orderNo: 800, icon: "ant-design:code-sandbox-outlined", enable: 1, tableName: "庫存管理", permission: [ "Search", "Add", "Delete", "Update", "Import", "Export", "Upload", "Audit", ], }, { id: 178, name: "賬單管理", url: "/bill", path: "/bill", parentId: 169, orderNo: 900, icon: "ant-design:book-outlined", enable: 1, tableName: "賬單管理", permission: [ "Search", "Add", "Delete", "Update", "Import", "Export", "Upload", "Audit", ], }, { id: 71, name: "權(quán)限管理", url: "/permission", path: "/permission", parentId: 2, orderNo: 1000, icon: "ivu-icon ivu-icon-ios-boat", enable: 1, tableName: "Sys_Role", permission: ["Search", "Update"], }, { id: 61, name: "系統(tǒng)設(shè)置", url: "/", path: "/", parentId: 167, orderNo: 1000, icon: "ios-cog", enable: 1, tableName: "系統(tǒng)設(shè)置", permission: ["Search"], }, { id: 179, name: "包材管理", url: "/pack", path: "/pack", parentId: 169, orderNo: 1000, icon: "ant-design:deployment-unit-outlined", enable: 1, tableName: "包材管理", permission: [ "Search", "Add", "Delete", "Update", "Import", "Export", "Upload", "Audit", ], }, { id: 180, name: "客戶中心", url: "/client", path: "/client", parentId: 169, orderNo: 1100, icon: "ant-design:usergroup-delete-outlined", enable: 1, tableName: "客戶中心", permission: [ "Search", "Add", "Delete", "Update", "Import", "Export", "Upload", "Audit", ], }, { id: 181, name: "員工管理", url: "/users", path: "/users", parentId: 169, orderNo: 1200, icon: "ant-design:user-outlined", enable: 1, tableName: "員工管理", permission: [ "Search", "Add", "Delete", "Update", "Import", "Export", "Upload", "Audit", ], }, { id: 5, name: "日志管理", url: "/", path: "/", parentId: 167, orderNo: 1300, icon: "ios-chatbubbles", enable: 1, tableName: "日志管理", permission: ["Search"], }, { id: 182, name: "倉庫報(bào)表", url: "/report", path: "/report", parentId: 169, orderNo: 1300, icon: "ant-design:bar-chart-outlined", enable: 1, tableName: "倉庫報(bào)表", permission: [ "Search", "Add", "Delete", "Update", "Import", "Export", "Upload", "Audit", ], }, { id: 64, name: "代碼生成", url: "/coding", path: "/coding", parentId: 167, orderNo: 1500, icon: "", enable: 1, tableName: "代碼生成", permission: ["Search"], }, { id: 2, name: "用戶基礎(chǔ)信息", url: "/", path: "/", parentId: 167, orderNo: 1600, icon: "ios-people", enable: 1, tableName: "用戶基礎(chǔ)信息", permission: ["Search"], }, { id: 132, name: "消息推送", url: "/signalR", path: "/signalR", parentId: 167, orderNo: 1700, icon: "el-icon-chat-line-round", enable: 2, tableName: "消息推送", permission: ["Search"], }, { id: 9, name: "用戶管理", url: "/Sys_User/Manager", path: "/Manager", parentId: 2, orderNo: 11110, icon: "", enable: 1, tableName: "Sys_User", permission: [ "Search", "Add", "Delete", "Update", "Import", "Export", "Upload", "Audit", ], }, ];
在終端進(jìn)行運(yùn)行
ts-node makeTree.ts
結(jié)果如下:
以上就是typescript 扁平數(shù)據(jù)轉(zhuǎn)樹實(shí)現(xiàn)demo的詳細(xì)內(nèi)容,更多關(guān)于typescript 扁平數(shù)據(jù)轉(zhuǎn)樹的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
數(shù)據(jù)結(jié)構(gòu)TypeScript之鏈表實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了數(shù)據(jù)結(jié)構(gòu)TypeScript之鏈表實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01TypeScript 基礎(chǔ)數(shù)據(jù)結(jié)構(gòu)哈希表 HashTable教程
這篇文章主要為大家介紹了TypeScript 基礎(chǔ)數(shù)據(jù)結(jié)構(gòu)哈希表 HashTable教程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02自動(dòng)生成typescript類型聲明工具實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了自動(dòng)生成typescript類型聲明工具實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04typescript類型體操及關(guān)鍵字使用示例詳解
這篇文章主要為大家介紹了typescript類型體操及關(guān)鍵字使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11TypeScript 高級(jí)數(shù)據(jù)類型實(shí)例詳解
這篇文章主要為大家介紹了TypeScript 高級(jí)數(shù)據(jù)類型實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01使用typeScript 進(jìn)行扁平化數(shù)據(jù)轉(zhuǎn)樹實(shí)現(xiàn)demo
這篇文章主要介紹了使用typeScript 進(jìn)行扁平化數(shù)據(jù)轉(zhuǎn)樹實(shí)現(xiàn)demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06Typescript使用裝飾器實(shí)現(xiàn)接口字段映射與Mock實(shí)例
這篇文章主要為大家介紹了Typescript使用裝飾器實(shí)現(xiàn)接口字段映射與Mock實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04