Menu
I have some code in which I need the ability to add child nodes to a jstree which themselves contain children. The below code adds a 'child2' node correctly to 'child1' but ignores the child3 data. Any help much 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>
581
First off, that's not valid json with the last comma inside the last bracket. Take that off:
[
{
"data" : "parent",
"attr" : {
"id" : "root.id"
},
"children" : [
{
"data" : "child1",
"attr" : {
"id" : "child1.id"
},
"children" : [ ]
}
]
}
]
Also, as of version 3.0 or perhaps before you can simply just insert a new node with json. Recursion is no longer needed.
I created json like so, which creates a folder called income and puts many text children underneath it but also those could be folders just like the parent with more content. See my function below which inserts this folder into the parent with all it's 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"
}
]
}
This same json could also be used to fill a parent folder on tree instance:
/**
* 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
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
