如何实现树形视图的递归函数？

Question

如何使用以下数据属性通过嵌套的无序列表(<ul>)呈现树状视图？

// parentId value is always 0 for root nodes, otherwise this value corresponds to the id of its parent
// sequence represents the order of the element in the branch
// level represents the tree level of the element, root nodes will have a level of 1
var data = [
  { id: 'K66', level: 1, name: 'B', parentId: '0', sequence: 2 },
  { id: 'K65', level: 1, name: 'A', parentId: '0', sequence: 1 },
  { id: 'KK2', level: 2, name: 'Alan', parentId: 'K65', sequence: 1 },
  { id: 'KK22', level: 2, name: 'Bir', parentId: 'K66', sequence: 1 },
  { id: 'KK92', level: 2, name: 'Abe', parentId: 'K65', sequence: 2 },
  { id: 'KK77', level: 3, name: 'Boromir', parentId: 'KK22', sequence: 1 }
];

结果应该如下所示：

A
  Alan
  Abe
B
  Bir
    Boromir

我尝试过for循环，但很快我就重复代码来获取子节点，并且我无法将其重构为递归函数。

下面是一个包含数据的CodePen：http://codepen.io/nunoarruda/pen/KgVPmv

Answer 1

我将回答行动的以下部分问题...

如何使用以下数据属性通过嵌套的无序列表()呈现树状视图？

对于给定的数据结构，不需要递归解决方案。在提供的数据列表中使用sort，然后通过特定的reduce回调对其进行转换的组合已经完成了这项工作……

var
  dataList = [
    { id: 'K66', level: 1, name: 'B', parentId: '0', sequence: 2 },
    { id: 'KK2', level: 2, name: 'Alan', parentId: 'K65', sequence: 1 },
    { id: 'K65', level: 1, name: 'A', parentId: '0', sequence: 1 },
    { id: 'KK77', level: 3, name: 'Boromir', parentId: 'KK22', sequence: 1 },
    { id: 'KK22', level: 2, name: 'Bir', parentId: 'K66', sequence: 1 },
    { id: 'KK92', level: 2, name: 'Abe', parentId: 'K65', sequence: 2 }
  ],

  htmlListFragment = dataList.sort(function (a, b) {

    // sort by `level` or, if both are equal (sub)sort by `sequence`
    return (a.level - b.level) || (a.sequence - b.sequence);

  }).reduce(function (collector, item) {
    var
      registry = collector.registry,
      fragment = collector.htmlListFragment,

      parentId = item.parentId,
      id       = item.id,
      name     = item.name,

      member   = registry[id];

    if (!member) {

      member = registry[id] = document.createElement("li");
      member.id = id;
      member.appendChild(document.createTextNode(name));
      member.appendChild(document.createElement("ul"));

      if ((item.level === 1) && (item.parentId === "0"))  {

        fragment.appendChild(member);
      } else {
        registry[parentId].getElementsByTagName("ul")[0].appendChild(member);
      }
    }

    return collector;

  }, {

    registry        : {},
    htmlListFragment: document.createElement("ul")

  }).htmlListFragment;


console.log("htmlListFragment : ", htmlListFragment)