文档章节

EasyUI Editable Tree

猪刚烈
 猪刚烈
发布于 2014/10/12 11:49
字数 979
阅读 169
收藏 0

精选30+云产品,助力企业轻松上云!>>>

效果如图:


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="#" onclick="javascript:$('#tt').etree('create')">Create</a>
     <a href="#" onclick="javascript:$('#tt').etree('edit')">Edit</a>
     <a href="#" onclick="javascript:$('#tt').etree('destroy')">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" class="com.home.web.TreeAction">
			<result type="json">
				<param name="root">treeNodes</param>
			</result>
		</action>
		<action name="treeCreate" method="treeCreate" class="com.home.web.TreeAction">
			<result type="json">
				<param name="root">treeNodes</param>
			</result>
		</action>
		<action name="treeUpdate" method="treeUpdate" class="com.home.web.TreeAction">
			<result type="json">
				<param name="root">treeNodes</param>
			</result>
		</action>
		<action name="treeDestroy" method="treeDestroy" class="com.home.web.TreeAction">
			<result type="json">
				<param name="root">treeNodes</param>
			</result>
		</action>
		<action name="treeDnd" method="treeDnd" class="com.home.web.TreeAction">
			<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封装类参见http://blog.csdn.net/itmyhome1990/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/itmyhome/7856545


作者:itmyhome

出处:http://blog.csdn.net/itmyhome1990/article/details/38846521


猪刚烈

猪刚烈

粉丝 22
博文 708
码字总数 110
作品 1
海淀
程序员
私信 提问
加载中
请先登录后再评论。
jQuery-EasyUI 1.2.3 发布

Current Version: 1.2.3 ChangeLog: Bug window: Cannot resize the window with iframe content. fixed. tree: The node will be removed when dragging to its child. fixed. combogrid: T......

ejzhang
2011/04/26
6.2K
3
jquery easyui 验证框

使用过程中的一积累,备查。 EasyUI 验证框使用方法: //* missingMessage:未填写时显示的信息 validType:验证类型见下示例 invalidMessage:无效的数据类型时显示的信息 required="true" ...

wqw-scau
2015/04/14
25
0
EasyUI用到表单验证,备用

使用过程中的一积累,备查。 EasyUI 验证框使用方法: //* missingMessage:未填写时显示的信息 validType:验证类型见下示例 invalidMessage:无效的数据类型时显示的信息 required="true" ...

pake35110
2015/06/30
2
0
jquery easyui 验证框

使用过程中的一积累,备查。 EasyUI 验证框使用方法: //* missingMessage:未填写时显示的信息 validType:验证类型见下示例 invalidMessage:无效的数据类型时显示的信息 required="true" ...

背起行囊去远行
2013/04/02
330
0
关于EasyUI使用tree方法生成树形结构加载两次的问题

html代码中利用class声明了easyui-tree,导致easyUI解析class代码的时候先解析class声明中的easyui-tree这样组件就请求了一次url;然后又调用js初始化代码请求一次url。这样导致了重复加载,解...

Doublec
2015/04/21
4K
0

没有更多内容

加载失败,请刷新页面

加载更多

Mysql数据库之基础命令行概述篇

一、连接MYSQL   格式: mysql -h主机地址 -u用户名 -p用户密码   1、例1:连接到本机上的MYSQL。   首先在打开DOS窗口,然后进入目录 mysqlbin,再键入命令mysql -uroot -p,回车后提...

osc_dh3qbz0a
28分钟前
6
0
python的django项目制作思路(详细)个人总结

总结: 1.回顾django建站的思路: 一、Django简介 1.web框架介绍 别人已经设定好的一个web网站模版,你学习它的规则,然后”填空“或”修改“成自己需要的样子。一般web框架的架构是这样的:...

osc_qmxpov5s
28分钟前
10
0
时钟分频与时钟切换

时钟分频与时钟切换 1、时钟分频 1.1 偶数分频 1.2 奇数分频 1.2.1 占空比不要求50%的分频器 1.2.2 占空比50%的奇数分频器 2、时钟切换 2.1 有毛刺(glitch)的时钟切换 2.2、无毛刺时钟切换...

osc_80egdgxz
30分钟前
5
0
缓存面试题

项目中缓存是如何使用的?为什么要用缓存?缓存使用不当会造成什么后果? 如何使用 如何使用是回答用缓存来干嘛了。 回答点:缓存能用来干嘛,项目中的缓冲用来干嘛了。 缓存当然是用来缓冲存...

osc_y7d83ufc
32分钟前
7
0
如何忽略Git中的某些文件 - How to ignore certain files in Git

问题: I have a repository with a file, Hello.java . 我有一个带有文件Hello.java的存储库。 When I compile it, an additional Hello.class file is generated. 当我编译它时,会生成一个......

javail
33分钟前
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部