How to initialize jsTree using JSON
Solution 1
Probably you want something like that? http://jsfiddle.net/radek/fmn6g/11/
- Where I insert jsTree on a button click.
- The javascript on click function inserts 'jstree' div and also contains jsTree definition.
- As you can see I also use json data type.
More info in my question display jsTree on click
Is that what you are after?
Solution 2
Here is my solution:
var jsTreeSettings = $("#myTree").jstree("get_settings");
jsTreeSettings.json_data.data = $.parseJSON(stringJSON);
$.jstree._reference("myTree")._set_settings(jsTreeSettings);
// Refresh whole our tree (-1 means root of tree)
$.jstree._reference("myTree").refresh(-1);
This solution will work even if we set up AJAX for loading model before.
From documentation:
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.
More information is here http://www.jstree.com/documentation/json_data
I decided to use this solution because I must change stringJSON
several times and rebuild tree using this changed string (without reloading page).
Pavel F
Updated on November 21, 2020Comments
-
Pavel F over 3 years
I make jsTree by this way:
$("#myTree").jstree({ "plugins": ["themes", "json_data", "ui", "crrm", "dnd"], "themes": { "theme": "default", "dots": false, "icons": false, "url": "../../Content/jsTreeThemes/default/style.css" }, "json_data": { "data" : [] } });
And user sees page with empty jsTree. I must initialize my jsTree when user make some action. But I musn't use ajax initialization (I musn't use "ajax" in "json_data"). I must initialize my jsTree using only string like this:
var stringJSON = [{ "attr": { "id": "1", "rel": "root", "mdata": null }, "data": "title": "root_jsTree", "icon": null }, "state": "open", "children": [{ "attr": { "id": "7", "rel": "folder", "mdata": null }, "data": { "title": "1", "icon": null }, "state": "", "children": [{ "attr": { "id": "10", "rel": "folder", "mdata": null }, "data": { "title": "leaf", "icon": null }, "state": "", "children": [] }] }, { "attr": { "id": "8", "rel": "folder", "mdata": null }, "data": { "title": "leaf", "icon": null }, "state": "", "children": [{ "attr": { "id": "9", "rel": "folder", "mdata": null }, "data": { "title": "leaf", "icon": null }, "state": "", "children": [] }] }] }]'
No matter how I receive this string, when user wants see tree I've already had this string. And here I get question: How can I initialize jsTree and display it for user using only string below.