EXTJS動态树的实现举例.docVIP

EXTJS动态树的实现举例 一、描述：通过dwr实现JS与后台的交互，从而实现动态树中叶子节点和目录节点的增加和编辑、以及节点的拖曳，节点的增删和拖曳都会改变自身以及它所在的目录节点下的相关节点的序号，能使得后台与前台同步。这个序号借助了tree中node的index。 1、相关基础： servlet、mysql、dwr、json 2、涉及的ExtJs中部分知识点： menu、tree、window以及事件机制 3、实现的效果图： a)ExtJs动态树-右键叶子节点菜单 b)ExtJs动态树-选择右键叶子节点菜单的“编辑”选项 c)ExtJs动态树-右键目录节点菜单 d)ExtJs动态树-选择右键目录节点菜单的“编辑”选项 e)ExtJs动态树-拖曳节点 4、导航数据表结构： 5、源码结构图： 6、页面结构图： 二、实现流程 JAVA源码部分： 1、数据库连接 Java代码 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?=?; ?? ????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; ?? ????} ?? }?? 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 = ; 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; } } 2、dao层： Java代码 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 N