JQuery treeview - add node(s) in middle of tree

Question

I'm just getting started with JQuery and the treeview plugin so this should be a relatively easy question:

The example code for adding branches to the tree:

var newnodes = $("<li><span class='folder'>New Sublist</span><ul>" + 
    "<li><span class='file'>Item1</span></li>" + 
    "<li><span class='file'>Item2</span></li></ul></li>").appendTo("#browser"); 
$("#browser").treeview({ 
  add: branches 
});

Works fine for me, but adds the new branch at the end of the tree - instead what I want is to be able to select a specific node and add to that branch. I've managed to get the node being added by using the id of the particular node instead of the whole treeview in - appendTo("nodeID") However I can't get the tree to render correctly, either with:

$("nodeID").treeview({
    add: branches
});

or

$("browser").treeview({
    add: branches
});

or calling it on both without arguments.

Cheers in advance

Tali · Accepted Answer · 2011-03-28 12:58:15Z

1

Hey, the idea is very simple:

get the parent node of the node you want to append.
append the new node to the parent and put it in a new variable
append the tree (the whole tree) the new variable.

Check the code:

var parent = document.getElementById("parentId");
var newNode = $("<li> NewNode </li>").appendTo(parent);
$("#tree").treeview( { add : newNode } );

and that's it:) hope I helped...

answered Mar 28, 2011 at 12:58

Tali

563 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SebiF Over a year ago

I tried this. It "works". However this does not keep an eye on the classes which jQuery Treeview normally adds to the li and ul elements. I could not find how I could tell Treeview to "re-class" all elements of its tree. Adding all classes oneself doesn't work, too, as new hitareas don't seem to get bound.

Kristine T · Accepted Answer · 2014-10-17 16:50:07Z

I did it, and it works. But the hitarea is always visible, even with no child under the node.

//HTML file
<ul id='grandpa' class='treeview'></ul>

//JS snippet when adding a first node - pay attention to the dummy <ul></ul> at the end
var branches = $("<li><div id='dad'>Maybe-a-parent-node</div><ul></ul></li>").appendTo("#grandpa");

//JS snippet when adding some children in a middle of a tree
pNode = $("#dad").children("ul");  // get the dummy ul and add children to it
childrenHTML =  "<li>Node 1</li>"; // can add more than 1 li here
var children = $(childrenHTML).appendTo(pNode);
$(pNode).treeview({
    add: children
});

I know that this question is pretty old. Hope that it can help someone else.

Collectives™ on Stack Overflow

JQuery treeview - add node(s) in middle of tree

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related