在JSTREE中选中父节点时同时选择子节点

Question

当父节点被选择时，我在选择子节点方面遇到了困难，同时也想打开子文件夹并选择所有子节点（不确定是否表述清楚）。因此，我需要知道如何获取所有子节点：

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

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

- mr_everton

Answer 1

这可能不是OP想要的，但在JSTree 3.3中，我使用了以下方法来打开所选父节点下的所有节点。

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

- ste

---

这段代码可以正常工作，并且可以按照以下方式使用： $(treeContainer).bind("select_node.jstree", function (e, data) { data.instance.select_node(data.node.children); }); - Matt Lourens

Answer 2

您需要启用两态复选框以允许独立选择父节点和子节点。下面我已经为复选框插件配置了"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

- Andreas

---

谢谢Andreas的建议，但我放弃了这个想法...之前我已经让复选框正常工作了，但那并不完全是我想要的。 - mr_everton

Answer 3

我放弃了这个想法...现在我只是通过ajax请求来加载子项并接收一个json对象，然后我可以看到它是文件还是目录，如果是目录，再发出另一个请求，就像这样我就有了整个结构。

- mr_everton

Answer 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);

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

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

函数“select_node”需要三个参数。第一个是要选择的节点（在这种情况下是当前父节点的后代）。如果将第二个参数设置为true，则可以防止每个选定节点触发changed.jstree事件。将第三个参数设置为false，因为将其设置为true会防止子文件夹打开。

函数“get_bottom_selected”仅在已选择该节点且它本身没有任何子项时返回节点。由于我们现在只对节点ID感兴趣，因此可以传递参数false（或完全省略）。

将参数true传递给函数“deselect_all”会再次防止触发changed.jstree事件。

如果您想查看jsTree API文档，可以在这里找到。该列表已过滤，仅包括选择函数和事件。完整的API列表可以在这里找到。

希望这可以帮助您，但如果您需要进一步澄清任何代码，请告诉我^_^

- Martoid Prime

Answer 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);
        });

- murwath