Question

几周前我开始使用Javascript和Jquery。现在在办公室，我必须构建一个包含Child和grandChild等的Object。

我知道最好的方法是执行递归函数，但无法弄清楚。我已经能够工作但是只要我有2级别我就失败了......

我有这些数据：

dataTest = [
        { que_code: "BM1", que_enonce: "Test 1", que_id: "1", que_id_parent: null },
        { que_code: "BM2", que_enonce: "Test 2", que_id: "2", que_id_parent: 1 },
        { que_code: "BM3", que_enonce: "Test 3", que_id: "3", que_id_parent: 1 },
        { que_code: "BM4", que_enonce: "Test 4", que_id: "4", que_id_parent: null },
        { que_code: "BM5", que_enonce: "Test 5", que_id: "5", que_id_parent: 3 },
    ];

我的结果应该给出以下

BM1
- BM2
- BM3
  - BM5
BM4

任何帮助将不胜感激。

提前致谢

Answer 1

以下是如何执行此操作，您可以首先使用递归来使用reduce()方法创建该树数据结构，然后您可以创建另一个将从该新数据结构构建HTML的递归函数。

var dataTest = [
  { que_code: "BM1", que_enonce: "Test 1", que_id: "1", que_id_parent: null },
  { que_code: "BM2", que_enonce: "Test 2", que_id: "2", que_id_parent: 1 },
  { que_code: "BM3", que_enonce: "Test 3", que_id: "3", que_id_parent: 1 },
  { que_code: "BM4", que_enonce: "Test 4", que_id: "4", que_id_parent: null },
  { que_code: "BM5", que_enonce: "Test 5", que_id: "5", que_id_parent: 3 },
];

function makeTree(data, parent = null) {
  return data.reduce(function(r, e) {
    if (e.que_id_parent == parent) {
      e.child = makeTree(data, e.que_id)
      r.push(e)
    }
    return r;
  }, [])
}

function toHtml(data, parent) {
  data.forEach(function(e) {
    var li = $('<li></li>')
    li.text(e.que_code)
    if (e.child.length) {
      var ul = $('<ul></ul>');
      ul.append(toHtml(e.child, ul));
    }
    li.append(ul)
    parent.append(li)
  })
}

var newData = makeTree(dataTest, null);
toHtml(newData, $('ul'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- DON'T FORGET THIS UL -->
<ul></ul>

用对象构建treeView的Javascript

1 个答案: