我有这个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']
})
我想要的是获取父节点的所有嵌套或深子节点。我怎么能这样做?
答案 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;
}