EasyUI Editable Tree详解编程语言

效果如图：

Create Tree

 ul id="tt" /ul 

$(#tt).etree({ 

 url: tree_data.json, 

 createUrl: ..., 

 updateUrl: ..., 

 destroyUrl: ..., 

 dndUrl: ... 

});

设置url,createUrl,updateUrl,destroyUrl,dndUrl属性来自动同步数据到服务器

url:  返回树的数据

createUrl:  当创建一个新的节点,tree将传入名为parentId即表示父节点ID的参数

updateUrl:  当更新一个节点,将传入id和text参数到服务器

destroyUrl:  当销毁一个节点,传入id参数

dndUrl:  当拖放节点,将传入以下参数到服务器。ID：被拖动的ID,targetId:被拖至到的ID

Demo：

 body 

 a href="#" Create /a 

 a href="#" Edit /a 

 a href="#" Destroy /a 

 ul id=tt /ul 

 /body 

 script type="text/javascript" 

 $(#tt).etree({ 

 url: treeLoad.action, 

 createUrl: treeCreate.action, 

 updateUrl: treeUpdate.action, 

 destroyUrl: treeDestroy.action, 

 dndUrl: treeDnd.action 

 }); 

 /script 

struts.xml

 !DOCTYPE struts PUBLIC 

 "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" 

 "http://struts.apache.org/dtds/struts-2.0.dtd" 

 struts 

 package name="tree_json" extends="json-default" 

 action name="treeLoad" method="treeLoad" 

 result type="json" 

 param name="root" treeNodes /param 

 /result 

 /action 

 action name="treeCreate" method="treeCreate" 

 result type="json" 

 param name="root" treeNodes /param 

 /result 

 /action 

 action name="treeUpdate" method="treeUpdate" 

 result type="json" 

 param name="root" treeNodes /param 

 /result 

 /action 

 action name="treeDestroy" method="treeDestroy" 

 result type="json" 

 param name="root" treeNodes /param 

 /result 

 /action 

 action name="treeDnd" method="treeDnd" 

 result type="json" 

 param name="root" treeNodes /param 

 /result 

 /action 

 /package 

 /struts 

需要封装对象Tree

public class TreeNode { 

 private static final long serialVersionUID = 1L; 

 private String id; // 节点id 

 private String text; // 显示的节点文本 

 private String state = "open"; // 节点状态,open或者 closed,默认是 open 

 private boolean checked; // 指明检查节点是否选中. 

 public TreeNode() { 

 public TreeNode(String id, String text, String state, boolean checked) { 

 this.id = id; 

 this.text = text; 

 this.state = state; 

 this.checked = checked; 

 //省略setXXX(),getXXX() 

}

Action方法实现

/** 

 * 查询数据使用JDBC进行操作 

public class TreeAction { 

 private List TreeNode treeNodes = new ArrayList TreeNode // 返回的JSON数据 

 private String id; // 树组件使用的ID 

 private String parentId; // 树父ID 

 private String text; // 显示文本 

 private String targetId; // 拖拽目标ID 

 /** 

 * 树展现 

 * @return 

 public String treeLoad() { 

 Statement sta = null; 

 ResultSet rs = null; 

 try { 

 Connection conn = ConnectionManager.getConnection(); 

 sta = conn.createStatement(); 

 String sql = ""; 

 if (id == null) { // 如果id为null或0则是根节点 

 sql = "select * from easyui_tree where parentid =  or parentid = 0"; 

 } else { // 查询下面的子节点 

 sql = "select * from easyui_tree where parentid = " + id; 

 rs = sta.executeQuery(sql); 

 while (rs.next()) { 

 String id = rs.getString("id"); 

 String name = rs.getString("name"); 

 TreeNode node = new TreeNode(); 

 node.setId(id); 

 node.setText(name); 

 node.setChecked(false); 

 // 判断是否有子节点，如果有则closed 否则open 

 if (isChildrenNode(id)) { 

 node.setState("closed"); 

 } else { 

 node.setState("open"); 

 treeNodes.add(node); 

 // 关闭所有资源 

 ConnectionManager.closeAll(rs, sta, conn); 

 } catch (SQLException e) { 

 e.printStackTrace(); 

 return "success"; 

 /** 

 * 创建tree 

 * @return 

 public String treeCreate() { 

 Statement sta = null; 

 ResultSet rs = null; 

 try { 

 Connection conn = ConnectionManager.getConnection(); 

 sta = conn.createStatement(); 

 //ID为自增,无需插入 

 String sql = "insert into easyui_tree(NAME,parentid) values(," + parentId + ")"; 

 sta.execute(sql); 

 // 关闭所有资源 

 ConnectionManager.closeAll(rs, sta, conn); 

 } catch (SQLException e) { 

 e.printStackTrace(); 

 return "success"; 

 /** 

 * 修改tree 

 * @return 

 public String treeUpdate() { 

 Statement sta = null; 

 ResultSet rs = null; 

 try { 

 Connection conn = ConnectionManager.getConnection(); 

 sta = conn.createStatement(); 

 String sql = "update easyui_tree set name = " + text + " where id = " + id + ""; 

 sta.executeUpdate(sql); 

 // 关闭所有资源 

 ConnectionManager.closeAll(rs, sta, conn); 

 } catch (SQLException e) { 

 e.printStackTrace(); 

 return "success"; 

 /** 

 * 删除tree 

 * @return 

 public String treeDestroy() { 

 Statement sta = null; 

 ResultSet rs = null; 

 try { 

 Connection conn = ConnectionManager.getConnection(); 

 sta = conn.createStatement(); 

 String sql = "delete from easyui_tree where id = " + id + ""; 

 sta.executeUpdate(sql); 

 // 关闭所有资源 

 ConnectionManager.closeAll(rs, sta, conn); 

 } catch (SQLException e) { 

 e.printStackTrace(); 

 return "success"; 

 /** 

 * 拖拽 

 * @return 

 public String treeDnd() { 

 Statement sta = null; 

 ResultSet rs = null; 

 try { 

 Connection conn = ConnectionManager.getConnection(); 

 sta = conn.createStatement(); 

 //将parentid改为拖拽至目标ID 

 String sql = "update easyui_tree set parentid = " + targetId + " where id = " + id + ""; 

 sta.executeUpdate(sql); 

 // 关闭所有资源 

 ConnectionManager.closeAll(rs, sta, conn); 

 } catch (SQLException e) { 

 e.printStackTrace(); 

 return "success"; 

 /** 

 * 判断是否有子节点 

 * @return 

 public boolean isChildrenNode(String id) { 

 Boolean flag = false; 

 Statement sta = null; 

 ResultSet rs = null; 

 try { 

 Connection conn = ConnectionManager.getConnection(); 

 sta = conn.createStatement(); 

 String sql = "select * from easyui_tree where parentid = " + id; 

 rs = sta.executeQuery(sql); 

 while (rs.next()) { 

 flag = true; 

 // 关闭所有资源 

 ConnectionManager.closeAll(rs, sta, conn); 

 } catch (SQLException e) { 

 e.printStackTrace(); 

 return flag; 

 //省略setXXX(),getXXX()方法 

}

获取Connection的ConnectionManager封装类参见blog.ytso.com/article/details/38818449

数据库脚本

create database easyui; 

use easyui; 

CREATE TABLE easyui_tree( 

 id INT PRIMARY KEY NOT NULL AUTO_INCREMENT, 

 NAME VARCHAR(10), 

 parentid VARCHAR(10) 

insert into easyui_tree values(1,北京,0); 

insert into easyui_tree values(2,上海,0); 

insert into easyui_tree values(3,深圳,0); 

insert into easyui_tree values(4,广州,0); 

insert into easyui_tree values(5,海淀,1); 

insert into easyui_tree values(6,朝阳,1); 

insert into easyui_tree values(7,昌平,1); 

insert into easyui_tree values(8,西二旗,5); 

insert into easyui_tree values(9,上地,5);

项目源码下载：http://download.csdn.net/detail/blog.ytso.com/7856545

作者：blog.ytso.com

出处：blog.ytso.com/article/details/38846521

14515.html