jsTree 不能 select 叶子

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') + '"]');
    }

node 在调用后持有一个 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') + '"]');

它根本不起作用。如果我在所有节点都关闭时调用它 returns “false”，如果节点和叶子被打开（以编程方式或手动方式）它 returns 正确的叶子。

Answer 1

我现在有两个解决方案：

-逐步沿着树向下冒泡（一个接一个打开节点）

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

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

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

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

Answer 2

另一种方法是遍历内部 jstree 存储并从那里获取您的项目（以及 select 它们或简单地显示它们）：

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

jsTree 不能 select 叶子

jsTree can't select leafs

javascript

jquery

html

jstree