dhtmlxTree树形菜单简单试用

最新推荐文章于 2019-01-13 06:54:31 发布

notedd

最新推荐文章于 2019-01-13 06:54:31 发布

阅读量204

点赞数

分类专栏：脚本语言文章标签： CSS HTML XHTML XML Blog

脚本语言专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何使用dhtmlxTree组件创建一个简单的树形结构展示，包括下载、安装、配置及基本操作。通过提供的示例代码，读者可以快速上手并应用于实际项目中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考原文地址：http://www.po-soft.com/blog/xuan/392.html

下载地址： http://www.po-soft.com/download.po?fileId=124

下载后解压 dhtmlxTree.rar 文件，得到dhtmlxTree\codebase文件夹,我试用的就是引入的codebase中的文件。

建立测试目录结构：

testdhtmlxTree                        文件夹
    ......index.html                    文件
    ......dhtmlxTree                  文件夹
    ...............codebase           文件夹

index.html内容如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试dhtmlxTree</title>
<link  rel="stylesheet" type="text/css"  href="dhtmlxTree/codebase/dhtmlxtree.css">
<script  src="dhtmlxTree/codebase/dhtmlxcommon.js"></script>
<script  src="dhtmlxTree/codebase/dhtmlxtree.js"></script>
</head>
<body>
<table>
	<tr>
		<td valign="top">
			<div id="treeboxbox_tree" style="width:250; height:218;background-color:#f5f5f5;border:1px solid Silver;"></div>
		</td>
	</tr>
</table>
<script>
		tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
		tree.setImagePath("dhtmlxTree/codebase/imgs/");
		tree.enableDragAndDrop(0);
		tree.enableTreeLines(false);
		tree.setImageArrays("plus","","","","plus.gif");
		tree.setImageArrays("minus","","","","minus.gif");
		//tree.setStdImages("book.gif","books_open.gif","books_close.gif");	
		//tree.setXMLAutoLoading("tree4.xml");
		//tree.loadXML("tree4.xml");
		//tree.insertNewItem(parentId,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs)
		tree.insertNewItem(0,1,'区域管理','','','','','','');
		tree.insertNewChild(1,2,'北京');
		tree.insertNewChild(1,3,'天津');
		tree.insertNewChild(1,4,'上海');
		tree.insertNewChild(1,5,'湖南');
		tree.insertNewChild(1,6,'广西');
		tree.insertNewChild(4,7,'徐家汇');
		tree.insertNewChild(4,8,'百老会');
		tree.insertNewChild(4,9,'不清楚');
		tree.insertNewChild(4,10,'哈哈哈');
		tree.setOnClickHandler(test);
		function test(){
			var text= tree.getSelectedItemText(); 
			alert(text);
		}
</script>
</body>
</html>

效果图如下：