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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html动态生成树形结构,利用javascript和html在网页上显示一个家庭图,在显示之前不知道任何人的关系?相关的知识,希望对你有一定的参考价值。

参考技术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;

以上是关于html动态生成树形结构,利用javascript和html在网页上显示一个家庭图,在显示之前不知道任何人的关系?的主要内容,如果未能解决你的问题,请参考以下文章

多叉树结合JavaScript树形组件实现无限级树形结构(一种构建多级有序树形结构JSON(或XML)数据源的方法)

js 生成树形结构数据

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

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

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

JavaScript递归方法 生成 json tree 树形结构数据