Adding custom data to the alternate JSON format

[Slim Slam]

We've been using JStree beta 10 successfully so far using the alternative JSON format.

However, we'd like to add some of our own custom JSON data to the alternative JSON format.

The custom data is unrelated to the display or use of JStree and is just for our own

bookkeeping related to the tree data. 

This could be one node of the tree:

{"id":"e3","text":"retail","icon":true,"li_attr":{"id":"e3"},"a_attr":{"href":"#"},"state":{"loaded":true,"opened":false,"selected":false,"disabled":false},"parent":"t1"}

I tried adding some of my own data to this ("JUNK":"MOREJUNK"):

{"id":"e3","text":"retail", "JUNK":"MOREJUNK","icon":true,"li_attr":{"id":"e3"},"a_attr":{"href":"#"},"state":{"loaded":true,"opened":false,"selected":false,"disabled":false},"parent":"t1"}

But when I saved the structure (using get_json) and then placed the tree back in the page, the added data was gone.

Is there a place in the alternative json structure where I can add custom data that will be ignored by JStree?

J

[Ivan Bozhanov]

Hi,

use the "data" property on each noed to store extra stuff - it is the safest place, there are other options too, but this is the best place to store such data.

Best regards,
Ivan

[Slim Slam]

Hi Ivan,

  Thanks for your response. Could you provide a simple example here of what that would look like?  I see the data property but I'm

not sure exactly where to stuff the data.

Cheers,

J

[Ivan Bozhanov]

You can add anything you want to the data object. Like:
{ "id" : "some_node_id" "text" : "some node", ... "data" : { "foo" : "bar", "example_array" : ["1",2,true], "obj" : {"asdf":"asdf1"}  } ...

And later on you can retrieve it like so:
$('#tree').jstree(true).get_node("some_node_id").data.obj.asdf; // this would equal "asdf1"
$('#tree').jstree(true).get_node("some_node_id").data.example_array; // this would be an array: ["1",2,true]

Setting other values is just as simple - you are working with a normal object:
$('#tree').jstree(true).get_node("some_node_id").data.obj.asdf = "some other value";
$('#tree').jstree(true).get_node("some_node_id").data.example_array = "I do not want this an array anymore";
$('#tree').jstree(true).get_node("some_node_id").data.obj.new_property = 1024;

Best regards,
Ivan

[Guillaume Cardon]

Hi Ivan,

Apparently, search plugin couldn't search in custom data.

Is there a way to allow it ? And maybe, specify in which custom data to search ?

An example : { "id" : "1" "text" : "Node 1", ... "data" : { "author" : "john"}},{ "id" : "2" "text" : "Node 2", ... "data" : { "author" : "bob"}}

$('#tree').jstree(false).search('bob','author')...  something else...

Thanks for your answer.

[Ivan Bozhanov]

You should use the search.search_callback option - it has been discussed here in the groups as well, but here are the docs:
http://www.jstree.com/api/#/?q=search_call&f=$.jstree.defaults.search.search_callback

Basically it is a function that gets called for each node, so you can decide on a node per node basis if a node should be considered a match. You can use it like this:

$('#tree').jstree({
  search : {
    search_callback : function (str, node) {
      return node.data.author && node.data.author.indexOf(str) !== -1; // of course you can use toLowerCase on both author and str to make the search case-insensitive
    }, ...

Best regards,
Ivan