jstree中clicked/expanded时如何获取所有parents节点数据

Question

如何在单击 child 节点

时获取 jstree 中的所有 parents 节点数据

假设我有一个如下所示的 jstree:

观察：当i select File 2 i应该得到所有parent节点数据i,e 根节点2 ---> Child 2 ---> 文件 2

$('#using_json_2').jstree({ 'core' : {
    'data' : [
       { "id" : "ajson1", "parent" : "#", "text" : "Simple root node", "date":"2018"},
       { "id" : "ajson2", "parent" : "#", "text" : "Root node 2", "date":"2018"},
       { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1", "date":"12" },
       { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2", "date":"12" },
         { "id" : "ajson5", "parent" : "ajson4", "text" : "File 1", "date":"12","children": false,"icon":"fa fa-file-o"  },
                { "id" : "ajson6", "parent" : "ajson4", "text" : "File 2", "date":"12","children": false,"icon":"fa fa-file-o"  }
    ]
} });

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>


<div id="using_json_2"></div>

预期输出：（当我select节点File 2）

var allParentsNode = [
{ "id" : "ajson2", "parent" : "#", "text" : "Root node 2"},
{ "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
{ "id" : "ajson6", "parent" : "ajson4", "text" : "File 2", "children": false,"icon":"fa fa-file-o"  }]

Answer 1

在 docs 中，您可以看到当您 select 一个节点时会触发一个 changed.jstree 事件。你可以使用 get_selected 和 get_path 方法来做你想做的事：

// Make it a variable so you can access it later
var treeData = [
  { "id" : "ajson1", "parent" : "#", "text" : "Simple root node", "date":"2018"},
  { "id" : "ajson2", "parent" : "#", "text" : "Root node 2", "date":"2018"},
  { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1", "date":"12" },
  { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2", "date":"12" },
  { "id" : "ajson5", "parent" : "ajson4", "text" : "File 1", "date":"12","children": false,"icon":"fa fa-file-o"  },
  { "id" : "ajson6", "parent" : "ajson4", "text" : "File 2", "date":"12","children": false,"icon":"fa fa-file-o"  }
];

var myTree = $('#using_json_2').jstree({ 'core' : {
  'data' : treeData // Use it here
}});

myTree.on('changed.jstree', function(e, data) {
  var selected = data.instance.get_selected(),
      // Get the path (array of IDs, since we pass true)
      path = data.instance.get_path(selected, null, true),
      // Use `map` to retrieve all nodes
      node_path = path.map(function(id) {
        return treeData.find(function(node) { return node.id === id; });
      });
  console.log(node_path);
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

<div id="using_json_2"></div>

jstree中clicked/expanded时如何获取所有parents节点数据

How to get all parents node data when clicked/expanded in jstree

javascript

jquery

jstree