[英]Tree structure in Javascript
我需要从Javascript对象数组创建树结构。
我有这样的事情(未定义子级别):
var obj_1 = {id:1, title:"Title 1", parent:0};
var obj_2 = {id:2, title:"Title 1.1", parent:1};
var obj_3 = {id:3, title:"Title 1.2", parent:1};
var obj_4 = {id:4, title:"Title 1.1.1", parent:2};
var obj_5 = {id:5, title:"Title 2", parent:0};
var obj_list = [obj_1,obj_2,obj_3,obj_4,obj_5];
我需要:
var result = [{
id:1,
title:"Title 1",
children:[
{id:2, title:"Title 1.1", children:[....]}
{id:3, title:"Title 1.2"}
]
},
{
...
}
];
通过这种结构,我想创建HTML列表:
<ul>
<li><a>Title 1</a>
<ul>
<li><a>Title 1.1</a>
<ul>
<li>Title 1.1.1</li>
</ul>
</li>
<li><a>Title 1.2</a></li>
</ul>
</li>
<li><li><a>Title 2</a></li>
</ul>
有什么解决的建议吗?
中间结构不是很重要,但是我需要的是HTML列表。
将您的对象列表转换为嵌套对象:
var obj_nested_list = [],
obj;
function fill_with_children(children_arr, parent_id) {
// find all objs with parent "parent"
for (var i = 0; i < obj_list.length; i++) {
obj = obj_list[i];
if (obj.parent == parent_id) {
children_arr.push(obj);
obj.children = [];
fill_with_children(obj.children, obj.id);
}
}
children_arr.sort(function(a,b){
return a.title.downcase == b.title.downcase;
});
}
fill_with_children(obj_nested_list, 0);
使用嵌套对象打印嵌套列表:
function print_list(list, container) {
for (var i = 0; i < list.length; i++) {
var li = document.createElement('li');
li.innerHTML = list[i].title;
if (list[i].children.length > 0) {
var ul = document.createElement('ul');
li.appendChild(ul);
print_list(list[i].children, ul);
}
container.appendChild(li);
}
}
print_list(obj_nested_list, document.getElementById('list'));
这是一个工作示例: http : //jsfiddle.net/rotev/svFTa/1/
以下应做您所需要的。 我建议学习递归,makeUL函数将是一个好的开始。
var obj_1 = {id:1, title:"Title 1", parent:0};
var obj_2 = {id:2, title:"Title 1.1", parent:1};
var obj_3 = {id:3, title:"Title 1.2", parent:1};
var obj_4 = {id:4, title:"Title 1.1.1", parent:2};
var obj_5 = {id:5, title:"Title 2", parent:0};
// make an object keyed by the ID
var root = {};
var cnt = 1;
try { obj = eval("obj_" + cnt); } catch(err) { obj = null; }
while(obj) {
obj.children = [];
root[obj.id] = obj;
try { obj = eval("obj_" + (++cnt)); } catch(err) { break; }
}
// make the object treeified list
var list = []
for(var k in root) {
var node = root[k];
if(node.parent != 0) {
root[node.parent].children.push(node);
} else {
list.push(node);
}
}
// make HTML UL
function makeUL(list, result) {
for(var i=0; i<list.length; i++) {
var node = list[i];
var li = result.appendChild(document.createElement("li"));
var a = li.appendChild(document.createElement("a"));
a.innerHTML = node.title;
if(node.children.length > 0) {
makeUL(node.children, li.appendChild(document.createElement("ul")));
}
}
return result;
}
var result = makeUL(list, document.createElement("ul"));
console.log(result);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.