Question

所以我这里有一个jsTree实例，工作正常。我在列表项中动态存储数据集（使用jquery .attr()和.data()）， html集是预编码的（不通过ajax或其他任何方式加载）。

结构如下：

<ul>
<li>Node1
    <ul>
        <li>Node2
            <ul>
                <li data-material-id="bpch1u1">Leaf 1</li>
                <li data-material-id="bpch1u2">Leaf 2</li>
            </ul>
        </li>
    </ul>
</li>

然后我有一个按钮：

<button type="button" class="btn btn-primary" onclick="openMaterial($(this))">Open Material now</button>

在收听外部脚本时，该按钮具有data-material属性。属性设置正确，我能够读取它。

我现在想要的是点击按钮openMaterial()它应该打开data-material-id= button-material

对应的叶子

我的功能如下：

function openMaterial(el)
    {
        //get treenode with material id
        var node = $('li[data-material-id="' + el.data('material') + '"]');
    }

节点在调用后保存一个jQuery对象，但遗憾的是它是空的（保持正文）。我相信这是因为jsTree的任何未打开的节点或叶子都不在DOM中。意味着即使我打开它们并再次关闭它们，或加载它们它们也不会出现在DOM中。

我尝试了jsTree函数open_all和load_all，它们似乎有效，但我仍然无法获得结果。还有另一个选项来获取只有data-attribute的相应叶子吗？

编辑：

使用内置jsTree函数get_node进行另一次尝试：

var node = $('#material_list').jstree('get_node','li[data-material-id="' + el.data('material') + '"]');

根本不工作。如果我在关闭所有节点时调用它，则返回＆＃34; false＆＃34;，如果打开节点和叶子（以编程方式或手动方式），则返回正确的叶子。

Answer 1

另一种方法是遍历内部jstree存储并从那里获取您的项目（并选择它们或只是显示它们）：

var instance = $('#material_list').jstree(true),
    material = el.data('material'),
    i;
for(i in instance._model.data) {
    if(i !== '#' && instance._model.data.hasOwnProperty(i)) {
        if(instance._model.data[i].li_attr['data-material-id'] === material) {
            instance.select_node(i); // use this to reveal the node and select it
            instance._open_to(i); // use this to reveal the node
            instance.select_node(i, false, true); // use this to select the node without revealing it
        }
    }
}

Answer 2

我现在有两个解决方案：

- 逐步向下泡树（逐个打开一个节点）

- 打开所有节点，获取节点，触发事件，再次关闭所有节点

我还没有尝试过冒泡，因为第二个选项对我来说似乎更有效，因为我只需要叶子的data-material属性。

所以这可以用一个jQuery选择器保存在一行中：

$('#material_list').jstree('open_all')
    .jstree('select_node','li[data-material-id="' + el.data('material') + '"]')
    .jstree('close_all');

jsTree无法选择叶子

2 个答案: