使用typeScript 进行扁平化数据转树实现demo
作者:阿淮iya
这篇文章主要介绍了使用typeScript 进行扁平化数据转树实现demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
使用typeScript 进行扁平化数据转树
// 类型定义,同时也是一个完整数据 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实现代码 // treeNodes:是传入传参并定义了该类型 :TreeNode[] 函数返回类型 function makeTree(treeNodes: TreeNode[]): TreeNode[] { // 提前生成节点查找表。 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 ?? []; }
需要转换的数据
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: "系统日志", 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: "菜单设置", url: "/sysmenu", path: "/sysmenu", parentId: 61, orderNo: 10, icon: "", enable: 1, tableName: "Sys_Menu", permission: ["Search"], }, { id: 63, name: "下拉框绑定设置", 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: "货运管理", 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: "产品管理", 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: "转运管理", url: "/cross", path: "/cross", parentId: 169, orderNo: 300, icon: "ant-design:arrows-alt-outlined", enable: 1, tableName: "转运管理", 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: "转运", 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: "仓储报表", 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: "产品管理", url: "/product", path: "/product", parentId: 169, orderNo: 700, icon: "ant-design:codepen-outlined", enable: 1, tableName: "产品管理", permission: [ "Search", "Add", "Delete", "Update", "Import", "Export", "Upload", "Audit", ], }, { id: 164, name: "账号管理", url: "/account", path: "/account", parentId: 163, orderNo: 701, icon: "", enable: 1, tableName: "oms_account", permission: ["Search"], }, { id: 165, name: "权限管理", 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: "权限管理", 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: "系统设置", url: "/", path: "/", parentId: 167, orderNo: 1000, icon: "ios-cog", enable: 1, tableName: "系统设置", 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: "仓库报表", url: "/report", path: "/report", parentId: 169, orderNo: 1300, icon: "ant-design:bar-chart-outlined", enable: 1, tableName: "仓库报表", 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: "用户基础信息", url: "/", path: "/", parentId: 167, orderNo: 1600, icon: "ios-people", enable: 1, tableName: "用户基础信息", 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", ], }, ];
在终端进行运行
ts-node makeTree.ts
结果如下:
以上就是typescript 扁平数据转树实现demo的详细内容,更多关于typescript 扁平数据转树的资料请关注脚本之家其它相关文章!