![](/img/trans.png)
[英]How do I programmatically select a node in jsTree and open all parents
[英]How do I programmatically select hidden nodes in a jsTree?
我有一个带有复选框的jsTree。 树中的每个项目都代表一个审阅项目,其状态可能为“新”,“已开始”或“完成”。 状态被添加到项目的@class中。
这是从中创建jsTree的无序列表的一部分
<ul>
<li class="job started" id="j_09f2fbe4-a7ff-4723-af3d-c54d389d6020" start="March 31, 2018" due="April 12">j_09f2fbe4-a7ff-4723-af3d-c54d389d6020
<ul>
<li class="pub new" id="p_939519b7-e500-44b7-9be8-d7535d182b94">ANI22 Web Guide<span class="info float-right"> new: 10 started: 0 done: 0</span>
<ul>
<li class="lang new" id="p_939519b7-e500-44b7-9be8-d7535d182b94_DEU">DEU </li>
<li class="lang new" id="p_939519b7-e500-44b7-9be8-d7535d182b94_FRE">FRE </li>
<li class="lang new" id="p_939519b7-e500-44b7-9be8-d7535d182b94_IND">IND </li>
<li class="lang new" id="p_939519b7-e500-44b7-9be8-d7535d182b94_JPN">JPN </li>
<li class="lang new" id="p_939519b7-e500-44b7-9be8-d7535d182b94_KOR">KOR </li>
<li class="lang new" id="p_939519b7-e500-44b7-9be8-d7535d182b94_NLT">NLT </li>
<li class="lang new" id="p_939519b7-e500-44b7-9be8-d7535d182b94_POR">POR </li>
<li class="lang new" id="p_939519b7-e500-44b7-9be8-d7535d182b94_RUS">RUS </li>
<li class="lang new" id="p_939519b7-e500-44b7-9be8-d7535d182b94_SPA">SPA </li>
<li class="lang new" id="p_939519b7-e500-44b7-9be8-d7535d182b94_ZHS">ZHS </li>
</ul>
</li>
<li class="pub done" id="p_72ec6459-2d08-4e11-8002-26d5ba5a3ef3">ANIUSB Matrix Web Guide<span class="info float-right"> new: 0 started: 0 done: 10</span>
<ul>
<li class="lang done" id="p_72ec6459-2d08-4e11-8002-26d5ba5a3ef3_DEU">DEU </li>
<li class="lang done" id="p_72ec6459-2d08-4e11-8002-26d5ba5a3ef3_FRE">FRE </li>
<li class="lang done" id="p_72ec6459-2d08-4e11-8002-26d5ba5a3ef3_ITA">ITA </li>
<li class="lang done" id="p_72ec6459-2d08-4e11-8002-26d5ba5a3ef3_JPN">JPN </li>
<li class="lang done" id="p_72ec6459-2d08-4e11-8002-26d5ba5a3ef3_KOR">KOR </li>
<li class="lang done" id="p_72ec6459-2d08-4e11-8002-26d5ba5a3ef3_NLT">NLT </li>
<li class="lang done" id="p_72ec6459-2d08-4e11-8002-26d5ba5a3ef3_POR">POR </li>
<li class="lang done" id="p_72ec6459-2d08-4e11-8002-26d5ba5a3ef3_RUS">RUS </li>
<li class="lang done" id="p_72ec6459-2d08-4e11-8002-26d5ba5a3ef3_SPA">SPA </li>
<li class="lang done" id="p_72ec6459-2d08-4e11-8002-26d5ba5a3ef3_ZHS">ZHS </li>
</ul>
</li>
</ul>
</li>
</ul>
我现在要设置所有具有类“ .done”的节点的复选框。 该代码应通过工具栏中的按钮触发,并且无论当前是否隐藏(折叠)节点,该代码都可以工作。 但是,折叠的节点在HTML中不可见,也不会因为选择此类中的所有项而被捕获。
function selectDone() {
$('#joblist').jstree(true).select_node('.done');
}
当jsTree折叠时(仅显示顶级列表项),没有选择任何内容,也没有选中任何复选框。
我不知道jsTree如何隐藏折叠的项目,也没有找到任何jsTree方法来创建基于类的选择,然后设置其复选框。
一种方法是获取所有节点并在其上循环以选择具有类的节点。
function selectNodewithClass(sClass) {
var oTree = $('#jstree_demo_div').jstree(true);
var oList = oTree.get_json(null, { flat : true });
oList.forEach(function (node) {
if (node.li_attr.class.indexOf(sClass) >= 0) {
oTree.select_node(node)
}
});
};
selectNodewithClass("done");
get_json方法将返回树中的所有节点。 分配给li标记的类在树的节点数据中以li_attr的形式提供。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.