dhtmlxtree 从servlet程序中动态加载数据的方式

cuwkuhaihong

浏览: 16870 次
性别:
来自: 北京

最近访客更多访客>>

1530095315

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (10)

社区版块

存档分类

Servlet JavaScript CSS Ajax XML

先到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！测试一下即可