Question

我有一个带复选框的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方法，然后设置它们的复选框。

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的形式提供。

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

1 个答案: