Javascript jsTree:如何从 jstree 获取所有节点?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/10296410/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jsTree : How to get all nodes from jstree?
提问by StackOverFlow
How to get all nodes present in jsTree?
如何获取jsTree中存在的所有节点?
I am building jsTree with xml
我正在用 xml 构建 jsTree
Root
-----A
-----A1
-----A1.1
-----A1.2
-----A2
-----`A2.1`
-----A2.2
-----B
-----B1
-----B2
-----C
-----C1
-----C1.1
-----C2.2
I want array of all nodes(ID) present in jsTree is as follows
我想要jsTree中存在的所有节点(ID)的数组如下
Expected output: [Root, A, A1, A1.1, A1.2, A2, A2.1, A2.2, B, B1, B2, C, C1, C1.1, C2.2]
预期输出:[Root, A, A1, A1.1, A1.2, A2, A2.1, A2.2, B, B1, B2, C, C1, C1.1, C2.2]
采纳答案by StackOverFlow
Solution with example :)
示例解决方案:)
var xmlString = $("#tree").jstree("get_xml");
var xmlDOM = $.parseXML(xmlString);
var IDList =[];
var items = $(xmlDOM).find('root item');
$.each (items, function(key, val){
IDList.push($(val).attr('id'));
})
IDList.pop();
xmlString =
xmlString =
<root>
<item id="A" parent_id="0" state="close">
<content><name>Charles Madigen</name></content>
</item>
<item id="A1" parent_id="A" state="close">
<content><name>Charles Madigen</name></content>
</item>
.
.
</root>
Output: Root, A, A1, A1.1, A1.2, A2, A2.1, A2.2, B, B1, B2, C, C1, C1.1, C2.2
输出:根,A,A1,A1.1,A1.2,A2,A2.1,A2.2,B,B1,B2,C,C1,C1.1,C2.2
:)
:)
回答by montrealist
From documentation:
从文档:
.get_json ( node , li_attr , a_attr )
This function returns an array of tree nodes converted back to JSON.
.get_json ( node , li_attr , a_attr )
此函数返回转换回 JSON 的树节点数组。
More info about same function from this doc:
此文档中有关相同功能的更多信息:
This function traverses the whole tree and exports it as JSON. Refer do the data sources section to see the format of the output.
If you specify a node as the first argument, only that node and its children are included in the export, otherwise the whole tree is exported.
此函数遍历整棵树并将其导出为 JSON。请参阅数据源部分以查看输出格式。
如果您指定一个节点作为第一个参数,则导出中仅包含该节点及其子节点,否则将导出整个树。
Just search and you shall find! :)
只要搜索,你就会找到!:)
回答by MDummy
You can traverse each node element and put it's id in an array via:
您可以遍历每个节点元素并将其 id 放入数组中:
var idList = [];
var jsonNodes = $('#tree').jstree(true).get_json('#', { flat: true });
$.each(jsonNodes, function (i, val) {
idList.push($(val).attr('id'));
})
回答by M2E67
var treeData = $('#MyTree').jstree(true).get_json('#', {flat:false})
// set flat:true to get all nodes in 1-level json
var jsonData = JSON.stringify(treeData );
回答by zanderwar
I needed the same thing and came up with the below solution given that get_xml is no longer available in jstree3
鉴于 get_xml 在 jstree3 中不再可用,我需要同样的东西并提出了以下解决方案
function get_jstree_order(root_ul_selector, children) {
var output = [];
var _this = this;
if (typeof children === 'undefined') {
children = $(root_ul_selector).find('> li');
}
children.each(function() {
if ($(this).find('ul').length > 0) {
output.push({
id: $(this).attr('id'),
children: get_jstree_order(root_ul_selector, $(this).find('ul > li'))
});
return;
}
output.push({
id: $(this).attr('id'),
children: false
})
});
return output;
}
console.log(get_jstree_order('#mytree > ul'));
Outputs (converted to JSON for readability):
输出(转换为 JSON 以提高可读性):
[
{
"id": "1",
"children": false
},
{
"id": "2",
"children": false
},
{
"id": "5",
"children": [
{
"id": "6",
"children": false
},
{
"id": "7",
"children": false
}
]
},
{
"id": "8",
"children": false
},
{
"id": "9",
"children": false
},
{
"id": "10",
"children": false
},
{
"id": "11",
"children": false
}
]
Modify as needed; to include whats need, but my purpose served only to get the correct order of items for server side processing.
根据需要修改;包括什么需要,但我的目的只是为了获得服务器端处理的正确项目顺序。
It's fine when lazy loading provided children id's are independent of their parents (eg, the first child of a parent always starts at 1)
如果孩子的 id 独立于他们的父母(例如,父母的第一个孩子总是从 1 开始),那么延迟加载很好