如何在页面加载时获取渲染的树数据答案

【问题标题】：How to get rendered tree data on page load如何在页面加载时获取渲染的树数据
【发布时间】：2018-10-09 16:30:05
【问题描述】：

如何在jstree 的页面加载时获取所有渲染的树metadata，类似于以下输出：

[23,24]

注意：我希望将每个id 放入metadata 对象中，以便在页面加载[23,24] 时像这样

$(function() {
  $('#jstree').jstree({
    "json_data": {
      "data": [{
        "data": "A node",
        "metadata": { id: 23 },
        "children": ["Child 1", "A Child 2"]
      }, {
        "metadata": { "id": 24 },
        "data": "Node 2",
      }]
    },
    "plugins": ["themes", "json_data", "ui"]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://old.static.jstree.com/v.1.0pre/jquery.jstree.js"></script>
<div id="jstree">
</div>

【问题讨论】：

标签： javascript jquery jstree

【解决方案1】：

要检索 id 值，您可以在提供给 jsTree 实例的数组上使用 map()，如下所示：

$(function() {
  var treeStructure = [{
    "data": "A node",
    "metadata": { id: 23 },
    "children": ["Child 1", "A Child 2"]
  }, {
    "metadata": { "id": 24 },
    "data": "Node 2",
  }];
  
  var ids = treeStructure.map(function(o) {
    return o.metadata.id;
  });
  console.log(ids);

  $('#jstree').jstree({
    "json_data": {
      "data": treeStructure
    },
    "plugins": ["themes", "json_data", "ui"]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://old.static.jstree.com/v.1.0pre/jquery.jstree.js"></script>
<div id="jstree"></div>

【讨论】：