jquery - 如何找出父节点的所有嵌套子节点？

Question

我有这个 JSTree

以及该树的以下代码

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

我想要的是获取父节点的所有嵌套或深层子节点。我该如何做到这一点？

Answer 1

What I want is to get all the nested or deep child node of a parent node . How can I do this ?

您需要有一个起始节点来启动。假设您监听“select_node.jstree”事件来获取当前选定的节点。

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

完整的示例是:

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>


<label form="search">Products: </label>
<input type="text" value="" id="search" placeholder="Search products">
<div id="divPanel">
    <button id="btnCheckAll">Check All</button><button id="btnUnCheckAll">UnCheck All</button><button id="btnClose">Close</button>
    <div id="data">

        <ul>
            <li>Root node 1
                <ul>
                    <li id="child_node_1">Child node 1</li>
                    <li>Child node 2</li>
                </ul>
            </li>
            <li>Root node 2</li>
        </ul>
    </div>
</div>