dtree数形控件(基础使用)

dtree数形控件(基础应用)
树形控件对于中大型Web项目是比价常用的。以此作为日志记录

如需转载,请注明出处.

核心部分,需要迭代的部分

tree.add(id,pid,name,url,title,target,icon,iconOpen,open);
id ：节点自身的id  (表中唯一主键值)
pid ：节点的父节点的id (可以作为外键对待)
name ：节点显示在页面上的名称
url ：节点的链接地址
title ：鼠标放在节点上所出现的提示信息
target ：节点链接所打开的目标frame（如框架目标mainFrame或是_blank,_self之类）
icon ：节点关闭时的显示图片的路径
iconOpen：节点打开时的显示图片的路径
open ：布尔型，节点是否打开（默认为false）
理解id和pid的交叉关系就比较简单了


静态生成树形目录

     d = new dTree('d');   
    d.add(0,-1,'My example tree');
    d.add(1,0,'Node 1','example01.html');
    d.add(2,0,'Node 2','example01.html');
    d.add(3,1,'Node 1.1','example01.html');
    d.add(4,0,'Node 3','example01.html');
    d.add(5,3,'Node 1.1.1','example01.html');
    d.add(6,5,'Node 1.1.1.1','example01.html');
    d.add(7,0,'Node 4','example01.html');
    d.add(8,1,'Node 1.2','example01.html');
    d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
    d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');
    d.add(11,9,'Mom\'s birthday','example01.html');
    d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');
    document.write(d);

程序中必须提供三个参数id,pid,name

从数据库中加载生成目录树

treeList是从struts中的Action取得的.

<script type="text/javascript">
  d = new dTree('d');
   <logic:iterate id="tree" name="treeList">
   <%--配合struts标签来添加树的结点--%>
    d.add(<bean:write name="tree" property="id"/>,<bean:write name="tree" property="pid"/>,'<bean:write name="tree" property="name"/>','javascript:showId(\'<bean:write name='tree' property='id'/>\')');
   </logic:iterate>
  <%--在页面生成树结构--%>
  document.write(d);

最终生成如下