根据选定的 jsTree 节点过滤 JSON 数据

Question

我在fiddle 中有一个例子。我有一棵这样的树：

> Root > Parent[n] > Child[n].

在Child 中，我添加了一个事件处理程序。在示例中它位于Child1 中，因此如果我单击Child1，它将呈现一个包含变量array 中的3 行的表格。

我想要的是，如果我点击 Child1，它将通过分支“Parent1”过滤表 (array)，也就是说，它将呈现 2 行的表 named "父 1"。有什么办法吗？

Answer 1

我必须做两件事才能使您的代码正常工作：

1. 添加 jsTree css 使其可扩展

2. 您将 select_node 处理程序附加到 ID 为 $study 的东西上，而它应该是 jstree：

   $('#jstree').on('select_node.jstree', function (evt, data) {...})
   

检查this Fiddle的更新。

如果您愿意的话，您可以稍微简化您的代码 - Fiddle。

更新

如果要通过所选节点的父文本过滤数组，可以替换此行：$table.bootstrapTable('load', array);

与：

var parentNodeId = $('#jstree').jstree().get_node(data.selected[i]).parent;    
var parentNodeText = $('#jstree').jstree().get_node(parentNodeId).text;

var filteredArray = array.filter(function(item){
   if (item.name === parentNodeText) {
       return item;
   }  
});

$table.bootstrapTable('load', filteredArray);