web中tree的应用非常广泛,动态tree的实现也是多种多样,这里主要是写下我用mztreeview(梅花雪大侠所写)的jsp例子.
梅大侠的文档中给了个asp的例子,但是在jsp中如何应用呢?熟知asp和jsp的人可以很好的把程序移植,但是对于不是同时很熟悉这2中语言的人来说,有一个jsp例子,会方便很多.
1.首先,下载控件,MzTreeView10
2.(最好)将控件放到工程目录下
3,建立数据库
create table tree
(
id int primary key,
parentId int,
text varchar(50),
hint varchar(100),
icon varchar(20),
data varchar(20),
url varchar(50),
target varchar(20),
method varchar(50)
)
然后往数据库中插入数据,
注意:mztreeview默认一个须根节点,其父节点值是0
4,做数据服务层
这个是关键,树的动态生成一半要靠它(另一半借助javascript代码),这个类的主要方法是要生成要生成树的数据所需的数据,其中Contants.treeName是个常量,这个要与界面上定义的mztreeview对象的名称一致
import java.sql.ResultSet;
import java.sql.SQLException;
import com.xaccp.qingyun.db.DBManager;
import com.xaccp.qingyun.entity.Contants;
import com.xaccp.qingyun.exception.MyException;
import com.xaccp.qingyun.factory.DBFactory;
import java.util.*;
public class TreeService {
DBManager dm=null;
public String getTree() throws MyException
{
//DBFactory是我写的一个工厂类,DBManager是个底层数据库操纵类
//用到的几个方法根据方法名也能理解,就不多说了
dm=DBFactory.createDBManager();
String sql="select * from shelf";
try {
dm.createPreparedStatement(sql);
ResultSet rs=dm.executeQueryPrepareStatement();
String tree="";
while(rs.next())
{
String id=String.valueOf(rs.getInt("id"));
String pid=String.valueOf(rs.getInt("parentId"));
String text=rs.getString("text");
String hint=rs.getString("hint");
String url=rs.getString("url");
String target=rs.getString("target");
tree +="\n"+Contants.treeName+".nodes[\""+pid+"_"+id+"\"]=\"";
//这里我只做了几个判断,其他的自己做判断就行
if(text !=null && text.trim()!="")
{
tree +="text:"+text+";";
}
if(hint!=null && hint.trim().equals(""))
{
tree +="hint:"+hint+";";
}
if(url!=null && url.trim().equals(""))
{
tree +="url:"+url+";";
}
if(target!=null && target.trim().equals(""))
{
tree +="target:"+target+";";
}
tree +="\"";
}
return tree;
} catch (Exception e) {
throw new MyException("can't create tree"); //MyException是我定义的异常类
}
finally
{
dm.closeDB();
}
}
5,做界面层
这时候有几点要非常注意,1,编码一定要用GBK(这个我尝试了好久,只有GBK才能正常显示)
2.树的名字要跟Contants.treeName常量的值一样
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<jsp:directive.page import="com.xaccp.qingyun.bean.TreeService"/>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<title>梅花雪中文网 - 网页脚本控件集 MzTreeView10</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="author" content="黄方荣(meizz·梅花雪)://www.meizz.com">
<script language="JavaScript" src="MzTreeView10/MzTreeView10.js"></script>
<!--link href="http://www.meizz.com/Scripts/Global.css" type="text/css" rel="stylesheet"-->
<style>
A.MzTreeview
{
font-size: 9pt;
padding-left: 3px;
}
</style>
</head>
<body bgcolor="#FFFFDB" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<SCRIPT LANGUAGE="JavaScript">
<!--
window.tree = new MzTreeView("tree");
tree.icons["property"] = "property.gif";
tree.icons["css"] = "collection.gif";
tree.icons["book"] = "book.gif";
tree.iconsExpand["book"] = "bookopen.gif"; //展开时对应的图片
tree.setIconPath("MzTreeView10/"); //可用相对路径
<%
TreeService ts=new TreeService();
String tree=ts.getTree();
out.print(tree);
%>
tree.setURL("#");
tree.setTarget("MzMain");
document.write(tree.toString()); //亦可用 obj.innerHTML = tree.toString();
//-->
</SCRIPT>
</body>
</html>
6,到此一棵动态,无限级别的动态树就在jsp中生成了,下面是效果图