jsTree：如何从 jstree 获取所有节点？

Posted 2023-03-05

【中文标题】jsTree：如何从 jstree 获取所有节点？

【英文标题】：jsTree : How to get all nodes from jstree?

【发布时间】：2012-05-05 00:01:39

【问题描述】：

如何获取 jsTree 中存在的所有节点？

我正在用 xml 构建 jsTree

Root
     -----A
          -----A1
               -----A1.1
               -----A1.2
          -----A2
               -----`A2.1`
               -----A2.2

     -----B
          -----B1
          -----B2

     -----C
          -----C1
               -----C1.1
               -----C2.2

我想要jsTree中存在的所有节点（ID）的数组如下

预期输出：[根，A，A1，A1.1，A1.2，A2，A2.1，A2.2，B，B1，B2，C，C1，C1.1，C2。 2]

【问题讨论】：

请在jstree jquery how to iterate through all nodes查看我的回答。它可以帮助解决这个问题。

【参考方案1】：

来自documentation：

.get_json ( node , li_attr , a_attr )

此函数返回转换回 JSON 的树节点数组。

更多信息来自this doc：

此函数遍历整个树并将其导出为 JSON。参考 执行数据源部分以查看输出的格式。

如果你指定一个节点作为第一个参数，只有那个节点和它的 子项包含在导出中，否则整个树是 已导出。

只要搜索，你就会找到！ :)

【讨论】：

感谢您的回复。 var xml = $("#selectedTreeViewDiv").jstree("get_xml");仅返回 xml。我想要treenodes数组（jsTree中存在的所有节点）

【参考方案2】：

示例解决方案:)

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 =

<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>

输出：根，A，A1，A1.1，A1.2，A2，A2.1，A2.2，B，B1，B2，C，C1，C1.1，C2.2

:)

【讨论】：

这不再适用于当前版本的 jstree。因为 jstree 版本 3 及更高版本不再支持函数 get_xml。

【参考方案3】：

您可以遍历每个节点元素并将其 id 通过以下方式放入数组中：

var idList = [];
var jsonNodes = $('#tree').jstree(true).get_json('#',  flat: true );
$.each(jsonNodes, function (i, val) 
    idList.push($(val).attr('id'));
)

【参考方案4】：

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 );

【参考方案5】：

鉴于 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'));

输出（为了可读性转换为 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
  
]

根据需要修改；包括需要的东西，但我的目的只是为了获得正确的项目顺序以进行服务器端处理。

如果孩子的 id 独立于他们的父母（例如，父母的第一个孩子总是从 1 开始），那么延迟加载就可以了