12

如何获取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]

4

5 回答 5

14

文档

.get_json ( node , li_attr , a_attr )

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

此文档中有关相同功能的更多信息:

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

如果将节点指定为第一个参数,则仅该节点及其子节点包含在导出中,否则将导出整个树。

只需搜索,您就会找到!:)

于 2012-04-24T12:12:40.243 回答
6

示例解决方案:)

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

xml字符串 =

<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

:)

于 2012-04-27T05:58:35.250 回答
5

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

var idList = [];
var jsonNodes = $('#tree').jstree(true).get_json('#', { flat: true });
$.each(jsonNodes, function (i, val) {
    idList.push($(val).attr('id'));
})
于 2017-08-08T07:42:12.533 回答
1
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 );
于 2016-04-13T18:44:57.907 回答
1

鉴于 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 开始),那么延迟加载就可以了

于 2019-06-16T12:04:46.200 回答