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

Answer 1

如果您将"three_state"属性设置为true，则会让所有父母都可以访问根目录，例如此处 - JS Fiddle

如果您希望一次选择多个项目，以便父级将转为完全选中状态，请将"multiple" : true添加到树core config

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

Answer 3

使用 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答案删除重复项并遵循documentation。

每次选择任何复选框时，它将获得所有选中复选框的所有父级，并将其推入selected数组中。最后，它将删除来自已检查的分支的重复项（这将在阵列中导致其父级的多个ID）。 data.selected是来自JsTree更改事件的数组。

很显然，您可以将代码绑定到所需的任何位置，只需用

替换data.selected

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

Answer 4

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

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

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

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

4 个答案: