编辑2 Link to Plunkr

Question

我计划使用Bootstrap Treeview，其中Json如下所示。我需要动态地将元素添加到＆＃34;树＆＃34;基于各自的输入节点

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：Object nodes：Array [2] 0：Object nodes：Array [2] 0：Object nodes：Array [1] 0：Object nodes：Array [1] 0：Object text：＆＃34; GrandChild新的第一＆＃34; _proto__：对象长度：1__proto__：数组[0]文本：＆＃34; GrandChild 3＆＃34; _proto__：对象长度：1

对数组1执行相同操作：

数组[5] 1：对象 nodes：数组[1] text：＆＃34; Parent 2＆＃34;

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

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

编辑如果它更清晰，那么最后一次添加也可以这样做：

添加新节点数组，然后将值推入

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

Answer 2

编辑2 Link to Plunkr

由于代码段编辑器的性质，代码片段编辑器中的 下面的代码无效 ，但为了确保代码不会神奇地从代码中消失plunkr，我把它包括在下面。您需要做的就是包括jquery，bootstrap的css文件，treeview css和treeview js文件。

一些问题

这可能只是因为我以前从未使用过treeview，但是如果你在树视图上打开了任何东西或者选择了某些东西，通过添加新元素就可以删除任何动作。快速完成它我没有看到从当前状态简单地重建节点列表（我们的tree变量）的方法。我尝试传递一个预定义的nodeId，看看我们是否可以使用tree命令直接对父get[State]变量进行更改，但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的问题之后，我不是百分之百地认为下面的代码回答了他们想要的东西。我已经要求进一步澄清，并会在这里保留这个答案，直到我知道更多。

原始

我已经在代码笔 Here 上使用了一些代码，但我会将其添加到代码段编辑器中。

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明智的，否则我会更精确一点。

希望它有所帮助！

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

2 个答案:

编辑2 Link to Plunkr

一些问题

编辑1

原始