javascript - Javascript 中的树结构

标签 javascript html tree

我需要从 Javascript 对象数组创建一个树结构。
我有这样的东西(未定义 child 级别):

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/

关于javascript - Javascript 中的树结构,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17677443/

相关文章:

Ruby:以树形表示形式转换平面数组

python - 使用递归的二叉树中的最低公共(public)祖先

javascript - AngularJS:无法将 $scope 对象推送到结束 b/c 数据不断更新

javascript - 可编辑组合框 Javascript 和 HTML

html - div 元素未填充到其容器 div 的高度

html - 两列 HTML 文档站点地图

javascript - 检查对象是否已定义,最佳实践。

javascript - 获取表中元素的offsetTop

javascript - HTML 自动刷新页面但先检查连接

java - 有向无环图中的路径和