Ext+Dwr动态树(增删改)

效果展示:

1.增加节点

 

2.删除节点

3.修改节点

 

技术分析:

   利用DWR可以在客户端利用JavaScript直接调用服务端的Java方法并返回值给JavaScript就好像直接本地客户端调用一样DWR(根据Java类来动态生成JavaScrip代码).

   树是一个我们日常用的组件，EXT给我们提供了一个非常好用的树控件,对于传统HTML页面完全靠手编写代码是非常困难的,因为要编写许多JS代码,还要实现AJAX功能,使用EXT编写树我们的工作将简单方便许多.

   Ext.ux.DWRTreeLoader 是对树加载器 Ext.tree.TreeLoader 的扩展 ,实现了通过DWR直接调用后台JAVA类方法,将树结点返回到前台,除此之外，还支持对树进行查找时，将查找参数直接传给后台JAVA类方法.

 

具体JS代码实现:

// 全局路径
var basePath = "http://localhost:8080/exttree";
if(typeof(glbRootPath) != "undefined"){
	basePath = glbRootPath;
}
// 扩展窗体
FormEditWin = function(){
	var curFormWin;
	return {
		width : 600,
		height : 400,
		showAddDirWin : function(parentNode) {
			// 显示添加子目录窗口
			var number = parentNode.indexOf(parentNode.lastChild) + 1;
			var editpage = basePath
					+ "/navigateedit?parentId="
					+ parentNode.id + "&leaf=0&number=" + number;
			var window = this.createWin("windirnew", "新建目录节点", editpage, function() {
				parentNode.reload();
			});
			window.show();
		},
		showAddLeafWin : function(parentNode) {
			// 显示添加子叶子节点窗口
			var number = parentNode.indexOf(parentNode.lastChild) + 1;
			var editpage = basePath
					+ "/navigateedit?parentId="
					+ parentNode.id + "&leaf=1&number=" + number;
			var window = this.createWin("winleafnew", "新建叶子节点", editpage, function() {
				parentNode.reload();
			});
			window.show();
		},
		showEditDirWin : function(node) {
			// 显示目录编辑窗口
			var editpage = basePath
					+ "/navigateedit?id=" + node.id;
			var window = this.createWin("win" + node.id, node.text, editpage, function() {
				var nodeparent = node.parentNode;
				var tree = node.getOwnerTree();
				nodeparent.on("expand", function(pnode) {
					tree.getNodeById(node.id).select();
				}, this, {
					single : true
				});
				node.parentNode.reload();
			});
			window.show();
		},
		showEditLeafWin : function(node) {
			// 显示叶子节点编辑窗口
			var editpage = basePath
					+ "/navigateedit?id=" + node.id;
			var window = this.createWin("win" + node.id, node.text, editpage, function() {
				var nodeparent = node.parentNode;
				var tree = node.getOwnerTree();
				nodeparent.on("expand", function(pnode) {
					tree.getNodeById(node.id).select();
				}, this, {
					single : true
				});
				node.parentNode.reload();
			});
			window.show();
		},
		createWin : function(winId, winTitle, iframePage, closeFun) {
			// 供各类型窗口创建时调用
			var win = Ext.getCmp(winId);
			if (!win) {
				win = new Ext.Window({
					id : winId,
					title : "菜单编辑窗口-" + winTitle,
					width : this.width,
					height : this.height,
					maximizable : true,
					modal : true,
					html : "<iframe width='100%' height='100%' frameborder='0' src='"
							+ iframePage + "'></iframe>"
				});
				this.reloadNavNode = closeFun;
			}
			curFormWin = win;
			return win;
		},
		reloadNavNode : function() {
		},
		close : function() {
			if(curFormWin){
				curFormWin.close();
			}
		}
	}
}();

// 导航树
NavTree = function(){
	var nav;
	var navEditor;
	var leafMenu;
	var dirMenu;
	var loader;
	var root;
	var removeFlag = false;
	var titleChangeFlag = false;
	var nodeSelected;
	var mgr;
	return {
		init : function(){
			if(!mgr){
				Ext.Msg.alert("警告提示","请先通过NavTree.setMgr()设置mgr");
				return;
			}
			if(!loader){
				loader = new Ext.tree.TreeLoader({
					url : basePath + '/navigatejson'
				});
				loader.on('beforeload', function(treeloader, node) {
					treeloader.baseParams = {
						id : node.id,
						method : 'tree'
					};
				}, this);
			}
			if(!root){
				root = new Ext.tree.AsyncTreeNode({
					id : '0',
					text : "系统菜单"
				});
			}
			if(!nav){
				nav = new Ext.tree.TreePanel({
					title : "左部导航",
					width : 232,
					autoScroll : true,
					animate : true,
					loader : loader,
					root : root,
					enableDD : true,
					listeners : {
						'click' : function(node, event) {
							if (!node.isLeaf()) {
								// 为目录节点时，点击不进入链接
								event.stopEvent();
							}
						}
					}
				});
				//事件: 添加右键菜单
				nav.on("contextmenu", this.showTreeMenu);
				//事件: 当节点文本改变时触发 异步更新标题
				nav.on("textchange", function(node, newText, oldText) {
					if (!titleChangeFlag && newText != oldText) {
						mgr.ajaxUpdateTitle(node.id, newText, function(success) {
							if (!success) {
								Ext.Msg.show({
									title : "操作失败！",
									msg : "菜单修改失败！",
									buttons : Ext.Msg.OK,
									icon : Ext.MessageBox.ERROR
								});
								titleChangeFlag = true;
								node.setText(oldText);
								titleChangeFlag = false;
							}
						});
					}
				});
				//事件: 当节点移动时触发
				nav.on("movenode", function(tree, node, oldParent, newParent, index) {
					mgr.ajaxMoveNode(node.id, oldParent.id, newParent.id, index);
				});
				//事件: 当节点删除时触发
				nav.on("remove", function(tree, parentNode, node) {
					if (removeFlag) {
						mgr.ajaxRemoveNode(node.id);
					}
				});
			}
/*  事件:  节点选中单击编辑	
			if(!navEditor){
				navEditor = new Ext.tree.TreeEditor(nav, {
					allowBlank : false,
					ignoreNoChange : true,
					completeOnEnter : true,
					blankText : '标题不能为空',
					selectOnFocus : true
				});
			}  */
			this.setLeafMenu();// 设置叶子菜单
			this.setDirMenu();// 设置目录菜单
		},
		setMgr : function(manager){
			mgr = manager;
		},
		getMgr : function(){
			return mgr;
		},
		// 设置叶子菜单
		setLeafMenu: function(){
			if(!leafMenu){
				leafMenu = new Ext.menu.Menu({
					items : [{
						text : "修改标题",
						handler : function() {
							navEditor = new Ext.tree.TreeEditor(nav, {
								allowBlank : false,
								ignoreNoChange : true,
								completeOnEnter : true,
								blankText : '标题不能为空',
								selectOnFocus : true
							});
							navEditor.triggerEdit(nodeSelected);
						}
					}, "-", {
						text : "编辑",
						handler : function() {
							FormEditWin.showEditLeafWin(nodeSelected);
						}
					}, "-", {
						text : "删除",
						handler : this.delTreeItemComfirm
					}]
				});
			}
		},
		// 设置目录菜单
		setDirMenu: function(){
			if(!dirMenu){
				dirMenu = new Ext.menu.Menu({
					items : [{
						text : "修改标题",
						handler : function() {
							navEditor = new Ext.tree.TreeEditor(nav, {
								allowBlank : false,
								ignoreNoChange : true,
								completeOnEnter : true,
								blankText : '标题不能为空',
								selectOnFocus : true
							});
							navEditor.triggerEdit(nodeSelected);
						}
					}, "-", {
						text : "编辑",
						handler : function() {
							FormEditWin.showEditDirWin(nodeSelected);
						}
					}, "-", {
						text : "添加叶子节点",
						handler : function() {
							FormEditWin.showAddLeafWin(nodeSelected);
						}
					}, "-", {
						text : "添加目录节点",
						handler : function() {
							FormEditWin.showAddDirWin(nodeSelected);
						}
					}, "-", {
						text : "删除",
						handler : this.delTreeItemComfirm
					}]
				});
			}
		},
		showTreeMenu : function(node, e){
			nodeSelected = node;
			nodeSelected.select();
			if (node.isLeaf()) {
				// 显示叶子节点菜单
				leafMenu.showAt(e.getPoint());
			} else {
				// 显示目录节点菜单
				dirMenu.showAt(e.getPoint());
			}
		},
		delTreeItemComfirm : function(){
			Ext.Msg.confirm("确认删除", "确定要删除所选节点吗？", function(btn) {
				if (btn == "yes") {
					NavTree.delTreeItem();
				}
			});
		},
		delTreeItem : function(){
			if (nodeSelected != nav.getRootNode()) {
				removeFlag = true;
				nodeSelected.remove();
				removeFlag = false;
			} else {
				Ext.Msg.alert("警告", "不能删除树的根节点！");
			}
		},
		show : function(){
			nav.render(Ext.getBody());
			nav.getRootNode().toggle();
		}
	}
}();

// 文档加载完毕执行
Ext.onReady(function(){
	Ext.BLANK_IMAGE_URL = "../scripts/ext/resources/images/default/s.gif";
	if(typeof(NavigateManager)=="undefined"){
		Ext.Msg.alert("警告提示","请先设置DWR，并实例化NavigateManager");
	}else{
		NavTree.setMgr(NavigateManager);
		NavTree.init();
		NavTree.show();
	}
});

 

servlet 配置:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" 
	xmlns="http://java.sun.com/xml/ns/j2ee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
	http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
  <servlet>
		<servlet-name>navigatejson</servlet-name>
		<servlet-class>
			com.demo.navigate.web.NavigateJsonServlet
		</servlet-class>
	</servlet>
	<servlet>
		<servlet-name>navigateedit</servlet-name>
		<servlet-class>
			com.demo.navigate.web.NavigateEditServlet
		</servlet-class>
	</servlet>
	<servlet>
		<servlet-name>navigatesave</servlet-name>
		<servlet-class>
			com.demo.navigate.web.NavigateSaveServlet
		</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>navigatejson</servlet-name>
		<url-pattern>/navigatejson</url-pattern>
	</servlet-mapping>
	<servlet-mapping>
		<servlet-name>navigateedit</servlet-name>
		<url-pattern>/navigateedit</url-pattern>
	</servlet-mapping>
	<servlet-mapping>
		<servlet-name>navigatesave</servlet-name>
		<url-pattern>/navigatesave</url-pattern>
	</servlet-mapping>
	<servlet>
		<servlet-name>dwr-invoker</servlet-name>
		<servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
		<init-param>
			<param-name>debug</param-name>
			<param-value>true</param-value>
		</init-param>
		<init-param>
			<param-name>
				allowGetForSafariButMakeForgeryEasier
			</param-name>
			<param-value>true</param-value>
		</init-param>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>dwr-invoker</servlet-name>
		<url-pattern>/dwr/*</url-pattern>
	</servlet-mapping>
	<welcome-file-list>
		<welcome-file>index.jsp</welcome-file>
	</welcome-file-list>
</web-app>

DWR配置:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://www.getahead.ltd.uk/dwr//dwr20.dtd">

<dwr>
	<allow>
		<create javascript="NavigateManager" creator="new">
			<param name="class"
				value="com.demo.navigate.service.NavigateManager">
			</param>
			<include method="ajaxUpdateTitle" />
			<include method="ajaxRemoveNode" />
			<include method="ajaxMoveNode" />
		</create>
	</allow>
</dwr>

servlet程序:

package com.demo.navigate.web;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.demo.navigate.model.Navigate;
import com.demo.navigate.service.NavigateManager;

@SuppressWarnings("serial")
public class NavigateSaveServlet extends HttpServlet {
	
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		this.doPost(request, response);
	}
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		NavigateManager navigateManager = new NavigateManager();
		Navigate obj = null;
		request.setCharacterEncoding("UTF-8");
		String id = request.getParameter("id");
		String number = request.getParameter("number");
		String parentId = request.getParameter("parentId");
		String leaf = request.getParameter("leaf");
		String title = request.getParameter("title");
		String url = request.getParameter("url");
		
		if(null != id && !"".equals(id)){
			obj = navigateManager.get(id);
			if(obj == null){
				RequestDispatcher dispatcher = request.getRequestDispatcher("/navigate/error.jsp");
				dispatcher.forward(request, response);
				return;
			}
		}else{
			obj = new Navigate();
			obj.setLeaf(new Integer(leaf));
			obj.setParentId(new Integer(parentId));
		}
		obj.setNumber(new Integer(number));
		obj.setTitle(title);
		obj.setUrl(url);
		if(null != id && !"".equals(id)){
			navigateManager.update(obj);
		}else{
			navigateManager.save(obj);
		}
		RequestDispatcher dispatcher = request.getRequestDispatcher("/navigate/success.jsp");
		dispatcher.forward(request, response);		
	}

}

package com.demo.navigate.web;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.demo.navigate.service.NavigateManager;

@SuppressWarnings("serial")
public class NavigateJsonServlet extends HttpServlet {
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		this.doPost(request, response);
	}
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		NavigateManager navigateManager = new NavigateManager();
		request.setAttribute("list", navigateManager.getChildrenById(new Integer(request.getParameter("id"))));
		RequestDispatcher dispatcher = request.getRequestDispatcher("/navigate/console-json.jsp");
		dispatcher.forward(request, response);
	}

}

package com.demo.navigate.web;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.demo.navigate.model.Navigate;
import com.demo.navigate.service.NavigateManager;

@SuppressWarnings("serial")
public class NavigateEditServlet extends HttpServlet {
	
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		this.doPost(request, response);
	}
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String idstr = request.getParameter("id");
		String parentId = request.getParameter("parentId");
		String leaf = request.getParameter("leaf");
		String number = request.getParameter("number");
		Navigate obj = null;
		if(null != idstr){
			NavigateManager navigateManager = new NavigateManager();
			obj = navigateManager.get(idstr);
		}else{
			obj = new Navigate();
			obj.setParentId(new Integer(parentId));
			obj.setLeaf(new Integer(leaf));
			obj.setNumber(new Integer(number));
		}
		request.setAttribute("obj", obj);
		RequestDispatcher dispatcher = request.getRequestDispatcher("/navigate/console-edit.jsp");
		dispatcher.forward(request, response);
	}
}

service程序:

package com.demo.navigate.service;

import java.io.Serializable;
import java.util.List;

import com.demo.navigate.dao.NavigateDao;
import com.demo.navigate.model.Navigate;

public class NavigateManager {
	private NavigateDao dao = NavigateDao.getInstanece();
	public Navigate get(Serializable id){
		return dao.get(id);
	}
	/**
	 * 获得指定节点的所有儿子节点
	 * @param id
	 */
	@SuppressWarnings("unchecked")
	public List<Navigate> getChildrenById(Integer id){
		return dao.getChildrenById(id);
	}
	/**
	 * 保存数据
	 * @param obj 
	 */
	public void save(Navigate obj){
		dao.save(obj);
	}
	/**
	 * 更新数据
	 * @param obj 
	 */
	public void update(Navigate obj){
		dao.update(obj);
	}
	/**
	 * 删除指定的一条数据
	 * @param id
	 */
	public void removeById(Integer id){
		dao.removeById(id);
	}
	/**
	 * 异步更新标题
	 * @param id
	 * @param title
	 * @return true-修改成功 false-修改失败
	 */
	public Boolean ajaxUpdateTitle(Integer id,String title){
		return dao.ajaxUpdateTitle(id, title);
	}
	/**
	 * 异步删除数据，包括其子孙节点
	 * @param id
	 * @param title
	 */
	public void ajaxRemoveNode(Integer id){
		Navigate obj = dao.get(id);
		dao.downNode(obj.getParentId(), obj.getNumber(), -1);
		dao.ajaxRemoveNode(id);
	}
	/**
	 * 异步移动指定节点
	 * @param id	指定的节点的id
	 * @param oldParentId	节点移动前所在的父节点
	 * @param newParentId	节点移动后的目标父节点
	 * @param nodeIndex		节点移动后的目标位置
	 */
	public void ajaxMoveNode(int id, int oldParentId, int newParentId, int nodeIndex){
		dao.ajaxMoveNode(id, oldParentId, newParentId, nodeIndex);
	}
}

model程序:

 

package com.demo.navigate.model;

public class Navigate {
	private Integer id;
	private Integer parentId;
	private String title;
	private Integer number;
	private Integer leaf;
	private String url;
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public Integer getParentId() {
		return parentId;
	}
	public void setParentId(Integer parentId) {
		this.parentId = parentId;
	}
	public String getTitle() {
		return title;
	}
	public void setTitle(String title) {
		this.title = title;
	}
	public Integer getNumber() {
		return number;
	}
	public void setNumber(Integer number) {
		this.number = number;
	}
	public Integer getLeaf() {
		return leaf;
	}
	public void setLeaf(Integer leaf) {
		this.leaf = leaf;
	}
	public String getUrl() {
		return url;
	}
	public void setUrl(String url) {
		this.url = url;
	}	
}

Dao程序:

package com.demo.navigate.dao;

import java.io.Serializable;
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 com.demo.core.dao.DBConn;
import com.demo.navigate.model.Navigate;

public class NavigateDao {
	private static NavigateDao dao;
	private NavigateDao(){		
	}	
	public static NavigateDao getInstanece(){
		if(null == dao){
			dao = new NavigateDao();
		}
		return dao;
	}
	/**
	 * 获得指定ID的数据
	 * @param id
	 * @return
	 */
	public Navigate get(Serializable id){
		Connection conection = null;
		Statement stmt = null;
		ResultSet rs = null;
		Navigate obj = null;
		try{
			conection = DBConn.getConnection(); 
			stmt = conection.createStatement();
			StringBuffer sql = new StringBuffer("select * from navigate where id = ");
			sql.append(id);
			rs = stmt.executeQuery(sql.toString());
			if(rs.next())
			{
				obj = new Navigate();
				obj.setId(rs.getInt("id"));
				obj.setLeaf(rs.getInt("leaf"));
				obj.setNumber(rs.getInt("number"));
				obj.setParentId(rs.getInt("parentId"));
				obj.setTitle(rs.getString("title"));
				obj.setUrl(rs.getString("url"));
			}
		}catch(Exception e){
			e.printStackTrace();			
		}finally{
			try{
				if(rs != null) {
	        		try {
						rs.close();
					} catch (SQLException e) {
					}
	        		rs = null;
	        	}	        	
	        	if (stmt != null) {
		        	try {
		        		stmt.close();
		        	} catch (SQLException sqlex) {
		        	}
		        	stmt = null;
	        	}
	        	if (conection != null) {
		        	try {
		        		conection.close();
		        	} catch (SQLException sqlex) {
		        	}
		        	conection = null;
	        	}
			}catch(Exception e){
				e.printStackTrace();
			}
		}
		return obj;
	}
	
	/**
	 * 获得指定节点的所有儿子节点
	 * @param id
	 */
	@SuppressWarnings("unchecked")
	public List<Navigate> getChildrenById(Integer id){
		List<Navigate> list = new ArrayList<Navigate>();
		Connection conection = null;
		Statement stmt = null;
		ResultSet rs = null;
		try{
			conection = DBConn.getConnection(); 
			stmt = conection.createStatement();
			StringBuffer sql = new StringBuffer("select * from navigate where parentId = ");
			sql.append(id);
			sql.append(" order by number,id");
			System.out.println("首页加载树SQL=="+sql.toString());
			rs = stmt.executeQuery(sql.toString());
			while(rs.next())
			{
				Navigate obj = new Navigate();
				obj.setId(rs.getInt("id"));
				obj.setLeaf(rs.getInt("leaf"));
				obj.setNumber(rs.getInt("number"));
				obj.setParentId(rs.getInt("parentId"));
				obj.setTitle(rs.getString("title"));
				obj.setUrl(rs.getString("url"));
				list.add(obj);
			}
		}catch(Exception e){
			e.printStackTrace();			
		}finally{
			try{
				if(rs != null) {
	        		try {
						rs.close();
					} catch (SQLException e) {
					}
	        		rs = null;
	        	}	        	
	        	if (stmt != null) {
		        	try {
		        		stmt.close();
		        	} catch (SQLException sqlex) {
		        	}
		        	stmt = null;
	        	}
	        	if (conection != null) {
		        	try {
		        		conection.close();
		        	} catch (SQLException sqlex) {
		        	}
		        	conection = null;
	        	}
			}catch(Exception e){
				e.printStackTrace();
			}
		}
		return list;
	}
	
	/**
	 * 保存数据
	 * @param obj 
	 */
	public void save(Navigate obj){
		StringBuffer sql = new StringBuffer("insert into navigate(parentId,title,leaf,number,url) values(");
		sql.append(obj.getParentId());
		sql.append(",'");
		sql.append(obj.getTitle());
		sql.append("',");
		sql.append(obj.getLeaf());
		sql.append(",");
		sql.append(obj.getNumber());
		sql.append(",'");
		sql.append(obj.getUrl());
		sql.append("')");
		this.bulkUpdate(sql.toString());
	}
	
	/**
	 * 更新数据
	 * @param obj 
	 */
	public void update(Navigate obj){
		StringBuffer sql = new StringBuffer("update navigate set");
		sql.append(" parentId = ");
		sql.append(obj.getParentId());
		sql.append(",");
		sql.append(" title = '");
		sql.append(obj.getTitle());
		sql.append("',");
		sql.append(" leaf = ");
		sql.append(obj.getLeaf());
		sql.append(",");
		sql.append(" number = ");
		sql.append(obj.getNumber());
		sql.append(", url = '");
		sql.append(obj.getUrl());
		sql.append("' where id = ");
		sql.append(obj.getId());
		this.bulkUpdate(sql.toString());
	}
	
	/**
	 * 异步更新标题
	 * @param id
	 * @param title
	 * @return true-修改成功 false-修改失败
	 */
	public Boolean ajaxUpdateTitle(Integer id,String title){
		Boolean flag = false;
		Navigate obj = this.get(id);
		if(null != obj){
			StringBuffer sql = new StringBuffer("update navigate set");
			sql.append(" title = '");
			sql.append(title);
			sql.append("'");
			sql.append(" where id = ");
			sql.append(id);
			this.bulkUpdate(sql.toString());
			flag = true;
		}
		return flag;
	}
	
	/**
	 * 删除指定的一条数据
	 * @param id
	 */
	public void removeById(Integer id){
		StringBuffer sql = new StringBuffer("delete from navigate where id = ");
		sql.append(id);
		this.bulkUpdate(sql.toString());
	}
	
	/**
	 * 异步删除数据，包括其子孙节点
	 * @param id
	 * @param title
	 */
	@SuppressWarnings("unchecked")
	public void ajaxRemoveNode(Integer id){
		List list = this.getChildrenById(id);
		for (Object object : list) {
			Navigate obj = (Navigate)object;
			ajaxRemoveNode(obj.getId());
		}
		this.removeById(id);
	}
	
	/**
	 * 移动指定节点
	 * @param id	指定的节点的id
	 * @param oldParentId	节点移动前所在的父节点
	 * @param newParentId	节点移动后的目标父节点
	 * @param nodeIndex		节点移动后的目标位置
	 */
	public void ajaxMoveNode(int id, int oldParentId, int newParentId, int nodeIndex){
		Navigate obj = this.get(id);
		int minIndex = obj.getNumber().intValue();
		int maxIndex = nodeIndex;
		if(oldParentId == newParentId && minIndex != maxIndex){
			// 在同一个父节点下发生移动
			if(minIndex < maxIndex){
				// 当要移动的节点的序号小于要移动到的目标序号，则下移
				this.downNode(oldParentId, minIndex, maxIndex);
			}else if(minIndex > maxIndex){
				// 当要移动的节点的序号大于要移动到的目标序号，则上移
				maxIndex = minIndex;
				minIndex = nodeIndex;
				this.upNode(oldParentId, minIndex, maxIndex);
			}
			// 节点本身的序号设置成要移动到的目标序号
			obj.setNumber(nodeIndex);
			this.update(obj);
		}
		if(oldParentId != newParentId){
			// 在不同父节点下发生移动
			//1、相当于要移动的节点在原父节点下下移到最后再删除掉，因此要指定移动发生时节点所在的位置
			this.downNode(oldParentId, minIndex, -1);
			//2、相当于要移动的节点在新父节点下上移到指定的位置，因此需要指定要移动到的位置
			this.upNode(newParentId, maxIndex, -1);
			// 节点本身的序号设置成要移动到的目标序号
			obj.setNumber(nodeIndex);
			obj.setParentId(newParentId);
			this.update(obj);
		}
	}
	/**
	 * 指定的节点下移
	 * @param parentId	指定范围内要移动的节点的父节点
	 * @param minIndex	指定节点移动发生时所在的位置
	 * @param maxIndex	指定节点要移动到的目标位置
	 */
	@SuppressWarnings("unchecked")
	public void downNode(int parentId, int minIndex, int maxIndex){
		// 指定的节点下移，意味着其范围内的节点各自减1
		StringBuffer sql = new StringBuffer("update navigate set number=number-1 where parentId = ");
		sql.append(parentId);
		if(maxIndex != -1){
			sql.append(" and number <= ");
			sql.append(maxIndex);
		}
		if(minIndex != -1){
			sql.append(" and number > ");
			sql.append(minIndex);
		}		
		this.bulkUpdate(sql.toString());
	}
	/**
	 * 指定的节点上移
	 * @param parentId	指定范围内要移动的节点的父节点
	 * @param minIndex	指定节点要移动到的目标位置
	 * @param maxIndex	指定节点移动发生时所在的位置
	 */
	@SuppressWarnings("unchecked")
	public void upNode(int parentId, int minIndex, int maxIndex){
		// 指定的节点上移，意味着其范围内的节点各自加1
		StringBuffer sql = new StringBuffer("update navigate set number=number+1 where parentId = ");
		sql.append(parentId);
		if(maxIndex != -1){
			sql.append(" and number < ");
			sql.append(maxIndex);
		}
		if(minIndex != -1){
			sql.append(" and number >= ");
			sql.append(minIndex);
		}
		this.bulkUpdate(sql.toString());
	}
	/**
	 * 批量更新或删除操作
	 * @param sql
	 */
	public void bulkUpdate(String sql){
		Connection conection = null;
		Statement stmt = null;
		try{
			conection = DBConn.getConnection(); 
			stmt = conection.createStatement();
			stmt.executeUpdate(sql);
		}catch(Exception e){
			e.printStackTrace();			
		}finally{
			try{    	
	        	if (stmt != null) {
		        	try {
		        		stmt.close();
		        	} catch (SQLException sqlex) {
		        	}
		        	stmt = null;
	        	}
	        	if (conection != null) {
		        	try {
		        		conection.close();
		        	} catch (SQLException sqlex) {
		        	}
		        	conection = null;
	        	}
			}catch(Exception e){
				e.printStackTrace();
			}
		}
	}
}

package com.demo.core.dao;

import java.sql.Connection;
import java.sql.DriverManager;

public class DBConn {

	private static  String url = "jdbc:mysql://localhost:3306/langsin";
	private static  String username = "root";
	private static  String password = "tiger";
	private static  String driver = "com.mysql.jdbc.Driver";
	
	public static Connection getConnection(){
		Connection conn = null;
		try{
			Class.forName(driver);
			conn = DriverManager.getConnection(url,username,password);
		}catch(Exception e){
			e.printStackTrace();
		}
		return conn;
	}
}

数据库脚本:

create table navigate(
id int primary key auto_increment,
leaf int not null,
number int not null,
parentId int not null,
title varchar(50) not null,
url varchar(200) not null
);

页面:

<%@ page contentType="text/html;charset=UTF-8" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><html>
<head>
	<title>导航控制</title>
	<link rel="stylesheet" type="text/css" href="../scripts/ext/resources/css/ext-all.css">
    <script type="text/javascript" src="<%=basePath%>/scripts/ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="<%=basePath%>/scripts/ext/ext-all.js"></script>
	<script type="text/javascript" src="<%=basePath%>/dwr/engine.js"></script>
	<script type="text/javascript" src="<%=basePath%>/dwr/util.js"></script>
	<script type="text/javascript" src="<%=basePath%>/dwr/interface/NavigateManager.js"></script>
	<script type="text/javascript">
		 var glbRootPath = "<%=basePath%>";
	</script>
    <script type="text/javascript" src="<%=basePath%>/scripts/navigate/console-index.js"></script>
</head>
<body>
</body>
</html>

 

完毕!

 

  转载请标明出处 http://blog.csdn.net/shimiso 

技术交流群:361579846