javascript - jsTree : How to get all nodes from jstree? - Stack Overflow

admin管理员组

文章数量:1178553

How to get all nodes present in jsTree?

I am building jsTree with xml

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

Expected output: [Root, A, A1, A1.1, A1.2, A2, A2.1, A2.2, B, B1, B2, C, C1, C1.1, C2.2]

How to get all nodes present in jsTree?

I am building jsTree with xml

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

Expected output: [Root, A, A1, A1.1, A1.2, A2, A2.1, A2.2, B, B1, B2, C, C1, C1.1, C2.2]

• javascript
• jquery
• jquery-plugins
• jquery-selectors
• jstree

Share Improve this question Follow edited Apr 24, 2012 at 17:57 StackOverFlow asked Apr 24, 2012 at 10:47 StackOverFlowStackOverFlow 4,6041212 gold badges5454 silver badges9191 bronze badges 1

• Please see my answer at jstree jquery how to iterate through all nodes. It could help with this. – SNag Commented Jun 6, 2017 at 6:10

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 15

From documentation:

.get_json ( node , li_attr , a_attr )

This function returns an array of tree nodes converted back to 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.

Just search and you shall find! :)

You can traverse each node element and put it's id in an array via:

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

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 =

<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

:)

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

I needed the same thing and came up with the below solution given that get_xml is no longer available in 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):

[
  {
    "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)

本文标签： javascriptjsTreeHow to get all nodes from jstreeStack Overflow