在 JS 中动态创建树/嵌套 JSON

Question

我打算使用 Bootstrap Treeview 预期 Json 如下。 我需要根据各自的输入节点将元素动态添加到“树”

var tree = {};

tree = [
  {
    text: "Parent 1",
    nodes: [
      {
        text: "Child 1",
        nodes: [
          {
            text: "Grandchild 1",
            nodes : [
                {
                    text : "GrandChild 3"
                }
            ]
          },
          {
            text: "Grandchild 2",
            nodes : [
                {
                    text : "GrandChild 4"
                }
            ]
          }
        ]
      },
      {
        text: "Child 2"
      }
    ]
  },
  {
    text: "Parent 2"
  },
  {
    text: "Parent 3"
  },
  {
    text: "Parent 4"
  },
  {
    text: "Parent 5"
  }
];

我尝试了 array.reduce() 但无法成功。

寻找一些方法

Answer 1

手动，您可以这样做：

alert(tree[0].nodes[0].nodes[0].nodes[0].text);// alerts "GrandChild 3"
// add a node array:
tree[0].nodes[0].nodes[0].nodes[0].nodes = [{
  text: "GrandChild NEW First"
}];
console.dir(tree);

节目： Array[5]0：对象节点：Array[2]0：对象节点：Array[2]0：对象节点：Array[1]0：对象节点：Array[1]0：对象文本：“GrandChild NEW First” _proto__：对象长度：1__proto__：数组[0]文本：“GrandChild 3”_proto__：对象长度：1

对数组 1 做同样的事情：

数组[5] 1：对象 节点：数组[1] 文本：“父母 2”

tree[1].nodes = [{
  text: "GrandChild NEW Second"
}];

现在您只需要代码来确定节点的深度以及在该点添加什么（节点或文本或两者）。

编辑如果它更清楚，最后添加也可以这样完成：

添加一个新的节点数组，然后将一个值压入其中

tree[1].nodes = [];
tree[1].nodes.push({
  text: "GrandChild NEW Second"
});

Answer 2

编辑 2 Link to Plunkr

由于sn-p编辑器的特性，下面的代码在sn-p编辑器上是不行的，但是为了保证代码可以不会神奇地从 plunkr 中消失，我已将其包含在下面。您需要做的就是包含 jquery、bootstrap 的 css 文件、treeview css 和 treeview js 文件。

一些问题

这可能只是因为我以前从未使用过树形视图，但是如果您在树形视图上打开了任何内容或选择了某些内容，则通过添加新元素可以删除任何该操作。快速浏览它，我没有看到从当前状态简单地重建节点列表（我们的tree 变量）的方法。我尝试传递一个预定义的 nodeId 以查看我们是否可以使用 get[State] 命令直接对父变量 tree 进行更改，但 id 似乎是由渲染方面生成的，并且没有被继承。 （澄清一下：我给parent 1 一个节点ID 1，但是当我调用它时，我得到它的节点ID 是0）

id 约定似乎从第一个元素 (nodeId=0) 开始。然后它首先遍历该节点的子节点（如果有），同时递增nodeId。从理论上讲，这将是一个足够简单的脚本，可以返回并手动枚举nodeId，以便您可以进行状态更改，以便重新渲染看起来与以前相同，但在某处减去新附加的节点。

var tree = [{
  text: "Parent 1",
  nodes: [{
    text: "Child 1",
    nodes: [{
      text: "Grandchild 1",
      nodes: [{
        text: "GrandChild 3"
      }]
    }, {
      text: "Grandchild 2",
      nodes: [{
        text: "GrandChild 4"
      }]
    }]
  }, {
    text: "Child 2"
  }]
}, {
  text: "Parent 2"
}, {
  text: "Parent 3"
}, {
  text: "Parent 4"
}, {
  text: "Parent 5"
}];
$(document).ready(function() {
  $('#test').treeview({
    data: tree
  });

  $('button.btn-primary').on('click', function() {
    tree.push({
      text: 'Parent ' + (tree.length + 1)
    });

    $('#test').treeview({
      data: tree
    });

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" />
<button class="btn btn-primary">Add Something</button>
<div id="test"></div>

编辑 1

阅读 OP 的问题后，我不是 100% 相信下面的代码回答了他们正在寻找的内容。我已要求进一步澄清，并将在此处保留此答案，直到我了解更多信息为止。

原创

我在代码笔上编写了一些代码Here，但我会将其添加到 sn-p 编辑器中。

var tree = [{
  text: "Parent 1",
  nodes: [{
    text: "Child 1",
    nodes: [{
      text: "Grandchild 1",
      nodes: [{
        text: "GrandChild 3"
      }]
    }, {
      text: "Grandchild 2",
      nodes: [{
        text: "GrandChild 4"
      }]
    }]
  }, {
    text: "Child 2"
  }]
}, {
  text: "Parent 2"
}, {
  text: "Parent 3"
}, {
  text: "Parent 4"
}, {
  text: "Parent 5"
}];

function recursive_tree(data, tag, child_wrapper, level) {
  var html = [];
  //return html array;
  level = level || 0;
  child_wrapper = (child_wrapper != false) ? child_wrapper : 'ul';
  $.each(data, function(i, obj) {
    var el = $('<' + tag + '>');
    el.html(obj.text);
    if (obj.hasOwnProperty('nodes')) {
      var wrapper = $('<' + child_wrapper + '>');
      var els = recursive_tree(obj.nodes, tag, child_wrapper);
      wrapper.append(els);
      wrapper.appendTo(el);
    }
    html.push(el);
  });
  return html;
}

$(document).ready(function() {
  var html = recursive_tree(tree, 'li', 'ul');
  console.log(html);
  $('#parent').append(html);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="parent"></ul>

您正在寻找的是一个名为Recursion 的东西，它被大量用于类似这样的东西。往往存在嵌套/自相似的结构。

这对于一个基本的想法应该足够了，从这里开始它真的改变了被创建的 html。我从来没有使用过 Bootstrap Treeview，所以我不知道它是如何设置 HTML 的，否则我会更准确一点。