如何找出父节点的所有嵌套子节点?
我有这个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']
})
我想是让所有的父节点的嵌套或深子节点。我怎样才能做到这一点 ?
我想要的是获得父节点的所有嵌套或深层子节点。我怎样才能做到这一点 ?
您需要有一个起始节点才能开始。假设您监听“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>
感谢您的帮助,但代码中有一些调整,而不是使用'select_node',我使用'check_node',当点击复选框而不是节点时执行某些操作。那么当我点击特定节点时,如何获得节点的所有子节点和子节点 – legend
@code_legend我使用'check_node'而不是'select_node'更新了片段。当您检查(而不是取消选中)节点时,结果数组将包含所有文本(当前节点(子节点)和子节点)。运行该代码段并在代码段控制台中查看消息。如有问题请告诉我。 – gaetanoM
感谢它的工作原理,只有一件事我想知道为什么在'check_node.jstree.jstree'中两次使用.jstree。 – legend
你不能得到这个像'数据1 [0]。 id;'? – abpatil
不,假如我选择了World,因为它是一个父节点,它有6个孩子,包括嵌套,所以我怎样才能得到所有的孩子列表或长度? – legend