//树数据
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");
}
});
}
jquery+js+javascript 完成多层树结构可配置形
猜你喜欢
转载自blog.csdn.net/weixin_42749765/article/details/81704379
今日推荐
周排行