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

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

Answer 2

如果您將"three_state"屬性設置為true您將檢查所有父級到根目錄，就像這里 - JS Fiddle

如果您希望一次選擇多個項目以便父項變為完全選擇狀態，請在樹core配置中添加"multiple" : true

Answer 3

您可以使用此代碼：

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

使用此答案刪除重復項並遵循文檔。

每次選擇任何復選框時，它都會獲取所有選中復選框的所有父項並將它們推送到selected數組中。 最后，它將刪除來自已檢查兄弟姐妹的重復項（這將導致數組中其父項的多個 ID）。 data.selected是來自 JsTree changed 事件的數組。

顯然你可以在任何你想要的地方綁定這個代碼，只需將data.selected替換為

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