<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#aside .aside-content>ul ul{
display: none;
}
</style>
</head>
<body>
<div id="aside" style="padding: 20px;border: 1px solid;">
<div class="aside-scroll" style="padding: 20px;border: 1px solid;">
<div class="aside-content" style="padding: 20px;border: 1px solid;">
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script>
<script>
//也可以单独提取到json文件中，通过get方式ajax读取
var nodes =[
{ id:1, pId:0, name:"随意勾选 1"},
{ id:11, pId:1, name:"随意勾选 1-1"},
{ id:111, pId:11, name:"随意勾选 1-1-1"},
{ id:112, pId:11, name:"随意勾选 1-1-2", checked:true},
{ id:12, pId:1, name:"随意勾选 1-2"},
{ id:121, pId:12, name:"随意勾选 1-2-1"},
{ id:122, pId:12, name:"随意勾选 1-2-2"},
{ id:2, pId:0, name:"随意勾选 2"},
{ id:21, pId:2, name:"随意勾选 2-1"},
{ id:22, pId:2, name:"随意勾选 2-2"},
{ id:221, pId:22, name:"随意勾选 2-2-1", checked:true},
{ id:222, pId:22, name:"随意勾选 2-2-2"},
{ id:23, pId:2, name:"随意勾选 2-3"}
];
//简单节点树，转为父子children节点树
simpleRevComplexData = function(nodes){
var nodePoint = {};
for(var i in nodes){
nodePoint[nodes[i].id] = nodes[i];
}
console.log(nodePoint)
var node = [];
for(var i in nodes){
if(nodes[i].pId in nodePoint){//if(nodePoint[nodes[i].pId])
(nodePoint[nodes[i].pId].children || (nodePoint[nodes[i].pId].children = [])).push(nodes[i]);
}else{//不在则是顶级节点
node.push(nodes[i]);
}
}
return node;
};
console.log(simpleRevComplexData)
//递归渲染
function renderList(data,showArea){
if(data.length){
var $ul = $('<ul></ul>');
for(var i in data){
var $li = $('<li><span node-id="'+data[i].id+'">'+data[i].name+'</span></li>');
$ul.append($li);
if(data[i].children && data[i].children.length>0){
renderList(data[i].children,$li);
}
}
showArea.append($ul);
}
};
//改用on监听动态添加的节点
$('#aside .aside-content').on('click','span',function(){
var $this = $(this);
//ul是否可见
if($this.next().is(":visible")){
$this.next().hide();
}else{
//判读ul是否存在
var $ul = $this.next().size()? $this.next().show():$this;
//隐藏其它兄弟元素
$ul.closest('li').siblings().find('ul').hide();
}
});
//方法调用
var nodes = simpleRevComplexData(nodes);
renderList(nodes,$("#aside").find('.aside-content'));
</script>
</body>
</html>
