拓扑图及树图数据实现递归转换

最新推荐文章于 2024-05-01 05:10:12 发布

JOJO丶

最新推荐文章于 2024-05-01 05:10:12 发布

阅读量553

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Jesion_T/article/details/105048732

版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<div id="test"></div>
	<script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
	<script>
		/*
			拓扑图及树图数据实现递归转换
			数据类型：
      var data = [
				{ id: 1, name: "办公管理", uid: 0 },
				{ id: 2, name: "请假申请", uid: 1 },
				{ id: 3, name: "出差申请", uid: 1 },
				{ id: 4, name: "请假记录", uid: 2 },
				{ id: 5, name: "系统设置", uid: 0 },
				{ id: 6, name: "权限管理", uid: 5 },
				{ id: 7, name: "用户角色", uid: 6 },
				{ id: 8, name: "菜单设置", uid: 6 },
            ];
			var menu = _.init_topology({
				ele: '#test', //形成元素
				data: data, //拓扑数据
				label: 'name', //节点文本
				mate: ['id', 'pid'], //匹配条件
			})
		*/
		function init_topology (options) {
			var def = {
				ele: '', //形成元素
				data: '', //拓扑数据
				label: '', //节点文本
				mate: '', //匹配条件
			},
				options = Object.assign(def, options);
			var menus = '',
				get_data = function (id, arry) {
					var childArry = get_parent_arry(id, arry);
					if (childArry.length > 0) {
						menus += '<ul>';
						for (var i in childArry) {
							menus += '<li><p>' + childArry[i][options.label] + '</p>';
							get_data(childArry[i][options.mate[0]], arry);
							menus += '</li>';
						}
						menus += '</ul>';
					}
				},
				get_parent_arry = function (id, arry) {
					var newArry = new Array();
					for (var i in arry) {
						if (arry[i][options.mate[1]] == id)
							newArry.push(arry[i]);
					}
					return newArry;
				};
			if (options.data) {
				get_data(0, options.data);
				$(options.ele).empty().append(menus);
			} else {
				console.error('没有检测到数据')
			}
		}
	</script>
</body>

</html>