以前搞tree,接觸的多的是 dtree,
dtree效果也還不錯(cuò),一下子將所有的節(jié)點(diǎn)從底到高,一級(jí)一級(jí)的遍歷,將基點(diǎn)一次性加載到客戶端,由客戶端來(lái)生成菜單,網(wǎng)上很多聲音說(shuō)不適合大型的應(yīng)用,對(duì)這種方式的菜單不喜歡的也很多;
還有一種方式是點(diǎn)一下加載該級(jí)菜單的子級(jí)菜單,再點(diǎn)再加載,避免了一次性加載數(shù)量過(guò)大的原因,但,這種方式將數(shù)據(jù)保存在服務(wù)端,也就是說(shuō)每次點(diǎn)擊都會(huì)請(qǐng)求服務(wù)器,也會(huì)很浪費(fèi)資源,
現(xiàn)在考慮的方式是,點(diǎn)擊一個(gè)節(jié)點(diǎn),加載這個(gè)節(jié)點(diǎn)下面的子級(jí)節(jié)點(diǎn)到客戶端,再點(diǎn)就不會(huì)去重復(fù)加載了,只加載沒(méi)有加載過(guò)的,即,將加載后的菜單保存到本地,這種方式,同時(shí)避免了dtree加載量大的問(wèn)題,也避免了重復(fù)加載的問(wèn)題,所以,還猶豫什么了,當(dāng)然選擇這個(gè)來(lái)作為我們的應(yīng)用了,說(shuō)到這里可能還不知道這個(gè)東西是啥,它叫“xloadtree”,是什么我就不再贅述,傳說(shuō)中CSDN的導(dǎo)航菜單也蠻不錯(cuò)的,感覺(jué)也是這種效果,是叫“梅花雪”的,什么的。
成功實(shí)現(xiàn)這樣一個(gè)樹菜單,我考慮的如下問(wèn)題:
1、數(shù)據(jù)來(lái)源于數(shù)據(jù)庫(kù)
2、解決常規(guī)性的問(wèn)題
3、能夠應(yīng)用到系統(tǒng)中去
1、先說(shuō)說(shuō)數(shù)據(jù)庫(kù)表結(jié)構(gòu)
數(shù)據(jù)庫(kù)名稱為 :Struts ,新建表名稱為 xloadtree,建表語(yǔ)句如下:
create table xloadtree(
xl_id int identity(1,1) primary key,--自增ID
xl_text varchar(50) default '',--節(jié)點(diǎn)名稱
xl_action varchar(200) default '',--節(jié)點(diǎn)地址
xl_target varchar(50) default '',--提交方式
xl_fatherid int default -1--上級(jí)結(jié)點(diǎn)
)
go
--drop table xloadtree
select * from xloadtree
go
--添加根節(jié)點(diǎn)
insert into xloadtree(xl_text,xl_action,xl_target,xl_fatherid)
values('中國(guó)','javascript:void(0);','',-1);
--添加第一級(jí)子節(jié)點(diǎn)
insert into xloadtree(xl_text,xl_action,xl_target,xl_fatherid)
values('北京','http://www.beijing.com','framecdd',1);
insert into xloadtree(xl_text,xl_action,xl_target,xl_fatherid)
values('湖北','http://www.hubei.com','framecdd',1);
--添加第二級(jí)子節(jié)點(diǎn)
insert into xloadtree(xl_text,xl_action,xl_target,xl_fatherid)
values('海淀區(qū)','http://www.hdq.com','framecdd',2);
insert into xloadtree(xl_text,xl_action,xl_target,xl_fatherid)
values('朝陽(yáng)區(qū)','http://www.cyq.com','framecdd',2);
insert into xloadtree(xl_text,xl_action,xl_target,xl_fatherid)
values('延慶區(qū)','http://www.yqq.com','framecdd',2);
insert into xloadtree(xl_text,xl_action,xl_target,xl_fatherid)
values('武漢市','http://www.wuhan.com','framecdd',3);
insert into xloadtree(xl_text,xl_action,xl_target,xl_fatherid)
values('襄樊市','http://www.xiangfan.com','framecdd',3);
insert into xloadtree(xl_text,xl_action,xl_target,xl_fatherid)
values('荊州市','http://www.jinzhou.com','framecdd',3);
--添加第4級(jí)子節(jié)點(diǎn)
insert into xloadtree(xl_text,xl_action,xl_target,xl_fatherid)
values('武昌','http://www.wuchangqu.com','framecdd',7);
insert into xloadtree(xl_text,xl_action,xl_target,xl_fatherid)
values('漢口','http://www.hankou.com','framecdd',7);
insert into xloadtree(xl_text,xl_action,xl_target,xl_fatherid)
values('老河口市','http://www.laohekou.com','framecdd',8);
insert into xloadtree(xl_text,xl_action,xl_target,xl_fatherid)
values('谷城縣','http://www.laohekou.com','framecdd',8);
--第一級(jí)菜單
insert into xloadtree(xl_text,xl_action,xl_target,xl_fatherid)
values('上海','http://www.shanghai.com','framecdd',1);
2、面向這個(gè)tree的JavaBean對(duì)象,如下:
package com.db;
public class TreeBean {
private int xl_id = 0;
private String xl_title = "";
private String xl_action = "";
private String xl_target = "";
private int xl_fatherid = 0;
public int getXl_fatherid() {
return xl_fatherid;
}
public void setXl_fatherid(int xl_fatherid) {
this.xl_fatherid = xl_fatherid;
}
public int getXl_id() {
return xl_id;
}
public void setXl_id(int xl_id) {
this.xl_id = xl_id;
}
public String getXl_target() {
return xl_target;
}
public void setXl_target(String xl_target) {
this.xl_target = xl_target;
}
public String getXl_title() {
return xl_title;
}
public void setXl_title(String xl_title) {
this.xl_title = xl_title;
}
public String getXl_action() {
return xl_action;
}
public void setXl_action(String xl_action) {
this.xl_action = xl_action;
}
}
3、數(shù)據(jù)庫(kù)現(xiàn)在給出的是2005的鏈接:
package com.db;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.ResultSetMetaData;
import java.sql.SQLException;
public class DBManager {
private final static String DRIVER_NAME = "com.microsoft.sqlserver.jdbc.SQLServerDriver";
private final static String URL = "jdbc:sqlserver://localhost:1433;databasename=Struts;";
private final static String USERNAME = "sa";
private final static String PASSWORD = "";
public static Connection getConnection(){
Connection conn = null;
try {
Class.forName(DRIVER_NAME);
conn = DriverManager.getConnection(URL, USERNAME, PASSWORD);
} catch (Exception e) {
System.out.println("打開數(shù)據(jù)庫(kù)鏈接異常...");
e.printStackTrace();
}
return conn;
}
public static void Close(Connection conn){
if(conn!=null)
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
/**
* @param args
* @throws Exception
*/
public static void main(String[] args) throws Exception {
}
}
4、顯示tree的頁(yè)面代碼為:
<%@ page language="java" pageEncoding="UTF-8"%>
<jsp:directive.page import="com.db.DBManager" />
<jsp:directive.page import="java.sql.Connection" />
<jsp:directive.page import="java.sql.PreparedStatement" />
<jsp:directive.page import="java.sql.ResultSet" />
<jsp:directive.page import="com.db.TreeBean" />
<jsp:directive.page import="java.util.ArrayList" />
<%
Connection conn = DBManager.getConnection();
String sql = "select top 1 * from xloadtree where xl_fatherid = -1 union all select * from xloadtree where xl_fatherid = 1";
PreparedStatement pst = conn.prepareStatement(sql);
ResultSet rs = pst.executeQuery();
ArrayList<TreeBean> arrayList = new ArrayList<TreeBean>();
while (rs!=null&&rs.next()) {
TreeBean bean = new TreeBean();
bean.setXl_id(rs.getInt(1));
bean.setXl_title(rs.getString(2));
bean.setXl_action(rs.getString(3));
bean.setXl_target(rs.getString(4));
bean.setXl_fatherid(rs.getInt(5));
arrayList.add(bean);
}
rs.close();
pst.close();
DBManager.Close(conn);
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>例子</title>
<script type="text/javascript" src="/xloadtree/xloadtree/xtree.js"></script>
<script type="text/javascript" src="/xloadtree/xloadtree/xmlextras.js"></script>
<script type="text/javascript" src="/xloadtree/xloadtree/xloadtree.js"></script>
<script type="text/javascript" src="/xloadtree/xloadtree/json_parse.js"></script>
<script type="text/javascript" src="/xloadtree/xloadtree/json2.js"></script>
<link rel="stylesheet" type="text/css"
href="/xloadtree/xloadtree/xtree.css" />
</head>
<body>
<%
TreeBean first = arrayList.get(0);
%>
<script type="text/javascript">
try{
var tree = new WebFXLoadTree("<%=first.getXl_title() %>","loadtree.jsp?xl_id=1");
<%
StringBuilder sb = new StringBuilder();
sb.append("[");
for(int i=1;i<arrayList.size();i++){
TreeBean bean = arrayList.get(i);
if(i==arrayList.size()){
sb.append("{\"text\":\"" + bean.getXl_title() + "\",\"action\":\"" + bean.getXl_action() + "\",\"target\":\"" + bean.getXl_target() + "\",\"src\":\"loadtree.jsp?xl_id=" + bean.getXl_id() + "\"}");
}else{
sb.append("{\"text\":\"" + bean.getXl_title() + "\",\"action\":\"" + bean.getXl_action() + "\",\"target\":\"" + bean.getXl_target() + "\",\"src\":\"loadtree.jsp?xl_id=" + bean.getXl_id() + "\"},");
}
%>
<%
}
sb.append("]");
%>
document.write(tree);
}catch(e){
alert(e.description);
}
</script>
<iframe frameborder="1" align="right" src="#" name="framecdd" id="framecdd" width="60%" height="60%"></iframe>
</body>
</html>
5、加載子級(jí)tree節(jié)點(diǎn)的頁(yè)面代碼為:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<jsp:directive.page import="java.sql.Connection"/>
<jsp:directive.page import="com.db.DBManager"/>
<jsp:directive.page import="java.sql.PreparedStatement"/>
<jsp:directive.page import="java.sql.ResultSet"/>
<%
String reqxl_id = request.getParameter("xl_id")==null?"0":request.getParameter("xl_id");
Connection conn = DBManager.getConnection();
String sql = "select * from xloadtree where xl_fatherid = " + reqxl_id;
PreparedStatement pst = conn.prepareStatement(sql,1005,1007);
ResultSet rs = pst.executeQuery();
rs.last();
int counts = rs.getRow();
int num = 1;
StringBuilder sb = new StringBuilder();
sb.append("[");
rs.absolute(0);
while(rs!=null&&rs.next()){
int id = rs.getInt(1);
String text = rs.getString(2);
String action = rs.getString(3);
String target = rs.getString(4);
int father = rs.getInt(5);
if(num==counts){
sb.append("{\"text\":\"" + text + "\",\"action\":\"" + action + "\",\"target\":\"" + target + "\",\"src\":\"loadtree.jsp?xl_id=" + id + "\"}");
}else{
sb.append("{\"text\":\"" + text + "\",\"action\":\"" + action + "\",\"target\":\"" + target + "\",\"src\":\"loadtree.jsp?xl_id=" + id + "\"},");
}
num++;
}
sb.append("]");
rs.close();
pst.close();
conn.close();
out.println(sb.toString());
%>
就這么點(diǎn)點(diǎn),當(dāng)然了,除了這部分的東西,當(dāng)然還需要xloadtree這部分的東西了。
運(yùn)行效果如圖:
看到這個(gè)效果圖,會(huì)感覺(jué)跟dtree或其他的沒(méi)什么區(qū)別,呵呵,可別看小了這點(diǎn)。有學(xué)問(wèn)的。
以上的例子,只為實(shí)現(xiàn)功能,部分代碼寫的不夠合理,這里旨在實(shí)現(xiàn)。
這個(gè)控件實(shí)現(xiàn)的樹,無(wú)限極的就不用說(shuō)了,點(diǎn)擊加載的時(shí)候有 loading...效果,其中有個(gè)問(wèn)題,就是根節(jié)點(diǎn)的子節(jié)點(diǎn),也就是第二級(jí)節(jié)點(diǎn)不好做,這里也實(shí)現(xiàn)了。
聯(lián)系客服