在这里简单介绍一下该树型结构的做法: 1 下载dtree.js文件和dree.css样式表文件以及一些树相关的图片。这里提供附件给大家下载
2 我们看看树的主要字段:
ID:主键 PID:父类ID NAME:结点名称 URL:结点连接的URL TITLE:类似ALT的一种结点显示内容 TARGET:连接打开的目标 ICON:图片文件,没有指定将使用默认的图片 ICONOPEN:打开结点后的图片文件,没有指定将使用默认的图片 OPEN:boolean类型,结点是否打开。 上面是用来显示的每个字段的含义,大家应该能看出其通用性了。
3 下面来看看树的组成文件:
< div class="dtree"> < %--接收从Action里传过来的集合,这个集合是封装了上面的一些属性--%> < logic:present name="treeCol"> < script type="text/javascript"> d = new dTree('d'); < logic:iterate id="treeList" name="treeCol"> < %--配合struts标签来添加树的结点--%> d.add(< bean:write name="treeList" property="id"/>,< bean:write name="treeList" property="superId"/>,'< bean:write name="treeList" property="name"/>','http://www.urlHere.com','','mainFrame','',''); < /logic:iterate> < %--在页面生成树结构--%> document.write(d); < /logic:present> < /script> < /div> < %----%>
只需要在action里组装需要显示的结点集合,配合迭代标签和即可实现动态树的生成了。。 另外,调用d.openAll();可以打开所有结点。 调用d.closeAll();可以关闭所有结点。 调用d.openTo(id);可以打开指定ID的结点 |