Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding metadata to jsTree

I just can not figure this out, or find any docs.

I have a bare-bones JSON:

{ "data": "node", "metadata" : { "content": "hellooooo" } }

This gets loaded, but I can not figure out how to write to this field, retrieve this field, and ensure that it is made when a new node is created.

Where are the docs for metadata?

Thanks, Marco.

like image 449
mcsilvio Avatar asked Jan 22 '11 05:01

mcsilvio


2 Answers

I found the answer at http://groups.google.com/group/jstree/browse_thread/thread/28d0c8d3eb2d9f8f

if you're using JSON and you deliver your nodes with a metadata like this:

{
"data":  "This is the name of the node",
"metadata": {
     "number": "no1",
     "description": "Description"
  }
}

...you'll be able to get (and set) the data like this:

$('div#jstree').jstree(
/*  ...options...  */
).bind('select_node.jstree',
function(e, data){
     alert(  $(data.rslt.obj).data('description') 
 ); });

This works with the newest commit (rc3/r233). In older versions it uses

$(data.rslt.obj).data("jstree").description 

The last solution worked for me (the default download for now is rc2).

like image 149
orcy Avatar answered Oct 30 '22 09:10

orcy


Thanks, I was losing my mind over that. None of the old examples worked! So I finally can access metadata, the problem is that I don't know how to iterate over unknown number of metadata fields?

ok, now I have checked it and it possible to iterate over object returned by data() with no named parameters

.bind("select_node.jstree", function (e, data) {
    var propsObj = $(data.rslt.obj).data();
    for (var prop in propsObj) { 
       alert(prop + " = " + propsObj[prop] + "\n"); 
    }  
});

If you need to avoid jstree_children Array getting in your way, the best way in my opinion is to encapsulate metadata into another object like so:

"metadata" : {"properties" : {"prop1" : "aa1a", "prop2" : "123"}}

then you can iterate using:

var metadata = $(data.rslt.obj).data();
for (var prop in metadata.properties) {...}
like image 31
Maciej Zabielski Avatar answered Oct 30 '22 08:10

Maciej Zabielski