fperucic
How to create child nodes dynamically by manipulating the array ?
I'll see if I can find some time this weekend to share an example that shows how to add child nodes; however it's generally not done by manipulating the array directly.
Thanks @dlgoodchild , I am using this amazing library now, can you please give me some tip how to do that? by recreating the chart everytime the data is changed? but the size / position of the chart could be changed
Hi guys this is how I got it to work. Thanks dlgoodchild for for keeping this code up to date.
var chart = new Treant(simple_chart_config, null, $); // initialises the tree when the page loads var $oNodes = $('.Treant .node'); $('body').on('click', '.Treant .node', function() { var $oNode = $(this); $oNodes.removeClass( 'selected' ); $oNode.addClass( 'selected' ); let node = $oNode.data( 'treenode' ); });
//gets an array with data that you want to dynamically load to the tree $.ajax({ url :'', method : 'POST', // form submit method get/post data : {}, ContentType : 'application/json', dataType: 'json', success: function(data){
$.each(data, function (i, node) {
var hid = node.id // you must have a unique id in each element of the json array
var node_info = $(node.parent).data('treenode'); // assigns data to each node foreach element in the json array
var detail = { // create the actual node with the element information
'text': {'name': data.name}, //each name in the json array you received
HTMLid: hid, // assigns an id used to for connecting the nodes
};
chart.tree.addNode(node_info, detail); // loads the data into and adds to the tree dynamically
}
});
},
});
})
OK, I clearly haven't found the time yet, but it's still on my todo to build out some samples with things like this.
@chaddwick25 I'm trying to wrap my head around your solution, to no avail. Can you upload a working example to JSFiddle or something? Also, is there a way to add and remove nodes on the tree and have the tree change? (Without having to do any XMLHttpRequest requests)
@n8jadams I dont know how to do it without using XMLHttpRequest requests. Sorry
@chaddwick25 Can you show an example of a json file (with the array that's dynamically loaded) that is read in by the AJAX request?
{
"data":{
"chart":{
"container": "#viz-jig-chart",
"connectors":{
"type": "step"
},
"node":{
"collapsable":true,
"HTMLclass":"nodeDefault"
}
},
"nodeStructure":{
"text": {
"name": "Main Viz-Jig Progress"
},
"HTMLid": "root",
"children": [
{
"text": {
"name": "First child"
},
"HTMLid": "1"
},
{
"text": {
"name": "Second child"
},
"HTMLid": "2"
}
]
}
}
}
the same data you would use to create an initial node, you'd use to add to the tree. the key things from my last post are: init the tree and store it. var chart = new Treant(simple_chart_config, null, $); call the tree and using the property add the node. chart.tree.addNode(node_info, detail); define all existing and new nodes in the tree var $oNodes = $('.Treant .node');
weather you choose to do an ajax call or not, you need to call this: chart.tree.addNode(node_info, detail);
The solution I went with was an internal model of the tree that I convert to a treant-format structure and then destroy and rebuild the tree with that treant structure representation of MY tree.
As treant manipulates the model it is sent, this was a mess until I created a 'COPY' of the data by serialising and deserialising the objects to/from JSON. That way you add/edit/move/remove nodes in your internal structure, then build a treant-alike structure and send THAT to treant.
I have code, but it is currently proprietary (and badly written undoubtedly).
