开发者

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

开发者 https://www.devze.com 2022-12-24 20:03 出处:网络
I\'m just getting started with JQuery and the treeview plugin so this should be a relatively easy 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


Hey, the idea is very simple:

  1. get the parent node of the node you want to append.
  2. append the new node to the parent and put it in a new variable
  3. 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...


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消