javascript - 如何以编程方式选择 jsTree 中的隐藏节点？

Question

我有一个带有复选框的 jsTree。树中的每个项目代表一个可能具有"new"、“开始”或“完成”状态的审阅项目。状态将添加到项目的 @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方法来创建基于类的选择，然后设置其复选框。

Answer 1

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

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