All components
dhtmlxTree
Loading/Processing dataBuilding tree with script
View page sourceTo build a tree with opened or closed parent nodes click on an appropriate action link.
|
Build opened tree Build closed tree |
To build a tree with opened or closed parent nodes click on an appropriate action link.
|
Build opened tree Build closed tree |
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxtree.css"> <script src="../../codebase/dhtmlxcommon.js"></script> <script src="../../codebase/dhtmlxtree.js"></script> <table> <tr> <td> <div id="treeboxbox_tree" style="width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"/> </td> <td rowspan="2" style="padding-left:25" valign="top"> <a href='#' onclick='buildIt();'>Build opened tree</a> <br/> <a href='#' onclick='buildIt2();'>Build closed tree</a> </td> </tr> </table> <script></script> <br><br> <div id="out_zone"></div>tree = new dhtmlXTreeObject("treeboxbox_tree", "100%", "100%", 0); tree.setSkin('dhx_skyblue'); tree.setImagePath("../../codebase/imgs/csh_bluefolders/"); tree.enableDragAndDrop(true); function buildIt() { tree.deleteChildItems(0); tree.insertNewChild(0, 1, "Root 1"); tree.insertNewChild(1, 11, "Child 1-1"); tree.insertNewChild(1, 12, "Child 1-2"); tree.insertNewChild(1, 13, "Child 1-3"); tree.insertNewChild(0, 2, "Root 2"); tree.insertNewChild(2, 21, "Child 2-1"); tree.insertNewChild(2, 22, "Child 2-2"); tree.insertNewChild(2, 23, "Child 2-3"); tree.insertNewChild(0, 3, "Root 3"); tree.insertNewChild(3, 31, "Child 3-1"); tree.insertNewChild(3, 32, "Child 3-2"); tree.insertNewChild(3, 33, "Child 3-3"); } function buildIt2() { tree.deleteChildItems(0); tree.insertNewChild(0, 1, "Root 1"); tree.insertNewChild(0, 2, "Root 2"); tree.insertNewChild(0, 3, "Root 3"); tree.openOnItemAdding(false); tree.insertNewChild(1, 11, "Child 1-1"); tree.insertNewChild(1, 12, "Child 1-2"); tree.insertNewChild(1, 13, "Child 1-3"); tree.insertNewChild(2, 21, "Child 2-1"); tree.insertNewChild(2, 22, "Child 2-2"); tree.insertNewChild(2, 23, "Child 2-3"); tree.insertNewChild(3, 31, "Child 3-1"); tree.insertNewChild(3, 32, "Child 3-2"); tree.insertNewChild(3, 33, "Child 3-3"); tree.openOnItemAdding(true); }