dhtmlxtree 从servlet程序中动态加载数据的方式
先到dhtmlxtree的官方网站下载源代码；
开始工作：
JSP代码如下（该代码是在dhtmlxtree的下载包%dhtmlxTree%\samples\checkboxes的例子改写的）：
<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<link rel="STYLESHEET" type="text/css" href="./codebase/dhtmlxtree.css">
<script src="./codebase/dhtmlxcommon.js"></script>
<script src="./codebase/dhtmlxtree.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<table>
<tr>
<td valign="top">
<div id="treeboxbox_tree"
style="width: 250; height: 218; background-color: #f5f5f5; border: 1px solid Silver;"></div>
</td>
<td style="padding-left: 25" valign="top">Two state checkboxes<br>
<br>
<a href="javascript:void(0);"
onClick="tree.setCheck(tree.getSelectedItemId(),true);">Check
item</a><br>
<br>
<a href="javascript:void(0);"
onClick="tree.setCheck(tree.getSelectedItemId(),false);">UnCheck
item</a><br>
<br>
<a href="javascript:void(0);"
onClick="tree.setSubChecked(tree.getSelectedItemId(),true);">Check
branch</a><br>
<br>
<a href="javascript:void(0);"
onClick="tree.setSubChecked(tree.getSelectedItemId(),false);">UnCheck
branch</a><br>
<br>
<a href="javascript:void(0);" onClick="alert(tree.getAllChecked());">Get
list of checked</a><br>
<br>
</td>
</tr>
<tr>
<td valign="top">
<div id="treeboxbox_tree2"
style="width: 250; height: 218; background-color: #f5f5f5; border: 1px solid Silver;; overflow: auto;"></div>
</td>
<td style="padding-left: 25" valign="top">Three state checkboxes<br>
<br>
<a href="javascript:void(0);"
onClick="tree2.setCheck(tree2.getSelectedItemId(),true);">Check
item</a><br>
<br>
<a href="javascript:void(0);"
onClick="tree2.setCheck(tree2.getSelectedItemId(),false);">UnCheck
item</a><br>
<br>
<a href="javascript:void(0);" onClick="alert(tree2.getAllChecked());">Get
list of checked</a><br>
<br>
</td>
</tr>
</table>
<script>
tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
tree.setImagePath("./codebase/imgs/csh_bluebooks/");
tree.enableCheckBoxes(1);
tree.loadXML("tree3.xml");
<!-- 就修改下面的一部分-->
tree2=new dhtmlXTreeObject("treeboxbox_tree2","100%","100%",0);
tree2.setImagePath("./codebase/imgs/csh_bluebooks/");
tree2.enableCheckBoxes(1);
tree2.enableThreeStateCheckboxes(true);
tree2.loadXML("treeData");//treeData就是servlet的映射，dhtmlxtree具有ajax的功能
</script>
</body>
</html>
JAVA代码如下：(就是一个简单的servlet)
package com.dhtmlxtree.test;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.dom4j.Document;
import org.dom4j.DocumentHelper;
import org.dom4j.Element;
public class TreeData extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
System.out.println("do post");
Document doc = createXMLData();
String content = doc.asXML();
System.out.println(content);
resp.setContentType("text/xml; charset=GB18030");//千万不能少不然会出现乱码
resp.getWriter().write(content);
}
public static void main(String[] args) throws IOException {
Document doc = createXMLData();
String content = doc.asXML();
System.out.println(content);
}
private static Document createXMLData() throws IOException {
Document document = DocumentHelper.createDocument();
document.setXMLEncoding("GB18030");
Element root = document.addElement("tree");
root.addAttribute("id", "0");
Element item = root.addElement("item");
item.addAttribute("text", "我的工作台");
item.addAttribute("id", "work console");
item.addAttribute("im0", "folderClosed.gif");
item.addAttribute("im1", "folderOpen.gif");
item.addAttribute("im2", "folderClosed.gif");
Element subItem = item.addElement("item");
subItem.addAttribute("text", "代办事宜");
subItem.addAttribute("id", "working");
subItem.addAttribute("im0", "book_titel.gif");
subItem.addAttribute("im1", "fbook.gif");
subItem.addAttribute("im2", "book_titel.gif");
subItem = item.addElement("item");
subItem.addAttribute("text", "代办事宜2");
subItem.addAttribute("id", "working");
subItem.addAttribute("im0", "book_titel.gif");
subItem.addAttribute("im1", "fbook.gif");
subItem.addAttribute("im2", "book_titel.gif");
return document;
}
}
在web.xml中添加常规serlvet配置即可：
<servlet> <servlet-name>treeData</servlet-name> <servlet-class>com.dhtmlxtree.test.TreeData</servlet-class> </servlet> <servlet-mapping> <servlet-name>treeData</servlet-name> <url-pattern>/treeData</url-pattern> </servlet-mapping>
ok！测试一下即可