back to the documentation homepage
jsTree v.1.0
json_data plugin
Description
The json_data
plugin enables jsTree to convert JSON objects to interactive trees. The data (JSON) can be set up in the config or retrieved from a server (also ondemand). Version 1.0 also introduces the experimental progressive render feature, which is suitable for large heavy trees, when the DOM would be too heavy to manipulate.
The basic structure you need to follow when supplying data in the JSON format is:
{ "data" : "node_title", // omit `attr` if not needed; the `attr` object gets passed to the jQuery `attr` function "attr" : { "id" : "node_identificator", "some-other-attribute" : "attribute_value" }, // `state` and `children` are only used for NON-leaf nodes "state" : "closed", // or "open", defaults to "closed" "children" : [ /* an array of child nodes objects */ ] }
The attr object will appear as attributes on the resulting li
node.
You may need to pass some attributes to the a
node, or set some metadata, or use language versions (for the languages plugin):
{ // `data` can also be an object "data" : { "title" : "The node title", // omit when not needed "attr" : {}, // if `icon` contains a slash / it is treated as a file, used for background // otherwise - it is added as a class to the <ins> node "icon" : "folder" }, // the `metadata` property will be saved using the jQuery `data` function on the `li` node "metadata" : "a string, array, object, etc", // if you use the language plugin - just set this property // also make sure that `data` is an array of objects "language" : "en" // any code you are using }
As seen in the first example below - you can also use a simple string to define a node (Child 1 & Child 2).
Configuration
data
Specifies the content to load into the container and convert to a tree. You can also set this to a function - it will be executed in the tree's scope for every node that needs to be loaded, the function will receive two arguments - the node being loaded & a function to call with the data once your processing is done.
ajax
The ajax config object is pretty much the same as the jQuery ajax settings object.
You can set the data
option to a function, that will be executed in the current tree's scope (this
will be the tree instance) and gets the node about to be open as a paramater (or -1
for initial load). Whatever you return in the data
function will be sent to the server as data (so for example you can send the node's ID).
You can set the url
option to a function, that will be executed in the current tree's scope (this
will be the tree instance) and gets the node about to be open as a paramater (or -1
for initial load). Whatever you return in the url
function will be used as the ajax URL (so that you can accomodate pretty paths such as /get_children/node_2).
The error
and success
functions (if present) also fire in the context of the tree, and if you return a value in the success
function it will be used to populate the tree - this can be useful if you want to somehow change what the server returned on the client side before it is displayed in the tree (for example some .NET json implementations require this to work: "success" : function (data) { return data.d; }
.
correct_state
If this option is set to true
if an AJAX returns an empty result, the node that was about to be opened will be converted to a leaf node (the open icon will no longer be displayed).
progressive_render
If this option is set to true
only the visible (open nodes) parts of the returned JSON are converted to DOM nodes, any hidden parts are saved away and parsed ondemand (when a node becomes visible). This is useful when you have a large nested tree which would result in a heavy DOM.
progressive_unload
If this option is set to true
when a node is closed its children are removed from the DOM and saved as metadata on the node itself, on reopen that metadata is used (much like progressive_render
).
NOTE:
If both data
and ajax
are set the initial tree is rendered from the data
string. When opening a closed node (that has no loaded children) an AJAX request is made.
Demos
Using the data config option
Using the ajax config option
Using the progressive render config option
Using both the data & ajax config options
API
Both dummy functions - _is_loaded
and load_node
are overwritten.
.load_node_json ( node , success_callback , error_callback )
This function is called instead of load_node
.
-
mixed
nodeThis can be a DOM node, jQuery node or selector pointing to an element you want loaded. Use
-1
for root nodes. -
function
success_callbackA function to be executed once the node is loaded successfully - used internally. You should wait for the
load_node
event. -
function
error_callbackA function to be executed if the node is not loaded due to an error - used internally. You should wait for the
load_node
event.
._parse_json ( data , node , is_callback )
This function converts JSON nodes to the DOM structure required by jstree. Returns a jQuery object.
-
mixed
nodeThis can be a tree node in the JSON format described above, or an array of such JSON nodes, may also be a string.
-
mixed
nodeThis is the DOM node, jQuery node or selector pointing to the element for which data is parsed.
-1
means root nodes. -
bool
is_callbackSpecifies if the function is called recursively - used ONLY internally.
.get_json ( node , li_attr , a_attr )
This function returns an array of tree nodes converted back to JSON.
-
mixed
nodeThis can be a DOM node, jQuery node or selector pointing to an element you want returned. Use
-1
or omit to get the whole tree. -
array
li_attrThe attributes to collect from the
LI
node. Defaults to[ "id" , "class" ]
-
array
a_attrThe attributes to collect from the
A
node. Defaults to[ ]
-
boolean
is_callbackUsed internally.