Geek Answers Handbook

Jstree - adding child nodes that themselves contain children

I have code in which I need the ability to add child nodes to jstree that themselves contain child elements. The following code adds the "child2" node correctly to "child1", but ignores the data of child3. Any help is greatly appreciated. Code follows:

<html> <head> <script type="text/javascript" src="http://static.jstree.com/v.1.0rc2/jquery.js"></script> <script type="text/javascript" src="http://static.jstree.com/v.1.0rc2/jquery.jstree.js"></script> <script type="text/javascript"> $(document).ready(function() { $(function () { $("#tree").jstree({ "json_data" : { "data" : [ { "data" : "parent", "attr" : { "id" : "root.id" }, "children" : [ { "data" : "child1", "attr" : { "id" : "child1.id" }, "children" : [ ] } ] }, ] }, "plugins" : [ "themes", "json_data", "crrm" ] }); }); $("#add").click(function() { $("#tree").jstree("create", $("#child1\\.id"), "inside", { "data" : "child2", "attr" : { "id" : "child2.id" }, "children" : [ { "data" : "child3", "attr" : { "id" : "child3.id" }, "children": [ ] } ] }, function() { alert("added"); }, true); }); }); </script> </head> <body> <div id="tree" name="tree"></div> <input type="button" id="add" value="add" /> </body> </html>
+6
javascript jquery jstree
source share
3 answers

The first is invalid json with the last comma inside the last bracket. Take this off:

 [ { "data" : "parent", "attr" : { "id" : "root.id" }, "children" : [ { "data" : "child1", "attr" : { "id" : "child1.id" }, "children" : [ ] } ] } ]

Also, starting from version 3.0, or perhaps before you can just insert a new node with json. Recursion is no longer needed.

I created json to create a folder with the name of the income and puts a lot of text files under it, but there may also be folders like parents with a lot of content. See My function below, which inserts this folder into the parent with all the children:

 { "text" : "Income", "id" : "_folder_income", "state" : { "opened" : true }, "children" : [ { "text" : "$125,000 - $150,000", "state" : { "selected" : true }, "icon" : "jstree-file", "id" : "6017897162332" }, { "text" : "$150,000 - $250,000", "state" : { "selected" : false }, "icon" : "jstree-file", "id" : "6017897374132" }, { "text" : "$250,000 - $350,000", "state" : { "selected" : false }, "icon" : "jstree-file", "id" : "6017897397132" }, { "text" : "$350,000 - $500,000", "state" : { "selected" : false }, "icon" : "jstree-file", "id" : "6017897416732" }, { "text" : "Over $500,000", "state" : { "selected" : false }, "icon" : "jstree-file", "id" : "6017897439932" }, { "text" : "$30,000 - $40,000", "state" : { "selected" : false }, "icon" : "jstree-file", "id" : "6018510070532" }, { "text" : "$100,000 - $125,000", "state" : { "selected" : false }, "icon" : "jstree-file", "id" : "6018510083132" }, { "text" : "$40,000 - $50,000", "state" : { "selected" : false }, "icon" : "jstree-file", "id" : "6018510087532" }, { "text" : "$75,000 - $100,000", "state" : { "selected" : false }, "icon" : "jstree-file", "id" : "6018510100332" }, { "text" : "$50,000 - $75,000", "state" : { "selected" : false }, "icon" : "jstree-file", "id" : "6018510122932" } ] }

The same json can also be used to populate the parent folder in the tree:

 /** * inserts a new node (json object returned from url) into an existing node (parentNodeId), for the div ud in jsTreeName which is * an instanced jstree. * @param string jsTreeName {name of an instanced tree} * @param string url {returns json} * @param string parentNodeId {string of the parent node id} */ function insertUrlIntoNode(jsTreeName, url, parentNodeId) { var nodeTree = getSynchronousJson(url); var tree = $('#'+jsTreeName).jstree(true); tree.deselect_all(); var sel = tree.create_node(parentNodeId, nodeTree); //tree.deselect_all(); //tree.select_node(sel); //optionally you could select the new node after insersion }
+1
source share

As far as I can see from the source, the create function does not support creating a multi-level tree right away. The called method does not use and does not check the children attribute on the transmitted data.

0
source share

You need to do it yourself, something like this:

  var recursivelyCreate = function (node, parentNodeId) { tree.jstree("create", $("#"+parentNodeId), "inside", node, function() {}, true); if(node.children){ $.each(node.children, function(i, child){ recursivelyCreate(child, node.attr.id); }); } }; recursivelyCreate(rootNodeYouWantToInsert,nodeParentId);
0
source share

More articles:


All Articles