在 JSTREE 中也选择了父节点时选择子节点答案

【问题标题】：Select Child nodes when parent is also selected in JSTREE在 JSTREE 中也选择了父节点时选择子节点
【发布时间】：2020-07-08 20:44:21
【问题描述】：

我在选择父节点时选择子节点时遇到困难，也想打开子文件夹并选择所有子节点（不确定我是否说清楚）所以我知道如何通过以下方式获取所有子节点：

selected_nodes = $("#demo").jstree("get_selected", null, true); 
var tree = jQuery.jstree._reference('#demo'); 
var children = tree._get_children(selected_nodes);

但并没有真正选择或打开子文件夹和节点

【问题讨论】：

标签： jstree

【解决方案1】：

这可能不是 OP 想要的，而是在 JSTree 3.3 上。我用它来打开选定父节点下的所有节点。

$(treeContainer).bind("select_node.jstree", function (e, data) {
            return data.instance.open_all(data.node);
        });

【讨论】：

这行得通，可以按如下方式使用： $(treeContainer).bind("select_node.jstree", function (e, data) { data.instance.select_node(data.node.children); });

【解决方案2】：

我放弃了这个想法..现在我只是在做 ajax 请求来加载孩子并接收一个 json 对象，从那里我可以看到它是一个文件还是目录，如果它又是一个目录另一个请求，就像这样我有整个结构

【讨论】：

【解决方案3】：

您必须打开 two_state 复选框以允许独立选择父节点和子节点。下面我为复选框插件配置了“two_state”参数：

$("#docTree").jstree({
    "themes": {
        "theme": "classic",
        "url": "jstree/themes/classic/style.css"
    },
    "plugins": ["themes", "ui", "checkbox", "json_data"],
    "checkbox": { "two_state" : true }
})

在此处查看文档：http://www.jstree.com/documentation/checkbox

【讨论】：

谢谢安德烈亚斯，但我放弃了这个想法......我之前有复选框工作，但它不完全是我想要的

【解决方案4】：

如果我正确理解这一点，您希望在选择 jsTree（文件）的父级（文件夹）之一时选择所有最低的后代。

不幸的是，我没有找到比下面的方法更直接的方法。我正在使用 jsTree 3.1.1 并设法使用以下方法解决了这个问题：

var $demo = $("#demo");
var nodes =  $demo.jstree("get_top_selected", true);

//Selects all of the children of each selected node including folders
if(nodes.length > 0){
    nodes.forEach(function(node, i){
        $demo.jstree("select_node", node.children_d, true, false);
    });
}

var fileNodes = $demo.jstree("get_bottom_selected", false);

//We now need to deselect everything and only select the file nodes
$demo.jstree("deselect_all", true);
$demo.jstree("select_node", fileNodes, true, false);

上面的代码允许用户“选择”多个文件夹并选择这些文件。

"get_top_selected" 函数的值为 true 的参数返回完整节点，而不仅仅是 ID。这使您可以访问节点的子节点。

函数"select_node" 接受三个参数。第一个是要选择的节点（在这种情况下是当前父节点的后代）。如果第二个参数设置为 true，它会阻止 changed.jstree 事件为每个选定节点触发。第三个参数设置为false，因为设置为true 会阻止子文件夹打开。

函数"get_bottom_selected" 只返回一个节点，如果它同时被选中并且它本身没有任何子节点。由于我们现在只对节点 ID 感兴趣，因此我们可以传递参数 false（或完全省略它）。

再次将true 的参数传递给函数"deselect_all" 会阻止changed.jstree 事件触发。

如果您想查看 jsTree API 文档，您可以找到它们here。该列表被过滤为仅包含选择函数和事件。 API 的完整列表可以在here 找到。

我希望这会有所帮助，但如果您需要对任何代码进行进一步说明，请告诉我^_^

【讨论】：

【解决方案5】：

select all child nodes when parent selected ,
         $(data.rslt.obj).find("li").each( function( idx, listItem ) {
             var child = $(listItem); // child object
             $.jstree._reference("#associateRightHandTree").check_node(child);
         });

unselect all child nodes when parent unselected ,
        $(data.rslt.obj).find("li").each( function( idx, listItem ) {
            var child = $(listItem); // child object
            $.jstree._reference("#associateRightHandTree").uncheck_node(child);
        });

【讨论】：