ztree+dwr实现异步加载树形菜单
2011-06-23 16:01
531 查看
ztree的相关文件可以去官网http://baby666.cn/hunter/zTree.html下载，dwr的jar包自己下，直接贴代码如下：
1.index.jsp
2.TreeNode.java
3.DBUtil.java
4.UtilCommon.java
5.web.xml
6.dwr.xml
7.sql脚本
运行效果:
源码可以去http://download.csdn.net/source/3389285下载
1.index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<HTML>
<HEAD>
<link rel="stylesheet" href="./css/demo.css" mce_href="css/demo.css" type="text/css">
<link rel="stylesheet" href="./css/zTreeStyle.css" mce_href="css/zTreeStyle.css" type="text/css">
<mce:script type="text/javascript" src="./js/jquery-1.4.2.js" mce_src="js/jquery-1.4.2.js"></mce:script>
<mce:script type="text/javascript" src="./js/jquery-ztree-2.5.js" mce_src="js/jquery-ztree-2.5.js"></mce:script>
<mce:script type="text/javascript"
src="<%=path%><!--
/dwr/interface/utilCommon.js">
// --></mce:script>
<mce:script type="text/javascript" src="<%=path%><!--
/dwr/engine.js">
// --></mce:script>
<mce:script type="text/javascript" src="<%=path%><!--
/dwr/util.js">
// --></mce:script>
<mce:script type="text/javascript" src="./js/demoTools.js" mce_src="js/demoTools.js"></mce:script>
<SCRIPT LANGUAGE="JavaScript">
<!--
var zTree1;
var setting;
var isGetNodes = false;
var zNodes =[
{name:"中国", id:"1", isParent:true}
];
setting = {
expandSpeed: "",
callback: {
beforeExpand: zTreeBeforeExpand,
beforeCollapse: zTreeBeforeCollapse,
expand: zTreeOnExpand,
collapse: zTreeOnCollapse
}
};
$(document).ready(function(){
zTree1 = $("#treeDemo").zTree(setting, clone(zNodes, ""));
});
var isGetNodes = false;
var curParentNode = null;
function zTreeBeforeExpand(treeId, treeNode) {
if (!isGetNodes && treeNode.isParent && (!treeNode.nodes || treeNode.nodes.length==0)) {
curParentNode = treeNode;
isGetNodes = true;
var id = curParentNode.id;
utilCommon.get(id,function(msg){
if (!msg || msg.length == 0) {
isGetNodes = false;
return;
}
var newNodes = "";
try {
newNodes = eval("(" + msg + ")");
} catch(err) {}
if (newNodes && newNodes != "") {
zTree1.addNodes(curParentNode, newNodes, true);
zTree1.updateNode(curParentNode);
zTree1.selectNode(curParentNode.nodes[0]);
isGetNodes = false;
}
});
return false;
}
return true;
}
function zTreeOnExpand(event, treeId, treeNode) {
}
function zTreeBeforeCollapse(treeId, treeNode) {
}
function zTreeOnCollapse(event, treeId, treeNode) {
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<TABLE border=0 width="700" class="tb1">
<TR>
<TD width=340px align=center valign=top>
<div class="zTreeDemoBackground">
<ul id="treeDemo" class="tree"></ul>
</div>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>2.TreeNode.java
package util;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;
import java.util.Vector;
public class TreeNode {
private int id;
private String name;
private int parentId;
private String parentName;
private boolean isHasChild;
public TreeNode() {
}
public TreeNode(int id) {
this.id = id;
if (!init()) {
this.id = -1;
}
}
// 初始化节点
public boolean init() {
String sql = "select * from treenode where id=" + getId();
Connection conn = null;
Statement st = null;
ResultSet rs = null;
boolean flag = false;
try {
conn = DBUtil.getConnection();
st = conn.createStatement();
rs = st.executeQuery(sql);
if (rs.next()) {
this.parentId = rs.getInt("parentid");
this.name = rs.getString("name");
this.parentName = rs.getString("parentname");
this.isHasChild = canExpand();
flag = true;
}
rs.close();
st.close();
conn.close();
} catch (SQLException e) {
e.printStackTrace();
return false;
}
return flag;
}
// 是否可以展开
public boolean canExpand() {
boolean flag = false;
String sql = "select * from treenode where parentid=" + getId();
Connection conn = null;
Statement st = null;
ResultSet rs = null;
try {
conn = DBUtil.getConnection();
st = conn.createStatement();
rs = st.executeQuery(sql);
if (rs.next()) {
flag = true;
}
rs.close();
st.close();
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
return flag;
}
// 取得子节点列表
public List<TreeNode> getChildren() {
String sql = "select * from treenode where parentid=" + getId();
Connection conn = null;
Statement st = null;
ResultSet rs = null;
List<TreeNode> children = new ArrayList<TreeNode>();
try {
conn = DBUtil.getConnection();
st = conn.createStatement();
rs = st.executeQuery(sql);
while (rs.next()) {
TreeNode t = new TreeNode();
t.setId(rs.getInt("id"));
t.setIsHasChild(t.canExpand());
t.setName(rs.getString("name"));
t.setParentId(rs.getInt("parentid"));
t.setParentName(rs.getString("parentname"));
children.add(t);
}
rs.close();
st.close();
conn.close();
} catch (SQLException e) {
e.printStackTrace();
return null;
}
return children;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getParentId() {
return parentId;
}
public void setParentId(int parentId) {
this.parentId = parentId;
}
public String getParentName() {
return parentName;
}
public void setParentName(String parentName) {
this.parentName = parentName;
}
public void setId(int id) {
this.id = id;
}
public int getId() {
return id;
}
public void setIsHasChild(boolean isHasChild) {
this.isHasChild = isHasChild;
}
public boolean getIsHasChild() {
return isHasChild;
}
}3.DBUtil.java
package util;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
public class DBUtil {
//取得数据库连接
public static Connection getConnection() {
Connection conn = null;
try {
Class.forName("com.mysql.jdbc.Driver");
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
System.out.println("驱动程序没有找到" + e.getMessage());
}
try {
conn = DriverManager.getConnection(
"jdbc:mysql://localhost:3306/tree", "root", "123");
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
System.out.println("获得连接出错!");
}
return conn;
}
}4.UtilCommon.java
package util;
import java.util.List;
public class UtilCommon {
public static String get(String id) {
String s = "";
TreeNode node = new TreeNode(Integer.parseInt(id));
if (node.getIsHasChild()) {
List<TreeNode> children = node.getChildren();
s="[";
for (TreeNode t : children) {
s+="{id:'"+t.getId()+"',name:'"+t.getName()+"',isParent:"+t.getIsHasChild()+"},";
}
s=s.substring(0,s.length()-1);
s+="]";
}
return s;
}
public static void main(String[] args) {
System.out.println(get("1"));
}
}5.web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> <servlet> <servlet-name>dwr</servlet-name> <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class> <!--此处指定项目处于开发之中，故可通过http://localhost:8000/dwrdemo1/dwr/，而不会出现403 --> <init-param> <param-name>debug</param-name> <param-value>true</param-value> </init-param> <init-param> <param-name>crossDomainSessionSecurity</param-name> <param-value>false</param-value> </init-param> <!-- dwr产生failed to read input的解决方法 --> <init-param> <param-name>classes</param-name> <param-value>java.lang.Object</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>dwr</servlet-name> <url-pattern>/dwr/*</url-pattern> </servlet-mapping> </web-app>
6.dwr.xml
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd"> <dwr> <!-- without allow, DWR isn't allowed to do anything --> <allow> <create creator="new" javascript="utilCommon"> <param name="class" value="util.UtilCommon"/> </create> </allow> </dwr>
7.sql脚本
/* SQLyog 企业版 - MySQL GUI v8.14 MySQL - 5.6.2-m5 : Database - tree ********************************************************************* */ /*!40101 SET NAMES utf8 */; /*!40101 SET SQL_MODE=''*/; /*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */; /*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */; /*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */; /*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */; CREATE DATABASE /*!32312 IF NOT EXISTS*/`tree` /*!40100 DEFAULT CHARACTER SET utf8 */; USE `tree`; /*Table structure for table `treenode` */ DROP TABLE IF EXISTS `treenode`; CREATE TABLE `treenode` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(10) DEFAULT NULL, `parentid` int(11) DEFAULT NULL, `parentName` varchar(10) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8; /*Data for the table `treenode` */ insert into `treenode`(`id`,`name`,`parentid`,`parentName`) values (1,'中国',0,NULL),(2,'江苏',1,'中国'),(3,'北京',1,'中国'),(4,'南京',2,'四川'),(5,'朝阳区 ',3,'北京'); /*!40101 SET SQL_MODE=@OLD_SQL_MODE */; /*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */; /*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */; /*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;
运行效果:
源码可以去http://download.csdn.net/source/3389285下载
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery使用zTree插件实现树形菜单和异步加载
- jQuery使用zTree插件实现树形菜单和异步加载
- 使用ztree异步加载数据库数据形成树形菜单
- jQuery树形菜单，使用zTree插件,异步加载 & 编辑功能&Check 共存
- zTree异步加载树形菜单
- 页面异步加载树形菜单
- [学习笔记]zTree是一个很好的js插件实现加载树形结构
- 前端框架 （一）zTree 从数据库中动态加载树形菜单
- Easy UI的树形菜单的异步加载
- AngularJS实现树形结构(ztree)菜单示例代码
- ztree异步加载菜单与struts2集成
- dtree实现动态加载树形菜单，动态插入树形菜单
- Ztree实现树形菜单
- 前端框架 （一）zTree 从数据库中动态加载树形菜单
- dtree实现动态加载树形菜单，动态插入树形菜单
- iframe异步加载实现点击左边菜单加载右边内容实例讲解
- 使用DWR+Dtree实现无刷新树形菜单
- 关于java异步加载可多选的树形结构（需要导入layer和zTree）（可编辑）
- zTree树形菜单交互选项卡效果实现
- jQuery+zTree加载树形结构菜单