Question

我试图在浏览器中显示一个n-ary树结构。

以下是从中提取数据结构的示例：

var jsonObj = [{
    id: "window1", 
    name: "Corporate",
    children: [
        { id: "window12", name:"IT", children: [
            { id: "window121", name:"Dev", children: [] },
            { id: "window122", name:"Web", children: [] }
        ] }, 
        { id: "window13", name:"HR", children: [] }, 
        { id: "window14", name:"Finance", children: [] }
    ]
}];

我打算将它（结构，即）看起来像这棵树（只是侧面）：

http://gravite.labri.fr/images/tidyTree.jpg

目前它看起来很近http://imm.io/Dz3V，但并不完全存在。

这是我写的产生输出的算法：

var create_graph_components = function (json, level, offset) {
    for (var i = 0; i < json.children.length; i++) {
        offset += create_graph_components(json.children[i], level + 1, offset);
    }
    if (json.children.length == 0) {
        $('#wrapper').append("<div class=\"component window\" style=\"top:"+offset+"px;left: "+level*150+"px\" id=\""+json.id+"\"><strong>"+json.name+"</strong></div>");
        offset = 50;
    } else {
        $('#wrapper').append("<div class=\"component window\" style=\"top:"+offset/2+"px;left: "+level*150+"px\" id=\""+json.id+"\"><strong>"+json.name+"</strong></div>");
    }
    return offset;
};

所有这一切都是将div添加到正确位置的页面，这就是我遇到问题。

有没有人知道如何改进我的算法以使树更接近我想要的方式打印 - 我想我已经接近了，但却因为想法而迷失了！

Answer 1

以下内容......

function create_graph_components(json, level, offsetStart) {

    var offsetEnd = offsetStart;

    for (var i = 0; i < json.children.length; i++) {
        offsetEnd = create_graph_components(json.children[i], level + 1, offsetEnd);
    }

    var offset;            
    if (json.children.length == 0) {
        offset = offsetEnd;            
        // Node is a leaf therefore extend offsetEnd
        offsetEnd += 50;
    } else {
        // Calculates position halfway between child nodes
        offset = offsetStart + (offsetEnd - offsetStart - 50) / 2;
        // Node is a branch therefore we do not extend the offsetEnd
    }

    // Create the element
    var child = $('<div id="' + json.id + '" class="component window">' +
                      '<strong>' + json.name + '</strong>' +
                  '</div>');

    // Position the element
    child.css({
        top: offset + "px",
        left: level * 150 + "px"
    });

    // Add it to the wrapper
    $("#wrapper").append(child);     

    return offsetEnd;

}

我也创造了一个小提琴http://jsfiddle.net/j7Pms/

Answer 2

我看到您的问题来自7岁，但是如果您需要重构代码this is how to did it using an angular recursive template。如果您觉得有用，我会保留一小段模板。

<table>
     <ng-template #recursiveList let-tree>
         <div cdkDropList (cdkDropListDropped)="drop($event)">
             <div *ngFor="let node of tree; let i=index " cdkDrag>
                 <tr>
                    <app-default-node [node]="node"></app-default-node>
                    <td *ngIf="node.children!==null && node.children.length > 0" cdkDrag>
                        <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: node.children }"></ng-container>
                    </td>
                 </tr>
             </div>
         </div>
     </ng-template>
</table>
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: tree }"></ng-container>

递归显示n-ary树

2 个答案: