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]-->![http://www.blogjava.net/Images/dot.gif]()
<!--[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
};
分享到：
相关推荐
这个例子展示了如何简单地使用Dhtmlxtree，并且利用XML数据来构建树节点。 首先，我们需要理解Dhtmlxtree的核心概念。Dhtmlxtree是一个客户端的组件，它不依赖服务器端技术，如PHP或ASP.NET，而是通过JavaScript...
示例代码中引用了dhtmlXTree.css、dhtmlXCommon.js、dhtmlXTree.js和jQuery库。这些文件包含了树形结构的样式和核心功能实现。 2. **实例化树形结构**： 使用`new dhtmlXTreeObject("bodydata","100%","100%",0)`...
因此，你需要将解压后的文件上传至Web服务器，或者使用本地开发服务器（如Apache、Nginx、Node.js的http-server等）来运行这些示例。 通过深入学习和理解这些示例，开发者不仅可以掌握dhtmlXTree的基本用法，还能...
在实际使用中，例如dhtmlxCalendar指南和代码示例中，会详细介绍如何初始化和配置这个日历组件。dhtmlxCalendar主要特点包括： 1. **核心功能**：提供日期选择、事件标记、多种视图（如日视图、周视图、月视图）等...
在提供的压缩包文件列表中，我们看到一个名为`dhtmlxtreeTest`的文件或文件夹，这很可能是该项目的源代码或者示例。这个项目可能包含了HTML、CSS和JavaScript文件，展示了如何集成dhtmlxtree并使用JSON数据来构建和...
- **docsExplorer**：可能是一个示例或工具，用于演示如何使用dhtmlxTree来构建文档浏览器。 - **libCompiler**：可能是编译或打包工具，用于处理dhtmlxTree库的源代码和资源。 **5. 学习资源** - `index.html` ...
【标题】"dhtmlxtree的一个实用demo"指的是一个基于dhtmlxtree的示例应用，这个示例可能展示了如何在网页中实现交互式的树形数据结构，用于展示层次化的信息，比如目录结构、组织架构或者权限管理等。dhtmlxtree是一...
为了更好地理解和使用dhtmlxTree，可以参考`docsExplorer`中的文档，了解详细功能和具体用法。`readme.txt`可能包含了关于如何开始和版本信息等内容，而`index.html`通常是一个示例页面，展示了dhtmlxTree的不同功能...
压缩包中的`docsExplorer`目录包含了详细的API文档和示例，帮助开发者了解如何使用dhtmlxTree的各种功能。同时，`index.html`和`readme.txt`文件提供了一些基础信息和快速入门指南。 **6. 库集成** dhtmlxTree 3.6...
dhtmlXTree1.6是一个强大且易于使用的JavaScript组件，为Web开发人员提供了构建交互式树状结构的工具。其丰富的特性、良好的文档支持和广泛的社区资源使其成为实现树形数据展示的理想选择。通过熟练掌握dhtmlXTree的...
描述中的链接提到了CSDN博客文章，其中详细介绍了如何使用XML HTTP请求来调用DhtmlxTree。通过XML，开发者可以动态地从服务器获取和显示数据，增强了树结构的实时性。这种技术基于AJAX（Asynchronous JavaScript and...
1. **安装**: 下载并解压dhtmlxTree v2.1压缩包，包含JavaScript库文件和示例代码，开发者可以根据需要引入相应文件。 2. **配置**: 在HTML中创建一个div元素作为树的容器，并设置相应的ID。然后在JavaScript中实例...
DHTMLXTree 可以与多种服务器端技术集成，以下是一些例子： 1. **PHP 示例**： - PHP 脚本可以生成 XML 数据，供客户端加载。 ```php if (stristr($_SERVER["HTTP_ACCEPT"], "application/xhtml+xml")) { ...
【基于dhtmlxtree构建动态维护树】 dhtmlxtree是一款强大的JavaScript库，用于创建交互式的树状数据结构，常用于构建网站的导航菜单、文件系统或者任何需要层次结构展示的数据。它支持多种操作，包括添加、删除、...
**docsExplorer**：可能是一个文档浏览器或者一个包含组件使用方法和示例的资源文件夹，帮助开发者更好地理解和学习dhtmlxTree。 **dhtmlxtree_std_full.zip**：这是dhtmlxTree标准版的完整包，包含所有必要的文件...
- 示例和演示：展示了如何使用dhtmlxtree的各种特性和功能。 - 文档：可能包括API参考和用户指南，帮助开发者更好地理解和使用dhtmlxtree。 - 图标和其他资源：用于节点的图标和其他视觉元素。 通过深入研究这个...