html动态生成树形结构，利用javascript和html在网页上显示一个家庭图，在显示之前不知道任何人的关系？

Posted 2023-03-17

参考技术A 这个不是跟栏目生成差不多的意思么，跟生成XML也很像。

不知道你读进来的内容是什么样的，不过基本就是根据指针做链表的思路，然后改成字符串或者DOM对象。 参考技术B 用js的树形插件吧，本回答被提问者采纳 参考技术C 不知道关系，怎么显示？？？追问

就是要从外面读出关系，数量的那种；并且可以随意add和delete

JavaScript打印JSON对象 - 树形结构输出 - 格式化JSON数组 - JS从一维数组 生成树形结构对象

效果图

方法

// 格式化对象，使用四个空格缩进
function get_formatted_string (objectOrArray) 
    return JSON.stringify(objectOrArray, null, 4)


// 数组对象
let data = [
    
        "menuId": 1,
        "menuName": "XX后台",
        "parentId": 0,
        "isFrame": "1",
        "status": "0",
        "children": [
            
                "menuId": 100,
                "menuName": "XX菜单",
                "parentId": 1,
                "isFrame": "1",
                "status": "0",
                "children": [
                    
                        "menuId": 1000,
                        "menuName": "基础功能",
                        "parentId": 100,
                        "isFrame": "1",
                        "status": "0",
                        "children": [
                            
                                "menuId": 1001,
                                "menuName": "订单管理",
                                "parentId": 1000,
                                "isFrame": "1",
                                "status": "0"
                            ,
                            
                                "menuId": 1002,
                                "menuName": "商品管理",
                                "parentId": 1000,
                                "isFrame": "1",
                                "status": "0"
                            
                        ]
                    ,
                    
                        "menuId": 1013,
                        "menuName": "页面管理",
                        "parentId": 100,
                        "isFrame": "1",
                        "status": "0",
                        "children": [
                            
                                "menuId": 1014,
                                "menuName": "轮播图管理",
                                "parentId": 1013,
                                "isFrame": "1",
                                "status": "0"
                            ,
                            
                                "menuId": 1015,
                                "menuName": "新品推荐",
                                "parentId": 1013,
                                "isFrame": "1",
                                "status": "0"
                            
                        ]
                    
                ]
            ,
            
                "menuId": 101,
                "menuName": "数据导出",
                "parentId": 1,
                "isFrame": "1",
                "status": "0",
                "children": [
                    
                        "menuId": 1018,
                        "menuName": "月销售",
                        "parentId": 101,
                        "isFrame": "1",
                        "status": "0"
                    ,
                    
                        "menuId": 1019,
                        "menuName": "季销售",
                        "parentId": 101,
                        "isFrame": "1",
                        "status": "0"
                    
                ]
            
        ]
    
];



let string = get_formatted_string( data );

// 使用textarea输出保留换行格式的string即可

JS从一维数组 生成树形结构对象

data是一维数组

id、parentId非必填，用来指定每个记录的id和 父节点id的 下标

children是输出子元素的下标（会自动创建此下标）

function handleTree(data, id, parentId, children) 
	let config = 
		id: id || 'id',
		parentId: parentId || 'parentId',
		childrenList: children || 'children'
	;

	var childrenListMap = ;
	var nodeIds = ;
	var tree = [];

	for (let d of data) 
		let parentId = d[config.parentId];
		if (childrenListMap[parentId] == null) 
			childrenListMap[parentId] = [];
		
		nodeIds[d[config.id]] = d;
		childrenListMap[parentId].push(d);
	

	for (let d of data) 
		let parentId = d[config.parentId];
		if (nodeIds[parentId] == null) 
			tree.push(d);
		
	

	for (let t of tree) 
		adaptToChildrenList(t);
	

	function adaptToChildrenList(o) 
		if (childrenListMap[o[config.id]] !== null) 
			o[config.childrenList] = childrenListMap[o[config.id]];
		
		if (o[config.childrenList]) 
			for (let c of o[config.childrenList]) 
				adaptToChildrenList(c);
			
		
	

	console.log(childrenListMap);
	return tree;