今天研究了很久,终于把动态加载无刷新树给整出来了,反正刚开始也是在网上搜了很多东东,但感觉都不太方便,最后找到了dtree,又发现一位朋友把dtree的源代码进行了更改,(dtree发布于2003年,那时编写这个javascript脚本的作者估计还不知道ajax这玩意吧,呵呵),就可以实现无刷新动态加载了,废话不说,先把例子整理出来先!
首先是Sql脚本(MSSQL)
IF
EXISTS
(
SELECT
*
FROM
SYSOBJECTS
WHERE
NAME
=
'
PERMISSION
'
)
DROP TABLE PERMISSION
CREATE TABLE PERMISSION
(
PERMISSION_ID INT IDENTITY PRIMARY KEY ,
PERMISSION_NAME VARCHAR ( 20 ) NOT NULL ,
PARENT_ID INT
)
GO
ALTER TABLE PERMISSION ADD CONSTRAINT FK_PARENTID FOREIGN KEY (PARENT_ID) REFERENCES PERMISSION(PERMISSION_ID)
GO
SELECT * FROM PERMISSION
-- 根目录,树开始的地方
INSERT INTO PERMISSION(PERMISSION_NAME) VALUES ( ' 根目录 ' )
-- 根目录下的子节点
INSERT INTO PERMISSION VALUES ( ' 个人事物 ' , 1 )
INSERT INTO PERMISSION VALUES ( ' 公共信息 ' , 1 )
INSERT INTO PERMISSION VALUES ( ' 工作流程 ' , 1 )
INSERT INTO PERMISSION VALUES ( ' 综合行政 ' , 1 )
INSERT INTO PERMISSION VALUES ( ' 系统管理 ' , 1 )
-- 以下元素为 个人事物 的子节点
INSERT INTO PERMISSION VALUES ( ' 日程安排 ' , 2 )
INSERT INTO PERMISSION VALUES ( ' 个人考勤 ' , 2 )
INSERT INTO PERMISSION VALUES ( ' 工作日志 ' , 2 )
INSERT INTO PERMISSION VALUES ( ' 内部短信 ' , 2 )
INSERT INTO PERMISSION VALUES ( ' 内部短信 ' , 2 )
INSERT INTO PERMISSION VALUES ( ' 个人设置 ' , 2 )
-- 以下为 个人设置 的子节点
INSERT INTO PERMISSION VALUES ( ' 个人资料 ' , 12 )
INSERT INTO PERMISSION VALUES ( ' 密码修改 ' , 12 )
INSERT INTO PERMISSION VALUES ( ' 权限信息 ' , 12 )
-- 以下为工作流程的子节点
INSERT INTO PERMISSION VALUES ( ' 新建工作流程 ' , 4 )
INSERT INTO PERMISSION VALUES ( ' 待办工作流程 ' , 4 )
INSERT INTO PERMISSION VALUES ( ' 设计工作流程 ' , 4 )
-- -用来测试的
select permission_id,permission_name, count (permission_id) from permission where 1 = 1 and parent_id is null group by permission_id,permission_name
DROP TABLE PERMISSION
CREATE TABLE PERMISSION
(
PERMISSION_ID INT IDENTITY PRIMARY KEY ,
PERMISSION_NAME VARCHAR ( 20 ) NOT NULL ,
PARENT_ID INT
)
GO
ALTER TABLE PERMISSION ADD CONSTRAINT FK_PARENTID FOREIGN KEY (PARENT_ID) REFERENCES PERMISSION(PERMISSION_ID)
GO
SELECT * FROM PERMISSION
-- 根目录,树开始的地方
INSERT INTO PERMISSION(PERMISSION_NAME) VALUES ( ' 根目录 ' )
-- 根目录下的子节点
INSERT INTO PERMISSION VALUES ( ' 个人事物 ' , 1 )
INSERT INTO PERMISSION VALUES ( ' 公共信息 ' , 1 )
INSERT INTO PERMISSION VALUES ( ' 工作流程 ' , 1 )
INSERT INTO PERMISSION VALUES ( ' 综合行政 ' , 1 )
INSERT INTO PERMISSION VALUES ( ' 系统管理 ' , 1 )
-- 以下元素为 个人事物 的子节点
INSERT INTO PERMISSION VALUES ( ' 日程安排 ' , 2 )
INSERT INTO PERMISSION VALUES ( ' 个人考勤 ' , 2 )
INSERT INTO PERMISSION VALUES ( ' 工作日志 ' , 2 )
INSERT INTO PERMISSION VALUES ( ' 内部短信 ' , 2 )
INSERT INTO PERMISSION VALUES ( ' 内部短信 ' , 2 )
INSERT INTO PERMISSION VALUES ( ' 个人设置 ' , 2 )
-- 以下为 个人设置 的子节点
INSERT INTO PERMISSION VALUES ( ' 个人资料 ' , 12 )
INSERT INTO PERMISSION VALUES ( ' 密码修改 ' , 12 )
INSERT INTO PERMISSION VALUES ( ' 权限信息 ' , 12 )
-- 以下为工作流程的子节点
INSERT INTO PERMISSION VALUES ( ' 新建工作流程 ' , 4 )
INSERT INTO PERMISSION VALUES ( ' 待办工作流程 ' , 4 )
INSERT INTO PERMISSION VALUES ( ' 设计工作流程 ' , 4 )
-- -用来测试的
select permission_id,permission_name, count (permission_id) from permission where 1 = 1 and parent_id is null group by permission_id,permission_name
然后呢,就是修改后的dtree脚本了,这里只放修改后的部分。。。
// Add by xiaosilent .
// get child nodes from web server via AJAX automatically
// pid : parentID.
dTree.prototype.getChildren = function (pid) ... {
var ajax = null;
if (window.ActiveXObject) ...{
try...{
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e)...{
alert("å建Microsoft.XMLHTTP对象失败,AJAXä¸è½æ£å¸¸è¿è¡.请æ£æ¥æ¨çæµè§å¨è®¾ç½®.");
}
} else ...{
if (window.XMLHttpRequest) ...{
try...{
ajax = new XMLHttpRequest();
}catch(e)...{
alert("å建XMLHttpRequest对象失败,AJAXä¸è½æ£å¸¸è¿è¡.请æ£æ¥æ¨çæµè§å¨è®¾ç½®.");
}
}
}
// following is just for xiaosilent's Sales Management System.
// Server gives me a message like this : id1,name1,childCount1|id2,name2,childCount2|...
// var url ="/servlet/category?action=getChildren&parentID=" + pid +"&type=" + this.type;
var url="treeServlet?parentId="+pid;
// use this to get this dTree object in the following function.
var tree=this;
ajax.onreadystatechange = function () ...{
if (ajax.readyState == 4&&ajax.status == 200) ...{
if(ajax.responseText=="false")
...{
return;
}
var categories=ajax.responseText.split('|');
for(var i=0;i<categories.length;i++)...{
var aCat = categories[i].split(',');
if(aCat.length==3)...{
var id=aCat[0];
var name=aCat[1];
var childCount=aCat[2];
// set different icon for a node, if it has a child set its icon to be a folder image , else default , set to be a file image. And set different link address.
if(childCount>0)...{
tree.add(id, pid, name, "javascript:"+tree.obj+".getChildren("+id+")", "ç¹å»è·åå ¶åç±»",'',tree.icon.folder);
}else...{
tree.add(id, pid, name, "javascript:"+tree.obj+".showCategory("+id+")", "ç¹å»è·å详请");
}
}
}
tree.show();
tree.openTo(pid);
}
};
ajax.open("POST",url);
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send(null);
}
dTree.prototype.showCategory = function () ... {
}
// Add by xiaosilent.
// Call to show the tree .
dTree.prototype.show = function () ... {
// Renew the two array to save original data.
this.aNodes=new Array();
this.aIndent=new Array();
// Dump original data to aNode array.
for(var i=0 ; i<this.aNodesData.length ; i++)...{
var oneNode=this.aNodesData[i];
this.aNodes[i]=new Node(oneNode.id,oneNode.pid,oneNode.name,oneNode.url,oneNode.title,oneNode.target,oneNode.icon,oneNode.iconOpen,oneNode.open);
}
this.rewriteHTML();
}
然后是html,发现一个问题,为什么把html的页面的编码格式转化成gb2312是话,为什么预览无法显示呢?只有在utf-8的情况下才能正常预览,真挺郁闷的...
< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< link rel ="StyleSheet" href ="dtree.css" type ="text/css" />
< script type ="text/javascript" src ="dtree.js" ></ script >
</ head >
< body >
< h2 > Example </ h2 >
< p > </ p >
< div class ="dtree" id ="dtree1" >
< script language ="javascript" > ...
d = new dTree('d',"dtree1",'goods');
d.add(0,-1,'点击展开权限信息',"javascript:d.getChildren(-1)");
d.show();
</ script >
</ div >
< p > </ p >
</ body >
</ html >
接下来就是Servlet了,没什么好说的。。。
package
com.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.service. * ;
public class TreeServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
Integer pid = null ;
response.setContentType( " text/html " );
response.setCharacterEncoding( " utf-8 " );
PrintWriter p = response.getWriter();
String id = request.getParameter( " parentId " );
if (id.equals( " -1 " )){
pid = null ;
} else {
pid = Integer.parseInt(id);
}
TreeService treeSer = new TreeService();
System.out.println(treeSer.getNodesInfo(pid));
p.print(treeSer.getNodesInfo(pid));
}
}
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.service. * ;
public class TreeServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
Integer pid = null ;
response.setContentType( " text/html " );
response.setCharacterEncoding( " utf-8 " );
PrintWriter p = response.getWriter();
String id = request.getParameter( " parentId " );
if (id.equals( " -1 " )){
pid = null ;
} else {
pid = Integer.parseInt(id);
}
TreeService treeSer = new TreeService();
System.out.println(treeSer.getNodesInfo(pid));
p.print(treeSer.getNodesInfo(pid));
}
}
然后就是业务了...
public String getNodesInfo(Integer pid) ... {
String condition=null;
if(pid==null)
condition=" and parent_id is null";
else...{
condition=" and parent_id="+pid;
}
String sql="select permission_id,permission_name,count(permission_id) as c from permission"+
" where 1=1 "+condition+" group by permission_id,permission_name";
StringBuffer temp=new StringBuffer();
try ...{
getConnection();
pstmt=con.prepareStatement(sql);
rs=pstmt.executeQuery();
while(rs.next())...{
temp.append(rs.getInt("permission_id")+","+rs.getString("permission_name")+","+rs.getInt("c")+"|");
}
System.out.println("the string value is:"+temp);
} catch (SQLException e) ...{
e.printStackTrace();
}finally...{
try ...{
rs.close();
pstmt.close();
con.close();
} catch (SQLException e) ...{
// TODO 自动生成 catch 块
e.printStackTrace();
}
}
return temp.toString();
}
好了,完了,至于源文件的话直接 在csdn上下载吧,我把它上传到我的资源里面