javascript - Check all parent nodes when child node is selected in jstree - Stack Overflow

admin管理员组

文章数量:1405739

How can I check all parent nodes when a child node is checked in 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"]
        });

How can I check all parent nodes when a child node is checked in 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"]
        });

• javascript
• jquery
• jstree

Share Follow edited Nov 7, 2015 at 21:39 Anders 8,6531010 gold badges6060 silver badges9999 bronze badges asked Nov 7, 2015 at 20:07 Ahmar ArshadAhmar Arshad 49711 gold badge1111 silver badges2222 bronze badges 1

• Are you using the checkbox plugin? Also, could you give us the HTML of #select_cats or perhaps a fiddle? – Anders Commented Nov 7, 2015 at 21:42

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

This piece of code is the solution to this problem.

When you check a node, all of that nodes parents will automatically been checked

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

If you set the "three_state" property to true you will get all parents up to the root checked, like here - JS Fiddle

If you want multiple items be selected at once so that the parent will turn to fully selected state, add "multiple" : trueto tree core config

You can use this code:

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

All of selected nodes with parents is in selected variable.
https://groups.google./forum/#!topic/jstree/6rICTokWciU

With JsTree 3.3.6 I got it in the following way:

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

Using this answer to remove duplicates and following the documentation.

Every time you select any checkbox, it will get all the parents of all checked checkboxes and push them into selected array. Finally it will remove duplicates ing from checked sibilings (which will cause multiple IDs of their parents in the array). data.selected is an array ing from the JsTree changed event.

Obviously you can bind this code anywhere you want, simply replacing data.selected with

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

本文标签： javascriptCheck all parent nodes when child node is selected in jstreeStack Overflow