Javascript TreeView 以编程方式

Question

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

到目前为止，我已经实现了一个简单的 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。检查树，您会看到:

甚至不要乱用 ID。相反，只需在创建元素时保留对该元素的引用即可。

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