jquery+js+javascript 完成多层树结构可配置形

 //树数据
		var zoreLeftTreeData= [
		 		{
		 			"key":"流域",//一层树
                    "treeLevel":1,//树级别
		 			"value":[
		 				{
				 			"key":"流域11",//二层树
                            "treeLevel":2,
				 			"value":[
				 				 {
						 			"key":"流域111",//三层树
									"treeLevel":3,
						 			"value":[//如果value中是空的null就是最后一级
						 				 
						 			]
						 		},
								
				 			]
				 		},
						{
				 			"key":"流域12",//二层树
                            "treeLevel":2,
				 			"value":[
				 				 {
						 			"key":"流域121",//三层树
									"treeLevel":3,
						 			"value":[//如果value中是空的null就是最后一级
						 				 
						 			]
						 		},
								
				 			]
				 		},
						
		 			]
		 		},
		 		{
		 			"key":"流域",
					"treeLevel":1,
		 			"value":[
		 				{
				 			"key":"流域12",//二层树
                            "treeLevel":2,
				 			"value":[
				 				 {
						 			"key":"流域121",//三层树
									"treeLevel":3,
						 			"value":[//如果value中是空的null就是最后一级
						 				 
						 			]
						 		},
								
				 			]
				 		},
		 			]
		 		}
		 	];
 //设置唯一id
 var HighLevelInt = 0;
	function ergodicTreeData(data){
		var htmlStr = "";
		for(var i = 0; i < data.length; i++){
			++HighLevelInt;
			htmlStr += '<div class="treeFatherK" idk="c'+data[i].treeLevel+'" ids="000'+HighLevelInt+'">'+data[i].key+'</div>'; //一级树key
			if(data[i].value.length > 0){//如果树下边有数据就展示出来
				htmlStr += '<div class="treeFatherV '+('c000'+HighLevelInt)+'" id="c'+data[i].treeLevel+'">';//外层div value
				htmlStr += ergodicTreeData(data[i].value);
				htmlStr += '</div>';
			}
		}
		return htmlStr;
	}
	
	//添加目录树 
	function addhtmlTree(){
		 var htmlStrV = ergodicTreeData(zoreLeftTreeData);
        
		var htmlStr = "";
			htmlStr += '<div id="treeIdR" style="margin-top: 10px;width:80%;line-height:30px;position:absolute;cursor:pointer;">'
					htmlStr += htmlStrV;
			htmlStr += '</div>';
			//将树添加到页面的div中
			$(".top_Left_Text_bt_zk").empty().append(htmlStr);
			//设置树样式
			$(".treeFatherK").css({"margin-left":"30px","border-bottom":"0px solid #D0D0D0"});
			$(".treeFatherV").css({"margin-left":"30px","display":"none"});
			$("#topicpanel div").css({"background-color":"#F2F2F2"});
			//滚动条
			$("#treeIdR").css({"height":$("body").height()-420+"px","overflow":"auto"});
			//树点击展开关闭事件
			$(".treeFatherK").click(function(){
				var idVal = $(this).attr("idk");
				var textVal = $(this).attr("ids");
				if($(".c"+textVal).css("display") == "none"){
					$("#treeIdR #"+idVal).each(function(k,y){
						
						$(this).css("display","none");
					});
					$(".c"+textVal).css("display","block");
				}else{
					
					$(".c"+textVal).css("display","none");
				}
				
			});
	}

  

猜你喜欢

转载自blog.csdn.net/weixin_42749765/article/details/81704379