親ノードのすべてのネストされた子ノードを見つける方法は？

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

私が望むのは、親ノードのすべてのネストされたまたは深い子ノードを取得することです。これどうやってするの ？

開始ノードを指定する必要があります。 "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>