javascript - 如何在页面加载时获取呈现的树数据

Question

如何在 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>

Answer 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>