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

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

如何使用以下数据属性使用嵌套的无序列表（）呈现树视图？

使用给定的数据结构，不需要递归解决方案。 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)

如何为树视图执行递归函数？

1 个答案: