在jstree中选择子节点时，检查所有父节点

Check all parent nodes when child node is selected in jstree

本文关键字：检查 父节点 jstree 选择 子节点      更新时间：2023-09-26

在jstree中检查子节点时，如何检查所有父节点？

$('#select_cats').jstree({
            "core" : {
                "themes" : {
                    "responsive": false
                }            
            },
            "types" : {
                "default" : {
                    "icon" : "fa fa-folder icon-state-warning icon-lg"
                },
                "file" : {
                    "icon" : "fa fa-file icon-state-warning icon-lg"
                }
            },
            "checkbox": {
                "three_state": false
            },
            "plugins": ["types", "checkbox"]
        });

这段代码就是这个问题的解决方案。

当您检查一个节点时，所有节点的父节点都将自动检查

$('#categories').on('activate_node.jstree', function (e, data) {
      if (data.instance.is_leaf(data.node)) {
        var parentnode = data.node.parent
        do {
          data.instance.check_node(parentnode)
          parentnode = data.instance.get_node(parentnode).parent
        } while (parentnode)
      }
    })

如果您将"three_state"属性设置为true，您将检查到根的所有父项，如这里-JS Fiddle

如果您希望同时选择多个项目，以便父项将变为完全选择状态，请将"multiple" : true添加到树core配置

您可以使用以下代码：

var selected = instance.get_selected(), i, j;
for(i = 0, j = selected.length; i < j; i++) {
  selected = selected.concat(instance.get_node(selected[i]).parents);
}
selected = $.vakata.array_unique(selected);
selected.pop('#');

所有选定的具有父节点的节点都在selected变量中
https://groups.google.com/forum/#！topic/jstree/6rICTokWciU

JsTree 3.3.6我通过以下方式获得了它：

// bind to events triggered on the tree
$('#ID_OF_TREE').on("changed.jstree", function (e, data) {
  var selected = [];
  for (i = 0; i < data.selected.length; i++) {
    selected = selected.concat($('#ID_OF_TREE').jstree(true).get_path(data.selected[i], false, true));
    //first false=I want an array; second true=I want only IDs
  }
  selected = selected.unique();
  console.log(selected);
});
Array.prototype.unique = function () {
  return Array.from(new Set(this));
}

使用此答案删除重复项并遵循文档。

每次选中任何复选框，它都会获取所有选中复选框的所有父项，并将它们推送到selected数组中。最后，它将删除来自已检查的可能性的重复项（这将导致数组中其父项的多个ID）。data.selected是来自JsTree更改事件的数组。

显然，您可以将此代码绑定到任何您想要的位置，只需将data.selected替换为

var all_selected = $('#ID_OF_TREE').jstree(true).get_selected();
相关文章：