1

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

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

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 添加到页面的正确位置，这就是我遇到的问题。

有没有人知道我可以如何改进我的算法，以更接近我想要的方式漂亮地打印树 - 我想我已经接近了，但失去了想法！

4

2 回答 2

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/

于 2012-09-08T02:35:20.623 回答
0

我看到你的问题来自 7 old，但是如果你需要重构你的代码，这是如何使用 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>
于 2020-01-13T06:54:31.553 回答