时间戳

首页 > 解决方案 > 如何以编程方式选择 jsTree 中的隐藏节点？

javascript - 如何以编程方式选择 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 折叠时（仅显示顶级列表项），没有任何内容被选中，也没有勾选复选框。 运行 selectNode 后折叠的 jsTree

当我展开节点时，它们会被相同的代码选中。 在此处输入图像描述

我不知道 jsTree 是如何隐藏折叠项的，也没有找到任何 jsTree 方法来创建基于类的选择然后设置它们的复选框。

标签： javascriptselectnodesjstreehidden

解决方案

一种方法是获取所有节点并遍历它们以选择具有类的节点。

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 可用。

推荐阅读