天天看点
返回

深度优先 递归 生成纵向树形结构树或菜单

深度优先 递归 生成纵向树形结构树或菜单

标题

<!DOCTYPE html>
<html> 
<script type="text/javascript" src="/jquery.min.js"></script>
<head>
    <title>无标题页</title>
   <style type="text/css">
body {
	font: 12px/1.8 "宋体";
	position: relative;
}

html, body {
	height: 100%;
	overflow-y: hidden;
	margin: 0;
	padding: 0;
	overflow: auto;
}

.strt-wrap {
	width: 20000px;
	margin: 2px auto;
	float: left;
    margin-bottom: 200px;
}

.strt-part {
	text-align: center;
	float: left;
	position: relative;
}

.strt-part .line-v {
	position: relative;
	height: 40px;
	width: 100%;
}

.strt-part .line-v span {
	display: block;
	background: #ccc;
	position: absolute;
	top: 0;
	font-size: 0;
	line-height: 1px;
	width: 1px;
	height: 40px;
	left: 50%;
}

.strt-name {
	display: inline-block;
	padding: 0 5px;
	height: 24px;
	line-height: 24px;
	border: 1px solid #ccc;
	margin: 0 10px;
	border-radius: 3px;
	background: #f8f8f8;
}

.strt-part .line-h {
	height: 1px;
	display: block;
	background: #ccc;
	position: absolute;
	top: 0;
	font-size: 0;
}

.strt-part .line-h-l {
	width: 50%;
	left: 0;
}

.strt-part .line-h-c {
	width: 100%;
	left: 0;
}

.strt-part .line-h-r {
	width: 50%;
	right: 0;
}

.strt-block {
	float: inherit;
}
</style>
</head>
<body style="/* overflow: hidden; */">
	<!-- <div class="strt-wrap" id="strtWrap">
		<div class="strt-block">
			<div class="strt-part">
				<span class="strt-name" style="background: #DBA659; color: white;">档案类</span>
				<div class="line-v">
					<span></span>
				</div>
				<div class="strt-part">
					<span class="line-h line-h-r"></span>
					<div class="line-v">
						<span></span>
					</div>
					<span class="strt-name" style="background: #DBA659; color: white;">档案</span>
				</div>
				<div class="strt-part">
					<span class="line-h line-h-c"></span>
					<div class="line-v">
						<span></span>
					</div>
					<span class="strt-name" style="background: #DBA659; color: white;">档案</span>
				</div>
				<div class="strt-part">
					<span class="line-h line-h-c"></span>
					<div class="line-v">
						<span></span>
					</div>
					<div class="strt-block">
					<div class="strt-part">
						<span class="strt-name" style="background: #DBA659; color: white;">档案类</span>
						<div class="line-v">
							<span></span>
						</div>
						<div class="strt-part">
							<span class="line-h line-h-r"></span>
							<div class="line-v">
								<span></span>
							</div>
							<span class="strt-name" style="background: #DBA659; color: white;">档案</span>
						</div>
						<div class="strt-part">
							<span class="line-h line-h-l"></span>
							<div class="line-v">
								<span></span>
							</div>
							<span class="strt-name" style="background: #DBA659; color: white;">档案</span>
						</div>
					</div>
					</div>
				</div>

				<div class="strt-part">
					<span class="line-h line-h-c"></span>
					<div class="line-v">
						<span></span>
					</div>
					<span class="strt-name" style="background: #DBA659; color: white;">档案</span>
				</div>
				<div class="strt-part">
					<span class="line-h line-h-c"></span>
					<div class="line-v">
						<span></span>
					</div>
					<span class="strt-name" style="background: #DBA659; color: white;">档案</span>
				</div>
				<div class="strt-part">
					<span class="line-h line-h-c"></span>
					<div class="line-v">
						<span></span>
					</div>
					<span class="strt-name" style="background: #DBA659; color: white;">档案</span>
				</div>
				<div class="strt-part">
					<span class="line-h line-h-c"></span>
					<div class="line-v">
						<span></span>
					</div>
					<span class="strt-name" style="background: #DBA659; color: white;">档案</span>
				</div>
				<div class="strt-part">
					<span class="line-h line-h-l"></span>
					<div class="line-v">
						<span></span>
					</div>
					<span class="strt-name" style="background: #DBA659; color: white;">档案</span>
				</div>
			</div>
		</div>
	</div> -->

	<script type="text/javascript">
$(function(){
	init(testData)
})

function init(data){
	var result = data[0];
	DFS(result,'c',false,0);
	$("body").append(html);
	html="";
	DFS(data[1],'c',false,0);
	$("body").append(html);
}

function DFS(childArry,rgl,flag,num){
        if(childArry.children){
	        	if(childArry.children.length>0){
	        		if(num==0){
	        			html+='<div class="strt-wrap" id="strtWrap">';
	        			html+='<div class="strt-block">';
	        		}
	                html+='<div class="strt-part">';
	                if(flag==false && num!=0){
	                	 html+='<span class="line-h line-h-'+rgl+'"></span>';
	 	                html+='<div class="line-v">';
	 	                html+='<span></span>';
	 	                html+='</div>';
	                }
	                html+='<div class="strt-block">';
	                html+='<div class="strt-part">';
	                html+='<span class="strt-name" style="background: #DBA659; color: white;">'+childArry.text+'</span>';
	                html+='<div class="line-v">';
	                html+='<span></span>';
	                html+='</div>';
	        }
	        	for (var i = 0; i < childArry.children.length; i++) {
	        		if(childArry.children[i].children.length>=1){
	        			if(i==0){
	        				if(childArry.children.length==1){
	        					DFS(childArry.children[i],"r",true,1);
	        				}else{
	        					DFS(childArry.children[i],"r",false,1);
	        				}
	        			}else if(i==childArry.children.length-1){
	        				DFS(childArry.children[i],"l",false,1);
	        			}else{
	        				DFS(childArry.children[i],"c",false,1);
	        			}
		         }else{
		        	 	var obj = childArry.children[i];
		        	 	html+='<div class="strt-part">';
			        	var t="c";
			        	if(i==0){
			        		t="r";
			        	}else if(i==childArry.children.length-1){
			        		t="l";
			        	}
			        	if(childArry.children.length>1){
			        		html+='<span class="line-h line-h-'+t+'"></span>';
				        	html+='<div class="line-v">';
				        	html+='<span></span>';
				        	html+='</div>';
			        	}
			        	html+='<span class="strt-name"style="background: #DBA659; color: white;">'+obj.text+'</span>';
			        	html+='</div>';
		         }
			}
	        	html+='</div>';
	        	html+='</div>';
        		html+='</div>';
        		if(num==0){
	        		html+='</div>';
	        		html+='</div>';
        		}
        }
}

var html ='';

var testData=[{"children":[{"children":[],"checked":true,"pid":"1","ID":"101","text":"首页"},{"children":[{"children":[{"children":[],"checked":true,"pid":"10301","ID":"1030101","text":"创建会议室"},{"children":[],"checked":true,"pid":"10301","ID":"1030102","text":"视频记录"},{"children":[],"checked":true,"pid":"10301","ID":"1030103","text":"视频记录2"}],"pid":"103","ID":"10301","text":"菜单","state":"closed"}],"pid":"1","ID":"103","text":"视频会商","state":"closed"},{"children":[],"pid":"1","ID":"104","text":"邮箱"},{"children":[],"checked":true,"pid":"1","ID":"105","text":"文档库"},{"children":[],"checked":true,"pid":"1","ID":"106","text":"巡查管理"},{"children":[{"children":[{"children":[],"checked":true,"pid":"10701","ID":"1070101","text":"模版管理"},{"children":[],"checked":true,"pid":"10701","ID":"1070102","text":"订阅中心"}],"pid":"107","ID":"10701","text":"菜单","state":"closed"}],"pid":"1","ID":"107","text":"订阅管理","state":"closed"},{"children":[{"children":[{"children":[],"checked":true,"pid":"10801","ID":"1080101","text":"listTag"},{"children":[],"checked":true,"pid":"10801","ID":"1080102","text":"系统设置"},{"children":[],"checked":true,"pid":"10801","ID":"1080103","text":"divTableTag"},{"children":[],"checked":true,"pid":"10801","ID":"1080104","text":"textTag"},{"children":[],"checked":true,"pid":"10801","ID":"1080105","text":"textAreaTag"},{"children":[],"checked":true,"pid":"10801","ID":"1080106","text":"selectTag"},{"children":[],"checked":true,"pid":"10801","ID":"1080107","text":"checkbox"},{"children":[],"checked":true,"pid":"10801","ID":"1080108","text":"textCalTag"},{"children":[],"checked":true,"pid":"10801","ID":"1080109","text":"swfUploadTag"},{"children":[],"checked":true,"pid":"10801","ID":"1080110","text":"echartsTag"},{"children":[],"checked":true,"pid":"10801","ID":"1080113","text":"divTreeDataTag"},{"children":[],"checked":true,"pid":"10801","ID":"1080114","text":"开关标签"},{"children":[],"checked":true,"pid":"10801","ID":"1080115","text":"tableReq"},{"children":[],"checked":true,"pid":"10801","ID":"1080116","text":"chartInfo"},{"children":[],"checked":true,"pid":"10801","ID":"1080117","text":"tableStat"},{"children":[],"checked":true,"pid":"10801","ID":"1080118","text":"标准角色管理"},{"children":[],"checked":true,"pid":"10801","ID":"1080121","text":"地图(待建）"}],"pid":"108","ID":"10801","text":"菜单","state":"closed"}],"pid":"1","ID":"108","text":"例子","state":"closed"},{"children":[{"children":[{"children":[],"checked":true,"pid":"10901","ID":"1090101","text":"组织机构"},{"children":[],"pid":"10901","ID":"1090102","text":"组织管理"},{"children":[],"checked":true,"pid":"10901","ID":"1090103","text":"角色管理"},{"children":[],"checked":true,"pid":"10901","ID":"1090104","text":"用户统计"},{"children":[],"checked":true,"pid":"10901","ID":"1090105","text":"通知公告"},{"children":[],"checked":true,"pid":"10901","ID":"1090106","text":"角色分配"},{"children":[],"checked":true,"pid":"10901","ID":"1090107","text":"菜单管理"},{"children":[],"checked":true,"pid":"10901","ID":"1090108","text":"app版本管理"},{"children":[],"checked":true,"pid":"10901","ID":"1090193","text":"标准角色管理"}],"pid":"109","ID":"10901","text":"组织菜单","state":"closed"},{"children":[{"children":[],"checked":true,"pid":"10902","ID":"1090201","text":"站点管理"},{"children":[],"checked":true,"pid":"10902","ID":"1090202","text":"河道管理"},{"children":[],"checked":true,"pid":"10902","ID":"1090203","text":"行政分区管理"},{"children":[],"checked":true,"pid":"10902","ID":"1090204","text":"取水用户管理"},{"children":[],"checked":true,"pid":"10902","ID":"1090206","text":"水源地管理"},{"children":[],"checked":true,"pid":"10902","ID":"1090207","text":"水功能区信息"},{"children":[],"checked":true,"pid":"10902","ID":"1090208","text":"水资源区信息"},{"children":[],"checked":true,"pid":"10902","ID":"1090211","text":"临时站点管理"},{"children":[],"checked":true,"pid":"10902","ID":"1090212","text":"站点数据序列管理"}],"pid":"109","ID":"10902","text":"业务配置","state":"closed"},{"children":[{"children":[],"checked":true,"pid":"10903","ID":"1090301","text":"获得水情最新数据"},{"children":[],"checked":true,"pid":"10903","ID":"1090302","text":"获得水质最新数据"},{"children":[],"checked":true,"pid":"10903","ID":"1090303","text":"最新数据1"},{"children":[],"checked":true,"pid":"10903","ID":"1090304","text":"获得风情最新数据"},{"children":[],"checked":true,"pid":"10903","ID":"1090305","text":"最新数据2"},{"children":[],"checked":true,"pid":"10903","ID":"1090306","text":"最新数据3"},{"children":[],"checked":true,"pid":"10903","ID":"1090307","text":"最新数据4"},{"children":[],"checked":true,"pid":"10903","ID":"1090308","text":"最新数据5"},{"children":[],"checked":true,"pid":"10903","ID":"1090309","text":"最新数据6"}],"pid":"109","ID":"10903","text":"信息查询","state":"closed"}],"pid":"1","ID":"109","text":"系统管理","state":"closed"}],"pid":"0","ID":"1","text":"预警移动系统","state":"closed"},{"children":[{"children":[{"children":[],"checked":true,"pid":"901","ID":"90101","text":"通知公告"},{"children":[],"checked":true,"pid":"901","ID":"90102","text":"工作动态"},{"children":[],"checked":true,"pid":"901","ID":"90103","text":"视频会商"},{"children":[],"checked":true,"pid":"901","ID":"90104","text":"身边雷达"},{"children":[{"children":[],"checked":true,"pid":"90109","ID":"9010901","text":"公文审批"},{"children":[],"checked":true,"pid":"90109","ID":"9010902","text":"预警信息"},{"children":[],"checked":true,"pid":"90109","ID":"9010903","text":"水位监测"},{"children":[],"checked":true,"pid":"90109","ID":"9010904","text":"太湖流域雨量"},{"children":[],"checked":true,"pid":"90109","ID":"9010905","text":"取水用户水量"},{"children":[],"checked":true,"pid":"90109","ID":"9010906","text":"水功能区水质达标"},{"children":[],"checked":true,"pid":"90109","ID":"9010907","text":"外业巡查"},{"children":[],"checked":true,"pid":"90109","ID":"9010908","text":"气象预报"},{"children":[],"checked":true,"pid":"90109","ID":"9010909","text":"东南诸河雨量"},{"children":[],"checked":true,"pid":"90109","ID":"9010910","text":"太湖流域工情"},{"children":[],"checked":true,"pid":"90109","ID":"9010911","text":"太湖流域风情"},{"children":[],"checked":true,"pid":"90109","ID":"9010912","text":"环保排污口"},{"children":[],"checked":true,"pid":"90109","ID":"9010913","text":"环保重点污染企业"},{"children":[],"checked":true,"pid":"90109","ID":"9010914","text":"环保环评"},{"children":[],"checked":true,"pid":"90109","ID":"9010915","text":"渔业生态"},{"children":[],"checked":true,"pid":"90109","ID":"9010916","text":"渔业养殖"},{"children":[],"checked":true,"pid":"90109","ID":"9010917","text":"省界断面水质"},{"children":[],"checked":true,"pid":"90109","ID":"9010918","text":"省界断面水质达标"},{"children":[],"checked":true,"pid":"90109","ID":"9010919","text":"水源水质"},{"children":[],"checked":true,"pid":"90109","ID":"9010920","text":"水厂水质"},{"children":[],"checked":true,"pid":"90109","ID":"9010921","text":"水源地湖泊富营养"},{"children":[],"checked":true,"pid":"90109","ID":"9010922","text":"水源地供水指标"},{"children":[],"checked":true,"pid":"90109","ID":"9010923","text":"水源地饮水指标"},{"children":[],"checked":true,"pid":"90109","ID":"9010924","text":"太湖蓝藻"},{"children":[],"checked":true,"pid":"90109","ID":"9010925","text":"太湖蓝藻饮用水"},{"children":[],"checked":true,"pid":"90109","ID":"9010926","text":"环太湖断面水质"},{"children":[],"checked":true,"pid":"90109","ID":"9010927","text":"环太湖出入流量"},{"children":[],"checked":true,"pid":"90109","ID":"9010930","text":"引江济太水质"},{"children":[],"checked":true,"pid":"90109","ID":"9010931","text":"引江济太水量"},{"children":[],"checked":true,"pid":"90109","ID":"9010932","text":"沿江水量"},{"children":[],"checked":true,"pid":"90109","ID":"9010933","text":"重点河湖取水总量"},{"children":[],"checked":true,"pid":"90109","ID":"9010934","text":"社会经济"},{"children":[],"checked":true,"pid":"90109","ID":"9010935","text":"渔业渔民"},{"children":[],"checked":true,"pid":"90109","ID":"9010936","text":"资料管理"},{"children":[],"checked":true,"pid":"90109","ID":"9010937","text":"值班管理"},{"children":[],"checked":true,"pid":"90109","ID":"9010938","text":"防汛专题"}],"pid":"901","ID":"90109","text":"我的应用","state":"closed"}],"pid":"9","ID":"901","text":"首页","state":"closed"},{"children":[{"children":[],"checked":true,"pid":"902","ID":"90201","text":"电子邮件"},{"children":[],"checked":true,"pid":"902","ID":"90202","text":"公文审批"},{"children":[],"checked":true,"pid":"902","ID":"90203","text":"日程安排"},{"children":[],"checked":true,"pid":"902","ID":"90204","text":"值班管理"},{"children":[],"checked":true,"pid":"902","ID":"90205","text":"巡查任务"}],"pid":"9","ID":"902","text":"个人事务","state":"closed"},{"children":[],"checked":true,"pid":"9","ID":"903","text":"订阅"},{"children":[{"children":[],"checked":true,"pid":"904","ID":"90401","text":"通讯录"},{"children":[],"checked":true,"pid":"904","ID":"90402","text":"修改密码"},{"children":[],"checked":true,"pid":"904","ID":"90403","text":"技术支持"},{"children":[],"checked":true,"pid":"904","ID":"90404","text":"版本更新"},{"children":[],"checked":true,"pid":"904","ID":"90405","text":"清除缓存"}],"pid":"9","ID":"904","text":"我的","state":"closed"},{"children":[{"children":[],"pid":"905","ID":"90501","text":"资料库"},{"children":[],"pid":"905","ID":"90502","text":"新闻"}],"pid":"9","ID":"905","text":"文档库","state":"closed"},{"children":[{"children":[],"pid":"906","ID":"90601","text":"行政办公"},{"children":[],"pid":"906","ID":"90602","text":"防汛事务"}],"pid":"9","ID":"906","text":"事务管理","state":"closed"},{"children":[{"children":[],"pid":"907","ID":"90701","text":"实时水情"},{"children":[],"pid":"907","ID":"90702","text":"实时雨情"},{"children":[],"pid":"907","ID":"90703","text":"实时水量"},{"children":[],"pid":"907","ID":"90704","text":"实时水质"},{"children":[],"pid":"907","ID":"90705","text":"实时共情"},{"children":[],"pid":"907","ID":"90706","text":"实时风情"},{"children":[],"pid":"907","ID":"90707","text":"实时工况"},{"children":[],"pid":"907","ID":"90708","text":"卫星云图"},{"children":[],"pid":"907","ID":"90709","text":"实时台风"}],"pid":"9","ID":"907","text":"信息查询","state":"closed"},{"children":[{"children":[],"pid":"908","ID":"90801","text":"取用水监测"},{"children":[],"pid":"908","ID":"90802","text":"水功能区监测"},{"children":[],"pid":"908","ID":"90803","text":"省界断面监测"},{"children":[],"pid":"908","ID":"90804","text":"水源地监测"},{"children":[],"pid":"908","ID":"90805","text":"太湖蓝藻监测"},{"children":[],"pid":"908","ID":"90806","text":"环太湖监测"},{"children":[],"pid":"908","ID":"90807","text":"入河排污口监测"},{"children":[],"pid":"908","ID":"90808","text":"沿江水量监测"},{"children":[],"pid":"908","ID":"90809","text":"引江济监测"},{"children":[],"pid":"908","ID":"90810","text":"重点河湖取水总量控制"},{"children":[],"pid":"908","ID":"90811","text":"水量分配方案管理"},{"children":[],"pid":"908","ID":"90812","text":"用水定额管理"},{"children":[],"pid":"908","ID":"90813","text":"节水型社会建设管理"},{"children":[],"pid":"908","ID":"90814","text":"水资源管理监督考核"},{"children":[],"pid":"908","ID":"90815","text":"社会经济"},{"children":[],"pid":"908","ID":"90816","text":"环保渔业"}],"pid":"9","ID":"908","text":"专题查询","state":"closed"},{"children":[{"children":[],"pid":"909","ID":"90901","text":"水功能区监督管理"},{"children":[],"pid":"909","ID":"90902","text":"省界水体监督管理"},{"children":[],"pid":"909","ID":"90903","text":"太湖蓝藻及水源地管理"},{"children":[],"pid":"909","ID":"90904","text":"环太湖监督管理"},{"children":[],"pid":"909","ID":"90905","text":"入河排污口管理"}],"pid":"9","ID":"909","text":"监督管理","state":"closed"},{"children":[{"children":[],"pid":"910","ID":"91001","text":"工程资料"},{"children":[],"pid":"910","ID":"91002","text":"工程安全信息"},{"children":[],"pid":"910","ID":"91003","text":"工程养护维护管理"},{"children":[],"pid":"910","ID":"91004","text":"工程巡检管理"},{"children":[],"pid":"910","ID":"91005","text":"排污口的台账"},{"children":[],"pid":"910","ID":"91006","text":"取水许可证"},{"children":[],"pid":"910","ID":"91007","text":"站点信息"},{"children":[],"pid":"910","ID":"91008","text":"流域公报"}],"pid":"9","ID":"910","text":"资料管理","state":"closed"},{"children":[{"children":[],"pid":"911","ID":"91101","text":"水保值班"},{"children":[],"pid":"911","ID":"91102","text":"重大污染事故应急值班"},{"children":[],"pid":"911","ID":"91103","text":"会商"}],"pid":"9","ID":"911","text":"值班管理","state":"closed"},{"children":[{"children":[],"pid":"912","ID":"91201","text":"水保常规巡查"},{"children":[],"pid":"912","ID":"91202","text":"水保专题巡查"},{"children":[],"pid":"912","ID":"91203","text":"水保其他巡查"},{"children":[],"pid":"912","ID":"91204","text":"水政取水户巡查"},{"children":[],"pid":"912","ID":"91205","text":"防办巡查"}],"pid":"9","ID":"912","text":"外业管理","state":"closed"}],"pid":"0","ID":"9","text":"移动端","state":"closed"}];

</script>


</body>

</html>
前端 java cas 算法 树 递归
上一篇: java递归生成树形菜单结构
下一篇: mysql多表树形结构递归实现_MySQL实现递归查找树形结构

继续阅读