Bootstrap

根据后台数据结构,构建搜索目录树

效果图:

数据源

const data = [
	{
	  "categoryidf": "761525000288210944",
	  "categoryids": "766314364226637824",
	  "menunamef": "经济运行",
	  "menunames": "经济运行总览",
	  "tempname": "南沙区XXXX年XX季度经济运行情况及存在问题",
	  "tempid": "787314277060055040",
	  "show_orderf": 2,
	  "show_orderss": 1
	},
	{
	  "categoryidf": "761525000288210944",
	  "categoryids": "766314364226637824",
	  "menunamef": "经济运行",
	  "menunames": "经济运行总览",
	  "tempname": "报告模板",
	  "tempid": "805483785230618624",
	  "show_orderf": 2,
	  "show_orderss": 1
	},
	{
	  "categoryidf": "761525000288210944",
	  "categoryids": "766314364226637824",
	  "menunamef": "经济运行",
	  "menunames": "经济运行总览",
	  "tempname": "南沙区经济运行分析报告-开发中勿删",
	  "tempid": "766692223369744384",
	  "show_orderf": 2,
	  "show_orderss": 1
	},
	{
	  "categoryidf": "761560904969097216",
	  "categoryids": "787329448503545856",
	  "menunamef": "宏观经济",
	  "menunames": "地区生产总值",
	  "tempname": null,
	  "tempid": null,
	  "show_orderf": 3,
	  "show_orderss": 1
	},
	{
	  "categoryidf": "761560904969097216",
	  "categoryids": "787329962872016896",
	  "menunamef": "宏观经济",
	  "menunames": "行业总览",
	  "tempname": null,
	  "tempid": null,
	  "show_orderf": 3,
	  "show_orderss": 2
	},
	{
	  "categoryidf": "761560904969097216",
	  "categoryids": "787330410567831552",
	  "menunamef": "宏观经济",
	  "menunames": "工业",
	  "tempname": null,
	  "tempid": null,
	  "show_orderf": 3,
	  "show_orderss": 3
	},
	{
	  "categoryidf": "761560904969097216",
	  "categoryids": "787330779163267072",
	  "menunamef": "宏观经济",
	  "menunames": "商贸业",
	  "tempname": null,
	  "tempid": null,
	  "show_orderf": 3,
	  "show_orderss": 4
	},
	{
	  "categoryidf": "761560904969097216",
	  "categoryids": "787331288074948608",
	  "menunamef": "宏观经济",
	  "menunames": "服务业",
	  "tempname": null,
	  "tempid": null,
	  "show_orderf": 3,
	  "show_orderss": 5
	},
	{
	  "categoryidf": "761560904969097216",
	  "categoryids": "787331500218650624",
	  "menunamef": "宏观经济",
	  "menunames": "房地产开发业",
	  "tempname": null,
	  "tempid": null,
	  "show_orderf": 3,
	  "show_orderss": 6
	},
	{
	  "categoryidf": "761560904969097216",
	  "categoryids": "787331766636646400",
	  "menunamef": "宏观经济",
	  "menunames": "建筑业",
	  "tempname": null,
	  "tempid": null,
	  "show_orderf": 3,
	  "show_orderss": 7
	},
	{
	  "categoryidf": "761560904969097216",
	  "categoryids": "787332016487141376",
	  "menunamef": "宏观经济",
	  "menunames": "进出口",
	  "tempname": null,
	  "tempid": null,
	  "show_orderf": 3,
	  "show_orderss": 8
	},
	{
	  "categoryidf": "761560904969097216",
	  "categoryids": "787332232145670144",
	  "menunamef": "宏观经济",
	  "menunames": "固定资产投资",
	  "tempname": null,
	  "tempid": null,
	  "show_orderf": 3,
	  "show_orderss": 9
	},
	{
	  "categoryidf": "761560904969097216",
	  "categoryids": "787332439809855488",
	  "menunamef": "宏观经济",
	  "menunames": "派生产业",
	  "tempname": null,
	  "tempid": null,
	  "show_orderf": 3,
	  "show_orderss": 10
	},
	{
	  "categoryidf": "767696419078410240",
	  "categoryids": null,
	  "menunamef": "营商环境",
	  "menunames": null,
	  "tempname": null,
	  "tempid": null,
	  "show_orderf": 4,
	  "show_orderss": 0
	},
	{
	  "categoryidf": "763705116242087936",
	  "categoryids": null,
	  "menunamef": "数字经济",
	  "menunames": null,
	  "tempname": null,
	  "tempid": null,
	  "show_orderf": 5,
	  "show_orderss": 0
	},
	{
	  "categoryidf": "763705094125522944",
	  "categoryids": "787332966232756224",
	  "menunamef": "产业经济",
	  "menunames": "产业总览",
	  "tempname": null,
	  "tempid": null,
	  "show_orderf": 5,
	  "show_orderss": 1
	},
	{
	  "categoryidf": "763705094125522944",
	  "categoryids": "807545774656327680",
	  "menunamef": "产业经济",
	  "menunames": "产业链图谱",
	  "tempname": "系列产业研究报告标准版本",
	  "tempid": "807546080970543104",
	  "show_orderf": 5,
	  "show_orderss": 2
	},
	{
	  "categoryidf": "763705094125522944",
	  "categoryids": "787333327861452800",
	  "menunamef": "产业经济",
	  "menunames": "人才和创新资源",
	  "tempname": null,
	  "tempid": null,
	  "show_orderf": 5,
	  "show_orderss": 3
	},
	{
	  "categoryidf": "767696724260163584",
	  "categoryids": null,
	  "menunamef": "企业发展",
	  "menunames": null,
	  "tempname": null,
	  "tempid": null,
	  "show_orderf": 6,
	  "show_orderss": 0
	},
	{
	  "categoryidf": "767696857580310528",
	  "categoryids": "777906003562860544",
	  "menunamef": "智慧招商",
	  "menunames": "演示",
	  "tempname": "南沙区经济运行分析报告-演示使用勿删",
	  "tempid": "777906168692609024",
	  "show_orderf": 7,
	  "show_orderss": 2
	},
	{
	  "categoryidf": "786523422359425024",
	  "categoryids": null,
	  "menunamef": "经济韧性评估",
	  "menunames": null,
	  "tempname": null,
	  "tempid": null,
	  "show_orderf": 8,
	  "show_orderss": 0
	}
  ]

转换为树目录结构

// 定义一个函数来构建层级结构
function buildHierarchy(data: any[]): any[]{
    const hierarchy: any[] = [];
    const map = new Map<string, any>();
	console.log('map',map);
	

    // 遍历数据,构建 map
    data.forEach(item => {
        if (!map.has(item.menunamef)) {
            map.set(item.menunamef, {
				key:item.categoryidf,
                label: item.menunamef,
                children: []
            });
            hierarchy.push(map.get(item.menunamef));
        }

        if (item.menunames) {
            const parent = map.get(item.menunamef);
            if (!parent.children.find(child => child.label === item.menunames)) {
                parent.children.push({
					key:item.categoryids,
                    label: item.menunames,
                    children: []
                });
            }
        }

        if (item.tempname) {
            const parent = map.get(item.menunamef);
            const subParent = parent.children.find(child => child.label === item.menunames);
            if (subParent) {
                subParent.children.push({
                    label: item.tempname,
                    key: item.tempid
                });
            } else {
                parent.children.push({
                    label: item.tempname,
                    key: item.tempid
                });
            }
        }
    });

    return hierarchy;
}

const result = buildHierarchy(data);

;