CODEWITHSUNDEEP
javascriptjqueryjquery-pluginsjquery-selectorsjstree
StackOverFlow
StackOverFlow

Reputation: 4614

jsTree : How to get all nodes from jstree?

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]

Upvotes: 13

Views: 32657

Answers (5)

zanderwar
zanderwar

Reputation: 3730

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)

Upvotes: 1

MDummy
MDummy

Reputation: 414

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

Upvotes: 8

M2E67
M2E67

Reputation: 970

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

Upvotes: 1

montrealist
montrealist

Reputation: 5693

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! :)

Upvotes: 15

StackOverFlow
StackOverFlow

Reputation: 4614

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

:)

Upvotes: 6

Related Questions