求在JSP中显示树形结构（在线等）。。。。。

luoping007 2008-12-18 12:34:20
怎么在jsp中显示树形结构呢·~？树形结构的内容是从数据库里读出来的哦。哥哥姐姐们。。怎么实现呢·？
有相关的代码的可直接发给我吗？luoping824@163.com。。谢谢了。。
...全文
1328 11 打赏 收藏 转发到动态 举报
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
aixiaorenzhe123 2009-08-03
  • 打赏
  • 举报
 回复
一点小问题！


<%@page import="treeUtil.*" %>

<html>

<head>

<link rel="StyleSheet" href="dtree.css" type="text/css" />

<script type="text/javascript" src="dtree.js"> </script>

</head>

<body>

come out!!

<div class="dtree">

<script type="text/javascript">

	<%=TreeUtil.createTreeInfo(TreeUtil.retrieveNodeInfos())

	%>

	document.write(d);

	</script>

</div>

</body>

</html>
jabeginner 2008-12-19
  • 打赏
  • 举报
 回复
个人习惯是喜好用menutree，但是遗憾的是数据是固定的，并非从数据库里读取
sunwei_07 2008-12-19
  • 打赏
  • 举报
 回复
例子发给你了，LZ查收
yefengstar 2008-12-19
  • 打赏
  • 举报
 回复
楼上的兄弟能给个例子吗
我不懂这种方法
wobushihengheng 2008-12-19
  • 打赏
  • 举报
 回复
在数据库中建一个树表,设主键，父结点ID，是否为叶子结点，为几级目录等等，然后在连接数据库得到数据，用递归算法得到一个JS，放到JSP定义好的DIV中
lvkai0452 2008-12-19
  • 打赏
  • 举报
 回复
不错收藏了
zou_wei_forever 2008-12-19
  • 打赏
  • 举报
 回复
动态生成：
1）在数据库建tree_info表，有nodeId，parentNodeId，nodeName，nodeUrl四个字段，来存储节点信息。
2）编写java类，用于从数据库找出节点信息，并且生成javascript脚本。


详细过程:
1）在数据库建表，脚本如下(以mysql为例)：
CREATE TABLE 'test'.'tree_info' (
'node_id' INTEGER UNSIGNED NOT NULL DEFAULT -1,
'parent_id' INTEGER UNSIGNED NOT NULL DEFAULT -1,
'node_name' VARCHAR(45) NOT NULL,
'ref_url' VARCHAR(45) NOT NULL,
PRIMARY KEY('node_id')
)
2）编写TreeInfo.java，这个类用于封装节点信息
package com.diegoyun.web.tree;
/**
* @author Diegoyun
* @version 1.0
*/
public class TreeInfo {
private int nodeId = -1;//node id
private int parentId = -1;//parentId
private String nodeName = null;//node name
private String url = null;//url references
public int getNodeId() {
return nodeId;
}
public void setNodeId(int nodeId) {
this.nodeId = nodeId;
}
public int getParentId() {
return parentId;
}
public void setParentId(int parentId) {
this.parentId = parentId;
}
public String getNodeName() {
return nodeName;
}
public void setNodeName(String nodeName) {
this.nodeName = nodeName;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
}


编写TreeUtil.java，用于从数据库得到节点信息，封装到TreeInfo对象，并生成javascript脚本
TreeUtil.java
package com.diegoyun.web.tree;
import java.util.Collection;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.Connection;
import java.sql.DriverManager;
/**
* @author Diegoyun
* @version 1.0
*/
public class TreeUtil {
public static List retrieveNodeInfos(){
List coll = new ArrayList();
String driverName = "com.mysql.jdbc.Driver";
String host = "localhost";
String port = ":3306";
String serverID = "test";
String userName = "root";
String userPwd = "root";
String url = "jdbc:mysql://" + host + port + "/" + serverID ;
Connection conn = null ;
PreparedStatement ps = null;
ResultSet rs = null;
try{
Class.forName(driverName).newInstance();
conn = DriverManager.getConnection(url , userName , userPwd);
String sql = "select * from tree_info";
ps = conn.prepareStatement(sql);
rs = ps.executeQuery();
TreeInfo info = null;
while(rs!=null && rs.next()){
info = new TreeInfo();
info.setNodeId(rs.getInt(1));
info.setParentId(rs.getInt(2));
info.setNodeName(rs.getString(3));
info.setUrl(rs.getString(4));
coll.add(info);
}
// if(rs!=null){
// rs.close();
// rs=null;
// }
// if(ps!=null){
// ps.close();
// ps=null;
// }
}catch(Exception e){
System.out.println(e);
}

return coll;
}

public static String createTreeInfo(List alist){
StringBuffer contents = new StringBuffer();
contents.append("d = new dTree('d');");
TreeInfo info =null;
for(int max = alist.size(),i=0;i<max;i++){
info = (TreeInfo)alist.get(i);
contents.append("d.add("+info.getNodeId()+","+info.getParentId()+","+"'"+info.getNodeName()+"',"+"'"+info.getUrl()+"');\n");
}
return contents.toString();
}
}


这样在jsp页面中,这样调用：

<html>
<head>
<link rel="StyleSheet" href="dtree.css" type="text/css" />
<script type="text/javascript" src="dtree.js"> </script>
</head>
<body>
<script>
<% =TreeUtil.createTreeInfo(retrieveNodeInfos()) %> </script>
</body>
<html>
zou_wei_forever 2008-12-19
  • 打赏
  • 举报
 回复
dtree主页：http://destroydrop.com/javascripts/tree/ (下载地址在右上角)
下载后主要用到dtree.js和dtree.css


使用说明：

<html>
<head>
<link rel="StyleSheet" href="dtree.css" type="text/css" />
<script type="text/javascript" src="dtree.js"></script>
</head>
<body>
<div class="dtree">
<script type="text/javascript">
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);
</script>
</div>
</body>
</html>


参数说明：

id ：节点自身的id

pid ：节点的父节点的id

name ：节点显示在页面上的名称

url ：节点的链接地址

title ：鼠标放在节点上所出现的提示信息

target ：节点链接所打开的目标frame（如框架目标mainFrame或是_blank,_self之类）

icon ：节点关闭时的显示图片的路径

iconOpen：节点打开时的显示图片的路径

open ：布尔型，节点是否打开（默认为false）

注：open项：顶级节点一般采用true，即pid是－1的节点


1：默认值的书写规则（从左至右，依次省略）

即 d.add(id,pid,name,url);后面5个参数可以省略

2：有间隔时的默认值（如存在第6个参数，但第5个参数想用默认值）

即 tree.add(id,pid,name,url,"",target);必须这样写

其他 tree.add(id,pid,name,url,"","","","",true);
wjpp0000 2008-12-19
  • 打赏
  • 举报
 回复
表结构：表 fso_sdept， 字段 dept_id（部门ID）、dept_name（部门名称）、dept_p_id（父部门ID）

包含父部门和子部门
select dept_id,dept_name from fso_sdept where dept_stat=1
start with dept_id=1129 connect by prior dept_id=dept_p_id

不包含父部门只包含子部门
select dept_id,dept_name from fso_sdept where dept_stat=1
start with dept_p_id=1129 connect by prior dept_id=dept_p_id
RJCHEN1985 2008-12-18
  • 打赏
  • 举报
 回复
用梅花雪构件，或者jtreeview组件，会有相应的示例

直接在页面写的写法如下：
<c:forEach items="${dicts}" var="item">
<div id="dict${item.id}" style="width:100%" onMouseOver="this.style.cursor='pointer'; this.style.background='#F8F2CD'" onMouseOut="this.style.background='#FFFFFF'" onClick="showDict(${item.id},1)">${item.name}</div>
<c:if test="${not empty param.keyword}">
<script>display('${item.id}','${param.keyword}');</script>
</c:if>
<c:forEach items="${item.dicts}" var="item2">
<div id="dict${item2.id}" style="width:100%" onMouseOver="this.style.cursor='pointer'; this.style.background='#F8F2CD'" onMouseOut="this.style.background='#FFFFFF'" onClick="showDict(${item2.id},2)">├─${item2.name}</div>
<c:if test="${not empty param.keyword}">
<script>display('${item2.id}','${param.keyword}');</script>
</c:if>
<c:forEach items="${item2.dicts}" var="item3">
<div id="dict${item3.id}" style="width:100%" onMouseOver="this.style.cursor='pointer'; this.style.background='#F8F2CD'" onMouseOut="this.style.background='#FFFFFF'" onClick="showDict(${item3.id},3)">    ├─${item3.name}</div>
<c:if test="${not empty param.keyword}">
<script>display('${item3.id}','${param.keyword}');</script>
</c:if>
<c:forEach items="${item3.dicts}" var="item4">
<div id="dict${item4.id}" style="width:100%" onMouseOver="this.style.cursor='pointer'; this.style.background='#F8F2CD'" onMouseOut="this.style.background='#FFFFFF'" onClick="showDict(${item4.id},4)">        ├─${item4.name}</div>
<c:if test="${not empty param.keyword}">
<script>display('${item4.id}','${param.keyword}');</script>
</c:if>
</c:forEach>
</c:forEach>
</c:forEach>
</c:forEach>
lanzhengwu 2008-12-18
  • 打赏
  • 举报
 回复 


<script type="text/javascript">

		<!--



		d = new dTree('d');

		d.add('n',-1,'系统管理');

		d.add(1,'n','用户管理','#');

		d.add('a',1,'用户管理','','right_body');

		d.add('a1',1,'用户增加','','right_body');

		d.add('a2',1,'用户删除','','right_body');

		d.add('a3',1,'用户修改','','right_body');

		d.add('a3',1,'','','right_body');



		d.add(4,'n','客户管理','#');	

		d.add("c",4,'客户资料',"../Business Management/UserInfo.html","客户资料","right_body");

		d.add("c1",4,'个人收费',"../Business Management/PersonPay.html","个人收费","right_body");

		d.add("c2",4,'批量收费',"../Business Management/BatchPay.html","批量收费","right_body");

		d.add("c3",4,'用户黑名单',"../Business Management/Users_Debts_Query.html","用户黑名单","right_body");

		d.add("c4",4,'到期用户',"../Business Management/User_Query1.html","用户信息查询","right_body");

		d.add("c5",4,'上门收费录入',"../Business Management/Onsitecharges.html","模拟上门收费录入","right_body");

		d.add("c7",4,'批量档案录入',"../Business Management/Users_Batchfiles.html","模拟批量档案录入","right_body");

		d.add("c9",4,'用户批量修改',"../Business Management/User_Update.html","模拟用户批量修改","right_body");

		d.add("c10",4,'柜台收费清单',"../Business Management/PayList.html","柜台收费清单","right_body");

		document.write(d);



		//-->

	</script>

上面是DTREE显示树的代码 ..
推荐下DTREE吧 ...去下一个dtree.js 和 dtree.css
jsp 树形结构DIV+CSS+XML
1,picPath：图片路径，默认是为”JTree/” 2,clickItem：当前树中，被点击的节点。clickItem是一个treeNode类型的Object。 3,selectNode：当前树中，被点击的节点所对应的XML节点（即：一个XML对象）。 4, CAPTIONATT：要以哪个XML节点的属性值做为caption显示。 5, ICONATT：以以哪个XML节点的属性值做为树枝（叶）的显示图标的地址。
菜单树（树数据结构+JSP页面递归调用构建菜单树）
在Java程序中构建一个菜单树，将根节点root放到request中 然后在JSP页面中通过JSP递归调用显示菜单树
dhtmltree+java（strtus）获得指定目录下系统结构并进行递归显示
把指定目录下的目录结构以树形结构显示到jsp页面（动态加载） dhtmltree+strtus2实现
野蔷薇社区论坛JSP版
程序简介： 社区文章采用的是平板、树形自由选择的两种展示方式，社区整体布局采用左右分帧，这样的结构更适合版面较多的网站使用！ 社区支持无限级分类，左侧工具栏静态化再多的版面也不会影响速度。 大量的使用高性能缓存使得软件在高并发下对数据库的压力降到最低！支持分布式Cache! 软件经过优秀的用户体验专家和交互设计师指点注重每一个细节的设计! DIV+CSS架构页面，使得更换样式变得异常简单，让网友浏览大数据量网页没有卡住的感觉！ 细心的人会发现，我们在浏览器兼容方面所做的努力，社区99%以上的页面是完全兼容IE、friefox、oprea等主流浏览器的！ 论坛设置了些好玩的快捷键比如alt+enter发帖、alt+i进入个人信息页、alt+m提取短消息等等... 社区依据SNS理念设计用户，你不仅可以看到最近谁加你为好友，且可以看到好友最近发表的文章、好友最近参与的文章以及你最近被回复的文章等信息，极大的增加了交互性！ 优秀的个性化配置设计，每个人都可以设置Email过滤级别、短消息过滤级别、发表文章成功后跳转到的页面、登录成功后跳转到的页面、收件箱，发件箱每页显示短消息的数量等，增加了软件的友好性，充分体现以用户为中心的产品设计！
jQuery File Tree 多功能树形菜单插件
内容索引:脚本资源,jQuery,目录树,树形菜单,jQuery插件　　jQuery File Tree 是基于jQuery的多级、多功能树形菜单插件，可以很方便的应用在ASP/PHP/，界面精致，结构与数据分离，自动获取图标格式并调用对应图标显示，整体看上去干净整洁，又很专业。源码包中附带了ASP/PHP/JSP等不同语言的使用实例，供您参考。
Web 开发

81,092

社区成员

341,717

社区内容

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章