http://dhtmlx.com 包含目录树、菜单、工具条等很多js控件，功能十分强大。
现将dhtmlxTree 使用样例记录如下(包括目录树、上下文菜单)：
1、所需js文件
dhtmlxcommon.js
dhtmlxtree.js
dhtmlxtree_json.js
//菜单控件所需的js
dhtmlxprotobar.js
dhtmlxmenubar.js
dhtmlxmenubar.js
2、sample.html代码：
<html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>无标题文档</title>
<script?src="./dhtmlxcommon.js"></script>
<script?src="./dhtmlxtree.js"></script>
<script?language="JavaScript"?src="./extend/dhtmlxtree_json.js"></script>
<script?language="JavaScript"?src="./dhtmlxprotobar.js"></script>
<script?language="JavaScript"?src="./dhtmlxmenubar.js"></script>
<script?language="JavaScript"?src="./dhtmlxmenubar_cp.js"></script>
<link?rel="STYLESHEET"?type="text/css"?href="./dhtmlxtree.css">
<link?rel="STYLESHEET"?type="text/css"?href="./context.css">
<link?rel="STYLESHEET"?type="text/css"?href="./dhtmlxmenu.css">
</head>
<body>
<div?id="treeBox"?style="width:200;height:200"></div>
<script>
??//init?menu?
??aMenu=new?dhtmlXContextMenuObject('120',0,"images/");
??aMenu.menu.loadXML("./_context.xml");
??aMenu.setContextMenuHandler(onMenuClick);
??
??tree=new?dhtmlXTreeObject('treeBox',"100%","100%",0);
??tree.setImagePath("images/");
??tree.enableCheckBoxes(true);
??tree.enableDragAndDrop(true);
??tree.enableContextMenu(aMenu);?//link?context?menu?to?tree
??tree.loadCSV("./data.txt");//for?loading?from?file
??
??function?onMenuClick(id,s){?alert("Menu?item?"+id+"?was?clicked"+s);?}
</script>
</body>
</html>
3、数据文件data.txt
1,0,node?1?
2,1,node?1.1?
3,2,node?1.1.1?
4,0,node?2
bd2f46a212ffae3b011305afd5eb0108,4,node?2.1
6,1,node?1.2
4、菜单文件_context.xml
<?xml?version='1.0'??>
<menu?absolutePosition="auto"?mode="popup"?maxItems="8"??globalCss="contextMenu"?globalSecondCss="contextMenu"?globalTextCss="contextMenuItem">
????????<MenuItem?name="Red"?src="./images/red.gif"??id="edit_Red"/>????
????????<MenuItem?name="Green"?src="./images/green.gif"??id="edit_Green"/>????
????????<MenuItem?name="Blue"?src="./images/blue.gif"??id="edit_Blue"/>????
????<MenuItem?name="Other<!--[if gte vml 1]><v:shapetype id="_x0000_t75"
coordsize="21600,21600" o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe"
filled="f" stroked="f">
<v:stroke joinstyle="miter" />
<v:formulas>
<v:f eqn="if lineDrawn pixelLineWidth 0" />
<v:f eqn="sum @0 1 0" />
<v:f eqn="sum 0 0 @1" />
<v:f eqn="prod @2 1 2" />
<v:f eqn="prod @3 21600 pixelWidth" />
<v:f eqn="prod @3 21600 pixelHeight" />
<v:f eqn="sum @0 0 1" />
<v:f eqn="prod @6 1 2" />
<v:f eqn="prod @7 21600 pixelWidth" />
<v:f eqn="sum @8 21600 0" />
<v:f eqn="prod @7 21600 pixelHeight" />
<v:f eqn="sum @10 21600 0" />
</v:formulas>
<v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect" />
<o:lock v:ext="edit" aspectratio="t" />
</v:shapetype><v:shape id="图片_x0020_1" o:spid="_x0000_i1025" type="#_x0000_t75"
alt="http://www.blogjava.net/Images/dot.gif" style='width:11.25pt;height:15pt;
visibility:visible;mso-wrap-style:square'>
<v:imagedata src="file:///C:\Users\orchid\AppData\Local\Temp\msohtmlclip1\01\clip_image001.gif"
o:title="dot" />
</v:shape><![endif]--><!--[if !vml]--><!--[endif]-->"?src=""?id="outher"?width="120px"?panelWidth="120">
????????<MenuItem?name="Yellow"?src="./images/yellow.gif"??id="edit_Yellow"/>????
????????<MenuItem?name="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
};