How to trigger the rendering of a jQuery tree
I am using jquery tree plugin to render hierarchical data.
I have coded additional functions that would allow the user to interact with this data (e.g. add / remove nodes, swap nodes, etc.)
Currently this plugin maintains that whenever you want to add any node you can call the following method,
$("#browser").treeview({
add: branches
});
here branches
created jQuery object
, generated by a block of HTML that will represent a specific node.
However, for deleting and replacing nodes, I use common JQuery functions such as
for removing,
$("#topnd2").remove();
for exchange,
var next = $("#topnd2").next();
$("#topnd2").insertAfter(next);
topnd2
is id
any particular tree node.
The nodes are removed / replaced as expected, but the problem is that the tree is not rendered and therefore the tree images (mostly vertical lines indicating branches) are not set properly.
For example, if I remove the last node, then the node is removed from the processed tree, but the remaining sibling node should get L as a line image, but not |.
I tried to call
$("#browser").treeview();
Please let me know your ideas.
Thanks, Jatan
source to share
I found some workaround as shown below,
Once a node has changed, actually add its previous node to its child,
...$ ("# browser") TreeView ({add :. $ ("# Topnd2") InsertBefore (previous) .next ()});
If node swaps down, virtuall adds the current node to the next node.
...
$ ("# browser") TreeView ({add :. $ ("# Topnd2") InsertAfter (next)});
it is currently working fine, will update this post if I find any problems with this approach. Also please confirm this approach if you know.
Regards, Jatan
source to share