Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to select a specific node programmatically?

Tags:

jstree

I have a jstree. I want to select the node which is bound to the object which has a location with id of 158. This works but seems stupid. What's the more idiomatic way of doing this?

var $tree = $('.jstree', myContext),     node = $tree.find('li').filter(function() {          return ( $(this).data().location || {}).id === 158;     }); $tree.jstree('select_node', n) 
like image 328
George Mauer Avatar asked Dec 11 '11 18:12

George Mauer


2 Answers

Just wanted to chime in here as none of the answers worked for me. What finally DID work was very simple:

$('#someTree').jstree('select_node', 'someNodeId');

Note that I didn't initialize someNodeId as a jQuery object. It's just a plain string.

I did this right after a tree was loaded without putting it into a "ready" bind event as it seems to not be necessary.

Hope it saves some one from a few frustrating hours. . .

To hook into the tree after it has been loaded:

.on('loaded.jstree', function() {     // Do something here...   }); 
like image 122
Matt Cashatt Avatar answered Sep 25 '22 06:09

Matt Cashatt


Based on jsTree groups you can try

jQuery("#getStartedTree").jstree("select_node", "#test2");  

if the data looks like

The JSON in the TextFile.txt - borrowed from your simple example  [      {      "data" : "A node",      "children" : [ "Child 1", "Child 2" ]      },      {      "attr" : { "id" : "test1" },          "data" : {              "title" : "Long format demo",              "attr" : { "id" : "test2", "href" : "#" }          }      }  ]  

and jsTree set up

My tree container is <div id="getStartedTree">  My jsTree code  $("#getStartedTree").jstree({             "themes": {                 "theme": "default",                 "url": "../App_Css/Themes/Default/style.css",                 "dots": true,                 "icons": true             },             "json_data": {                 "ajax": {                     "url": "../SiteMaps/TextFile.txt",                     "dataType": "json",                     "data": function(n) {                         return { id: n.attr ? n.attr("id") : 0 };                     }                 }             },             "plugins": ["themes", "json_data", "ui"]         });  

Is that what you are after?

like image 33
Radek Avatar answered Sep 23 '22 06:09

Radek