javascript - 渲染出一棵树

Question

我需要将具有关系的平面数据渲染成 JavaScript 中的 html 树结构。我需要在没有任何图书馆帮助的情况下做到这一点。数据本身是平坦的:

[
{id : 1, title : one, parent : null},
{id : 2, title : two, parent : 1},
{id : 3, title : three, parent : 2},
{id : 4, title : four, parent : null},
{id : 5, title : five, parent : 4},
{id : 6, title : six, parent : 4},
{id : 7, title : seven, parent : 6},
{id : 8, title : eight, parent : 7},
{id : 9, title : nine, parent : 8}
]

这就是期望的结果:

<div>one
  <div>two
    <div>three</div>
  </div>
</div>
<div>four
  <div>five</div>
  <div>six
    <div>seven
      <div>eight
        <div>nine
        </div>
      </div>
    </div>
  </div>
</div>

数据的深度是任意的(即它可以是一层或一百层深，具体取决于数据)。

我一直在寻找答案，但大多数都指向库或使用本身嵌套的数据(在大多数情况下，这只会将嵌套问题推到服务器上)。

Answer 1

这是一个递归函数，用于将对象数组(带有您的结构)转换为 html 字符串，表示 div 标记的层次结构。

function menuTree(nodes, parentId) {
    return nodes.reduce(function(html, node) {
        return html + (node.parent === parentId
            ? '\n<div>' + node.title + menuTree(nodes, node.id) + '</div>'
            : '');
    }, '');
}

你可以这样调用它:

var nodes = [
    {"id": 1, "title": "one",   "parent": null},
    {"id": 2, "title": "two",   "parent": 1},
    {"id": 3, "title": "three", "parent": 2},
    {"id": 4, "title": "four",  "parent": null},
    {"id": 5, "title": "five",  "parent": 4},
    {"id": 6, "title": "six",   "parent": 4},
    {"id": 7, "title": "seven", "parent": 6},
    {"id": 8, "title": "eight", "parent": 7},
    {"id": 9, "title": "nine",  "parent": 8}
];
var html = menuTree(nodes, null);
console.log(html);

这是一个fiddle以交互方式演示上述内容。这个 fiddle 允许您更改 json 描述并相应地重现 div 树。通过使用一些基本的 css，div 树会以缩进方式呈现。