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

Question

当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"]
        });

- Ahmar Arshad

---

你是否正在使用复选框插件？此外，你能否给我们提供#select_cats的HTML代码或者一个fiddle？ - Anders

Answer 1

这段代码是解决该问题的方案。 当你勾选一个节点时，所有父节点都会自动被勾选。

$('#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)
      }
    })

- a828h

---

当用户选择父节点时，所有子节点都应该被选中。当选择任何子节点时，其所有父节点都应该被选中。这是可能的吗？ - undefined

Answer 2

你可以使用这段代码：

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

- Majid Basirati

Answer 3

如果您将"three_state"属性设置为true，您将获得所有父节点到根节点的选择，就像这里 - JS Fiddle。

如果您希望同时选择多个项，以使父节点转为完全选定状态，请将"multiple": true添加到树形core配置中。

- Nikolay Ermakov

---

当将“three_state”属性设置为true时，选择父节点时其所有子节点也会被选中，而我不想要这种情况。另外，如果任何一个子节点被选中，我希望父节点也被完全选中。 - Ahmar Arshad

所以，如果任何子节点被选中，您希望父节点被完全选中。那么如果父节点被选中呢？没有任何子节点应该被选中，只有父节点保持选中状态？ - Nikolay Ermakov

当用户选择父节点时，所有子节点都应该被选中。当选择任何子节点时，其所有父节点都应该被选中。这是可能的吗？ - undefined

Answer 4

使用 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));
}

使用this的答案来去除重复项，并遵循文档。

每次选择任何复选框时，它都会获取所有已选复选框的父级并将它们推入selected数组中。最后，它将从已选兄弟中删除重复项（这将导致其父级的多个ID出现在数组中）。 data.selected是来自JsTree更改事件的数组。

显然，您可以在任何想要绑定此代码的地方进行绑定，只需用

替换data.selected即可。

var all_selected = $('#ID_OF_TREE').jstree(true).get_selected();

- Nicola Elia