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

Question

Hi all,

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

Answer 1

Hey, I am having the same problem. I am developing a treeview for a project and i want to be able to add sub items to items already in the list and have the item already in the list turn into a collapsable panel, now that it holds sub items.

I've tried adding the classes, appending and prepending and it works, except the panels arent collapsable.

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

and this

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

too, but alas, no success

here is a bit of my code i am using

showNewTitle = 0; currentOption = $('#webmenu2').val(); traverse = $('#_' + currentOption).attr('id') alert(currentOption); viewChildren = $('#' + traverse).children().length; childNew = $('#' + traverse + ' ul:last'); //alert(childNew.attr('class')); alert(childNew.attr('id')); alert(viewChildren);

            //document.getElementById('errorMsg').style.visibility = 'hidden';
            if(viewChildren == 3){
                branches = $("<li><span>" + $('#addToTree').val() + "</span></li>").appendTo('#' + traverse + ' ul:first');
            }
            else
            {
                $('#' + traverse).removeClass('last');
                $('#' + traverse).addClass('collapsable');
                top = $("<div id='test'></div>").prependTo('#' + traverse);
                $("#test").addClass('hitarea  collapsable-hitarea');
                branches = $("<ul><li><span class='hover'>" + $('#addToTree').val() + "</span> style='display: block;'></li></ul>").appendTo('#' + traverse);
            }
            $('#red').treeview({
                add: branches
            });