使用DTree创建树
附件中的压缩包是一个使用dtree构建树的小例子.解压后的结构为:tree
|____img(文件夹,用于存放与树有关的图片,图片的名字应与dtree.js中的定义保持一致)
|____dtree.css(用于定义生成树的样式)
|____dtree.js(用于成生树的JS代码文件)
|____tree.html(测试页面)
其中,tree.html的代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>无标题文档</title><link rel="StyleSheet" href="dtree.css" type="text/css" /> <script type="text/javascript" src="dtree.js"></script> <script type="text/javascript"> tree = new dTree('tree'); tree.add("0","-1","A","","","","","",true);tree.add("1","0","B","","","","","",true); tree.add("2","1","C-1","","","","","",true); tree.add("3","1","D-1","","","","","",true); tree.add("4","2","C-2","","",""); tree.add("5","2","C-3");tree.add("6","3","D-2","","","","","",true); tree.add("7","3","D-3","","","","","",true); tree.add("8","3","D-4","","","","","",true); tree.add("9","3","D-5","","",""); tree.add("10","3","D-6"); document.write(tree); </script> </head><body></body></html>
其中:tree.add()方法中各参数的定义如下:
第一个参数:表示当前节点的ID
第二个参数:表示当前节点的父节点的ID,根节点的值为 -1
第三个参数:节点要显示的文字
第四个参数:节点的Url
第五个参数:鼠标移至该节点时节点的Title
第六个参数:节点的target
第七个参数:用做节点的图标,节点没有指定图标时使用默认值
第八个参数:用做节点打开的图标,节点没有指定图标时使用默认值
第九个参数:判断节点是否打开
效果图如下:
http://dl.iteye.com/upload/attachment/148244/97faaf8f-dff8-3c58-8efa-64164a09e0f2.jpg
页:
[1]