dhtmlxTree示例
http://dhtmlx.com 包含目录树、菜单、工具条等很多js控件，功能十分强大。
现将dhtmlxTree使用样例记录如下(包括目录树、上下文菜单)：
1、所需js文件dhtmlxcommon.js
dhtmlxtree.js
dhtmlxtree_json.js
//菜单控件所需的js
dhtmlxprotobar.js
dhtmlxmenubar.js
dhtmlxmenubar.js2、sample.html代码：
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>无标题文档</title>
<scriptsrc="./dhtmlxcommon.js"></script>
<scriptsrc="./dhtmlxtree.js"></script>
<scriptlanguage="JavaScript"src="./extend/dhtmlxtree_json.js"></script>
<scriptlanguage="JavaScript"src="./dhtmlxprotobar.js"></script>
<scriptlanguage="JavaScript"src="./dhtmlxmenubar.js"></script>
<scriptlanguage="JavaScript"src="./dhtmlxmenubar_cp.js"></script>
<linkrel="STYLESHEET"type="text/css"href="./dhtmlxtree.css">
<linkrel="STYLESHEET"type="text/css"href="./context.css">
<linkrel="STYLESHEET"type="text/css"href="./dhtmlxmenu.css">
</head>
<body>
<divid="treeBox"style="width:200;height:200"></div>
<script>
//initmenu
aMenu=newdhtmlXContextMenuObject('120',0,"images/");
aMenu.menu.loadXML("./_context.xml");
aMenu.setContextMenuHandler(onMenuClick);
tree=newdhtmlXTreeObject('treeBox',"100%","100%",0);
tree.setImagePath("images/");
tree.enableCheckBoxes(true);
tree.enableDragAndDrop(true);
tree.enableContextMenu(aMenu);//linkcontextmenutotree
tree.loadCSV("./data.txt");//forloadingfromfile
functiononMenuClick(id,s){alert("Menuitem"+id+"wasclicked"+s);}
</script>
</body>
</html>3、数据文件data.txt
1,0,node 1
2,1,node1.1
3,2,node1.1.1
4,0,node2
bd2f46a212ffae3b011305afd5eb0108,4,node2.1
6,1,node 1.24、菜单文件_context.xml
<?xml version='1.0' ?>
<menuabsolutePosition="auto"mode="popup"maxItems="8"globalCss="contextMenu"globalSecondCss="contextMenu"globalTextCss="contextMenuItem">
<MenuItemname="Red"src="./images/red.gif"id="edit_Red"/>
<MenuItemname="Green"src="./images/green.gif"id="edit_Green"/>
<MenuItemname="Blue"src="./images/blue.gif"id="edit_Blue"/>
<MenuItemname="Other..."src=""id="outher"width="120px"panelwidth="120">
<MenuItemname="Yellow"src="./images/yellow.gif"id="edit_Yellow"/>
<MenuItemname="White"src="./images/white.gif"id="edit_White"/>
</MenuItem>
</menu>
注：dhtmlxTree标准版不支持菜单功能，所以需要对dhtmlxtree.js做些修改，在脚本的最后面加上如下方法：
<!--[if!supportLineBreakNewLine]-->
<!--[endif]-->dhtmlXTreeObject.prototype.enableContextMenu=function(menu)
{
if(menu)this.cMenu=menu
};