今天研究了很久，终于把动态加载无刷新树给整出来了，反正刚开始也是在网上搜了很多东东，但感觉都不太方便，最后找到了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
然后呢，就是修改后的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));
}
}
然后就是业务了...
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();
}
好了，完了，至于源文件的话，需要的朋友可以mail我一下拉，呵呵
