如何找出父节点的所有嵌套子节点?

时间:2016-08-24 12:18:42

标签: jquery jstree

我有这个JSTree

enter image description here

并遵循此树的代码

var data1 = [{
  "id": "W",
  "text": "World",
  "state": { "opened": true },
  "children": [{"text": "Asia"}, 
               {"text": "Africa"}, 
               {"text": "Europe",
                "state": { "opened": false },
                "children": [ "France","Germany","UK" ]
  }]
}];

$('#data').jstree({ 
    core: {
      data: data1, 
      check_callback: false
    }, 
    checkbox: {       

      whole_node : false,
      tie_selection : false 
    },
    plugins: ['checkbox','search']
})

我想要的是获取父节点的所有嵌套或深子节点。我怎么能这样做?

1 个答案:

答案 0 :(得分:2)

  

我想要的是获取父节点的所有嵌套或深子节点。我怎么能这样做?

您需要有一个起始节点。假设您正在侦听“select_node.jstree”事件以获取当前选定的节点。

您正在寻找的主要功能是.get_children_dom(node) and .is_leaf(node)

完整的例子是:

MyList

包含所有功能的完整代码段为:

.on('check_node.jstree', function(e, obj) {
    var currentNode = obj.node;
    $('#data').jstree(true).open_all(currentNode);
    var allChildren = $('#data').jstree(true).get_children_dom(currentNode);
    var result = [currentNode.text];
    allChildren.find('li').andSelf().each(function(index, element) {
        if ($('#data').jstree(true).is_leaf(element)) {
            result.push(element.textContent);
        } else {
            var nod = $('#data').jstree(true).get_node(element);
            result.push(nod.text);
        }
    });
    console.log(result.join(', '));
});
var data1 = [{
  "id": "W",
  "text": "World",
  "state": {"opened": true},
  "children": [{"text": "Asia"},
               {"text": "Africa"},
               {
                 "text": "Europe",
                 "state": {"opened": false},
                 "children": ["France", "Germany", "UK"]
               }]
}];

$(function () {
  $('#data').jstree({
    core: {
      data: data1,
      check_callback: false
    },
    checkbox: {

      whole_node: false,
      tie_selection: false
    },
    plugins: ['checkbox', 'search']
  }).on('check_node.jstree.jstree', function(e, obj) {
    var currentNode = obj.node;
    $('#data').jstree(true).open_all(currentNode);
    var allChildren = $('#data').jstree(true).get_children_dom(currentNode);
    var result = [currentNode.text];
    allChildren.find('li').andSelf().each(function(index, element) {
      if ($('#data').jstree(true).is_leaf(element)) {
        result.push(element.textContent);
      } else {
        var nod = $('#data').jstree(true).get_node(element);
        result.push(nod.text);
      }
    });
    console.log(result.join(', '));
  });

  $('#btnClose').on('click', function(e) {
    $('#data').jstree(true).close_all();
  });

  var to = false;
  $('#search').on('input', function(e) {
    if (to) { clearTimeout(to); }
    to = setTimeout(function () {
      var v = $('#search').val();
      $('#data').jstree(true).search(v);
    }, 250);
  });

  $('#btnCheckAll').on('click', function(e) {
    $('#data').jstree(true).check_all();
  });

  $('#btnUnCheckAll').on('click', function(e) {
    $('#data').jstree(true).uncheck_all();
  });
});
button {
  background-color: transparent;
  color: red;
  border-style: none;
}