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

Question

如何获取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)的数组，如下所示： 期望输出: [Root, A, A1, A1.1, A1.2, A2, A2.1, A2.2, B, B1, B2, C, C1, C1.1, C2.2]

- StackOverFlow

---

请查看我的答案：jstree jquery如何遍历所有节点。它可能对此有帮助。 - SNag

Answer 1

来自文档：

.get_json (node, li_attr, a_attr)

此函数将树节点转换回JSON，返回一个数组。

同一功能的更多信息可以在这份文档中找到：

此函数遍历整棵树，并将其导出为JSON。请参阅数据源部分以查看输出格式。

如果将节点作为第一个参数指定，则只包括该节点及其子节点在内，否则将导出整个树。

搜索即可找到！:)

- montrealist

---

感谢您的回复。var xml = $（“#selectedTreeViewDiv”）.jstree（“get_xml”）;仅返回xml。我想要一个树节点数组（jsTree中存在的所有节点）。 - StackOverFlow

Answer 2

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

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

- MDummy

Answer 3

解决方案及示例 :)

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>

Output: 根节点、A、A1、A1.1、A1.2、A2、A2.1、A2.2、B、B1、B2、C、C1、C1.1、C2.2。

- StackOverFlow

---

这个在当前版本的jstree中已经不再适用了。因为get_xml函数在jstree 3及以上版本中已经不再被支持。 - MDummy

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

- M2E67

Answer 5

我也有同样的需求，鉴于jstree3中已不再提供get_xml方法，因此我想出了以下解决方案。

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开始），这是可以接受的。

- zanderwar