You can customize this JavaScript tree to look just the way you want. Select a tree item you want to edit then click on image or color to make appropriate changes. To change tree item's text, you should type new text in the box and click "Set new item label".
|
Set new item label To change item's image - click on one of next images:
To change item's color - click on one of next colors: |
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxtree.css"> <script src="../../codebase/dhtmlxcommon.js"></script> <script src="../../codebase/dhtmlxtree.js"></script> <script></script> <table> <tr> <td valign="top"> <div id="treeboxbox_tree" style="width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;"></div> </td> <td rowspan="2" style="padding-left:25" valign="top"> <a href="javascript:void(0);" onClick="var d=new Date(); tree.setItemText(tree.getSelectedItemId(),document.getElementById('ed1').value);">Set new item label</a> <input type="text" value="New label" id="ed1"><br><br> To change item's image - click on one of next images: <table> <tr><td> <a href="javascript:void(0);" onClick="tree.setItemImage2(tree.getSelectedItemId(),'tombs.gif','tombs.gif','tombs.gif');"><img src="../../codebase/imgs/csh_yellowbooks/tombs.gif" border="0"></a></td> <td><a href="javascript:void(0);" onClick="tree.setItemImage2(tree.getSelectedItemId(),'tombs_open.gif','tombs_open.gif','tombs_open.gif');"><img src="../../codebase/imgs/csh_yellowbooks/tombs_open.gif" border="0"></a></td> <td><a href="javascript:void(0);" onClick="tree.setItemImage2(tree.getSelectedItemId(),'leaf.gif','leaf.gif','leaf.gif');"><img src="../../codebase/imgs/csh_yellowbooks/leaf.gif" border="0"></a></td> <td><a href="javascript:void(0);" onClick="tree.setItemImage2(tree.getSelectedItemId(),'leaf2.gif','leaf2.gif','leaf2.gif');"><img src="../../codebase/imgs/csh_yellowbooks/leaf2.gif" border="0"></a></td> </td></tr> <tr><td nowrap> <a href="javascript:void(0);" onClick="tree.setItemImage2(tree.getSelectedItemId(),'iconText.gif','iconText.gif','iconText.gif');"><img src="../../codebase/imgs/csh_yellowbooks/iconText.gif" border="0"></a></td> <td><a href="javascript:void(0);" onClick="tree.setItemImage2(tree.getSelectedItemId(),'folderOpen.gif','folderOpen.gif','folderOpen.gif');"><img src="../../codebase/imgs/csh_yellowbooks/folderOpen.gif" border="0"></a></td> <td><a href="javascript:void(0);" onClick="tree.setItemImage2(tree.getSelectedItemId(),'folderClosed.gif','folderClosed.gif','folderClosed.gif');"><img src="../../codebase/imgs/csh_yellowbooks/folderClosed.gif" border="0"></a></td> <td><a href="javascript:void(0);" onClick="tree.setItemImage2(tree.getSelectedItemId(),'leaf3.gif','leaf3.gif','leaf3.gif');"><img src="../../codebase/imgs/csh_yellowbooks/leaf3.gif" border="0"></a></td> </td></tr> </table> <br> To change item's color - click on one of next colors: <table> <tr> <td><div style="cursor:pointer; width:20px; height:20px; background-color:#ff0000;" onClick="setColor('#ff0000','#ff0000')"> </div></td> <td><div style="cursor:pointer;width:20px; height:20px; background-color:#ffa500;" onClick="setColor('#ffa500','#ffa500')"> </div></td> <td><div style="cursor:pointer;width:20px; height:20px; background-color:#ffff00;" onClick="setColor('#ffff00','#ffff00')"> </div></td> </tr> <tr> <td><div style="cursor:pointer;width:20px; height:20px; background-color:#008000;" onClick="setColor('#008000','#adff2f')"> </div></td> <td><div style="cursor:pointer; width:20px; height:20px; background-color:#00ff7f;" onClick="setColor('#00ff7f','#adff2f')"> </div></td> <td><div style="cursor:pointer; width:20px; height:20px; background-color:#adff2f;" onClick="setColor('#adff2f')"> </div></td> </tr> <tr> <td><div style="cursor:pointer; width:20px; height:20px; background-color:#0000ff;" onClick="setColor('#0000ff','#87ceeb')"> </div></td> <td><div style="cursor:pointer; width:20px; height:20px; background-color:#9932cc;" onClick="setColor('#9932cc','#9932cc')"> </div></td> <td><div style="cursor:pointer; width:20px; height:20px; background-color:#87ceeb;" onClick="setColor('#87ceeb','#87ceeb')"> </div></td> </tr> </table> </td> </tr> </table> <script>function setColor(color1, color2); { tree.setItemColor(tree.getSelectedItemId(), color1, color2); }</script>tree = new dhtmlXTreeObject("treeboxbox_tree", "100%", "100%", 0); tree.setSkin('dhx_skyblue'); tree.setImagePath("../../codebase/imgs/csh_yellowbooks/"); tree.loadXML("../common/tree.xml");
All components
dhtmlxTree
Appearance
View page source
