使用typeScript 進行扁平化數(shù)據(jù)轉(zhuǎn)樹實現(xiàn)demo
更新時間：2023年06月13日 10:37:41 作者：阿淮iya
這篇文章主要介紹了使用typeScript 進行扁平化數(shù)據(jù)轉(zhuǎn)樹實現(xiàn)demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
使用typeScript 進行扁平化數(shù)據(jù)轉(zhuǎn)樹
// 類型定義，同時也是一個完整數(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實現(xiàn)代碼
// treeNodes：是傳入傳參并定義了該類型 ：TreeNode[] 函數(shù)返回類型
function makeTree(treeNodes: TreeNode[]): TreeNode[] {
// 提前生成節(jié)點查找表。
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: "貨運管理",
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)運管理",
url: "/cross",
path: "/cross",
parentId: 169,
orderNo: 300,
icon: "ant-design:arrows-alt-outlined",
enable: 1,
tableName: "轉(zhuǎ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)運",
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: "產(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: "賬號管理",
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: "倉庫報表",
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: "用戶基礎(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",
],
},
];
在終端進行運行
ts-node makeTree.ts
結(jié)果如下：
以上就是typescript 扁平數(shù)據(jù)轉(zhuǎn)樹實現(xiàn)demo的詳細(xì)內(nèi)容，更多關(guān)于typescript 扁平數(shù)據(jù)轉(zhuǎn)樹的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
TypeScript 基礎(chǔ)數(shù)據(jù)結(jié)構(gòu)哈希表 HashTable教程
這篇文章主要為大家介紹了TypeScript 基礎(chǔ)數(shù)據(jù)結(jié)構(gòu)哈希表 HashTable教程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
數(shù)據(jù)結(jié)構(gòu)TypeScript之棧和隊列詳解
這篇文章主要介紹了數(shù)據(jù)結(jié)構(gòu)TypeScript之棧和隊列詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要為大家介紹了CesiumJS源碼雜談之從光到Uniform的使用示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
頁面需要加載多個js文件時，加載時瀏覽器會停止網(wǎng)頁渲染，加載文件越多，網(wǎng)頁失去響應(yīng)的時間就會越長；由于js文件之間存在依賴關(guān)系，必須嚴(yán)格保證加載順序，當(dāng)依賴關(guān)系很復(fù)雜的時候，代碼的編寫和維護都會變得困難。這種情況下require.js插件應(yīng)運而生。2022-12-12
TypeScript學(xué)習(xí)輕松玩轉(zhuǎn)類型操作
這篇文章主要為大家介紹了TypeScript學(xué)習(xí)輕松玩轉(zhuǎn)類型操作，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
rollup?cli開發(fā)全面系統(tǒng)性rollup源碼分析
這篇文章主要為大家介紹了rollup?cli開發(fā)全網(wǎng)系統(tǒng)性rollup源碼分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
正在學(xué)習(xí)Sizzle源碼或有一定前端基礎(chǔ)的同學(xué)們，可以一邊看源碼一邊看這些文章進行驗證，所以雖然我會分析源碼中的正則表達(dá)式,有大量的注釋，但不會講正則表達(dá)式的基本用法！2015-04-04
TypeScript配置文件之compilerOptions配置過程
這篇文章主要介紹了TypeScript配置文件之compilerOptions配置過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-05-05
這篇文章主要介紹了如何解決tsconfig.json配置不生效的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-05-05
TypeScript使用命令行編譯器tsc或其他工具手動執(zhí)行編譯,在html使用s時編譯為JavaScript,那么有沒有辦法簡化過程,不編譯直接使用,本文介紹html中使用TypeScript的兩種方法2024-07-07