Dtree动态生成树

 

一、dtree简介

dtree是一个由js编写的简单的树形菜单组件。目前免费且开源，不需要复杂的操作即可生产，同时支持动态生成树。

二  特性

        - Unlimited number of levels(无限分级)

　　- Can be used with or without frames(可用于框架或非框架页面)

　　- Remembers the state of the tree between pages(在不同页面之间可记住当前状态)

　　- Possible to have as many trees as you like on a page(可以得到你想要数量的树型)

　　- All major browsers suported(支持的浏览器)

　　Internet Explorer 5+ Netscape 6+ Opera 7+ Mozilla

　　- Generates XHTML 1.0 strict validated output(严格支持XHTML 1.0)

　　- Alternative images for each node(每个节点用图片代替)

三、常用方法和配置

add(parameters)

　　添加一个树节点，实际参数有9个add(id,pid,name,url,title,target,icon,iconOpen,open);

　　

位置	参数别名	类型	功能
1	id	int	节点自身的id(唯一)
2	pid	int	节点的父节点id
3	name	string	节点显示在页面上的名称
4	url	string	节点的链接地址
5	title	string	鼠标放在节点上显示的提示信息
6	target	string	节点链接所打开的目标frame
7	icon	string	节点关闭状态时显示的图标
8	iconOpen	string	节点打开状态时显示的图标
9	open	bool	节点第一次加载是否打开

　　注：dtree.js文件中约87－113行是一些默认图片的路径，可以自己配置图片和路径。

openAll()

　　打开全部节点，可在树对象创建前或创建后调用

closeAll()

　　关闭全部节点，可在树对象创建前或创建后调用

openTo(id,select)

　　打开指定id的节点，可以传两个参数：

　　id 指定需要打开的节点的唯一id

　　select 是否让该节点处于选中状态

config配置

　　

变量	类型	默认值	描述
target	string	所有节点的target
folderLinks	bool	true	文件夹可被链接
useSelection	bool	true	节点可被选择高亮
useCookies	bool	true	树可以使用cookie记住状态
useLines	bool	true	创建带结构连接线的树
useIcons	bool	true	创建带有图表的树
useStatusText	bool	false	用节点名替代显示在状态栏的节点url
closeSameLevel	bool	false	同级节点只允许一个节点处于打开状态
inOrder	bool	false	加速父节点树的显示

　　【例】tree.config.closeSameLevel=true;表示打开某级节点时，该级其他处于打开状态的同级节点会被关闭。

　　具体配置功能请参照官网实例。

四、dtree使用

1.引入dtree.js文件和dtree.css文件

2.编写代码

<script>

           var d = new dTree('d');

           d.add(0,-1,"菜单");

           d.add(0001,0,"菜单一","javascript:onClickTreeNode(0001,0,'菜单一);");

           //开始构造树

           <%

              List list=(List)request.getAttribute("allList");//此处allList为从后台传过来的列表

              for(int i=0;i<list.size();i++){

                  FileBean fb=(FileBean)list.get(i);

                  String id=fb.getFile_class_id();

                 

                  String pid=fb.getParent_file_class_id();

                  String name=fb.getFile_class_name();

           %>

    d.add(<%=id%>,<%=pid%>,'<%=name%>',"javascript:onClickTreeNode(<%=id%>,<%=pid%>,'<%=name%>');");

           <%

              }

           %>

function onClickTreeNode(id,pid,name)

  {

    getData(id,pid,name);

  }

//将树写到页面上

document.write(d);

</script>

五、常见问题

Dtree未定义：说明dtree.js和dtree.css文件引入路径不正确