DHTML JavaScript Tree samples

Add / Delete items

You can freely customize a tree view. This sample illustrates that the tree items can be easily added/deleted dynamically through the graphical user interface. You can insert new item after the selected node or as its child. This feature allows you to configure a DHTML tree menu effortlessly.

 Insert new child item Item label

Insert new item next Item label

Delete item
 
<div id="treeboxbox_tree" style="width:200;height:200"></div> <script> tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0); tree.setImagePath("../imgs/"); tree.loadXML("tree.xml") tree.insertNewItem(0,100,"New Node 1",0,0,0,0,"SELECT"); tree.insertNewNext(2,101,"New Node 2",0,0,0,0,""); tree.deleteItem("2"); </script>
  • 0s passed to the function for arguments 4-7 (function to call on select, images) mean use default values for them
  • Last argument is a comma delimited string of following possible value (upper case only):
  • SELECT - move selection to this node after inserting
  • CALL - call function on select
  • TOP - add node to the top position
  • CHILD - node has children
  • CHECKED - checkbox is checked (if exists)


    • Go to the dhtmlxTree main page or Close this page

    下载代码说明
    X关闭

    dhtmlxTree目录树菜单

    dhtmlxTree目录树菜单