以编程方式查看Javascript树视图

Question

我想使用this解决方案和服务器提供的数据实现树视图。

到目前为止，我已经实现了一个简单的JavaScript解决方案（plunker here）。问题是，我真的不知道为什么在'1'节点下添加'2.1'子元素 - 即使console.logs显示正确的跟踪信息。

我有一个递归函数来渲染所有节点：

var putManyInGraph = function(where, list, level) {
    where.append(levelTemplate.render(level));
    list.forEach(function(item){
        var lvl = $("#level-"+level);
        lvl.append(childTemplate.render(item.label));
        if(item.children && item.children.length > 0) {
            putManyInGraph($("#level-"+level + " li:last"), item.children, level + 1);
        }
    });

Answer 1

由于您正在创建重复的ID，因此无法正常工作。检查树，你看到了：

不要捣乱ids。相反，只需在创建元素时保留对元素的引用。

var putManyInGraph = function (where, list, level) {
    var lvl = $(levelTemplate.render(level)).appendTo(where);
    list.forEach(function (item) {
        var li = $(childTemplate.render(item.label)).appendTo(lvl);
        if (item.children && item.children.length > 0) {
            putManyInGraph(li, item.children, level + 1);
        }
    });
};

Updated plunker