文档章节

EasyUI Editable Tree

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

效果如图:


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


本文转载自:http://blog.csdn.net/itmyhome1990/article/details/38846521

共有 人打赏支持
猪刚烈
粉丝 22
博文 708
码字总数 110
作品 1
海淀
程序员
关于EasyUI使用tree方法生成树形结构加载两次的问题

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

Doublec
2015/04/21
0
0
python递归实现Easyui combotree树

原文链接:http://www.huangdc.com/43 自动化发布系统在选择文件时,使用jQuery EasyUI 创建页面 树形菜单(Tree) 及 后端python 递归实现Easyui combotree 树。这里主要分享2点: 1、linux 中...

dchuang
2014/11/19
0
0
easyui tree异步加载

easyui tree的异步加载实现很简单,easyui的中文API文档中有实例(http://api.btboys.com/easyui/)——创建异步树形菜单,就是在tree node 元素中要有一个id属性,同时还需要state的属性(s...

菠萝啊哈哈
2013/04/11
0
0
EasyUI的功能树之异步树

最近几个项目都用到了EasyUI这个Jquery框架,目前感觉起来还是很好使的,展示效果很好,帮助文档什么的资料很多,而且互联网上Easy粉很多,大多数拥护和喜爱EasyUI的粉丝们都愿意在网络平台互...

易水寒丶开源
2015/11/17
0
1
jquery easyui tree控件复选框选择处理

------上级状态改变(勾选或取消勾选),所有下级状态跟着改变 ,在tree控件的onCheck事件中实现--------- cascadeCheck: false,//默认为true表示上下级勾选联动,false表示取消联动 onCheck: f...

AIU_GS
05/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

day60-20180818-流利阅读笔记-待学习

钉钉:工作的归工作,生活的…也归工作? 毛西 2018-08-18 1.今日导读 你用过“钉钉”么?被公司要求使用钉钉的感受是如何的呢?这款阿里巴巴旗下的移动办公社交平台在弯道超车微信、为许多企...

aibinxiao
43分钟前
6
0
Kubernetes的HTTPS和证书问题,汇总

通过Kubernetes建立服务网站,需要干的事情和HTTPS和证书问题,汇总如下: 建立Nginx服务器 搞服务器第一步,Ubuntu 18.04设置静态IP 安装Nginx服务。 Kubernetes的deployment使用 创建服务,...

openthings
59分钟前
2
0
php 使用redis锁限制并发访问类

1.并发访问限制问题 对于一些需要限制同一个用户并发访问的场景,如果用户并发请求多次,而服务器处理没有加锁限制,用户则可以多次请求成功。 例如换领优惠券,如果用户同一时间并发提交换领...

豆花饭烧土豆
今天
0
0
Linux环境搭建 | 手把手教你配置Linux虚拟机

在上一节 「手把你教你安装Linux虚拟机」 里,我们已经安装好了Linux虚拟机,在这一节里,我们将配置安装好的Linux虚拟机,使其达到可以开发的程度。 Ubuntu刚安装完毕之后,还无法进行开发,...

良许Linux
今天
0
0
(三)Nginx配置·续

概述 前文写了关于Nginx环境配置,但是还没有完,接下来将会继续讲三个相关的配置 主要是以下三个 1.Nginx访问日志 2.Nginx日志切割 3.静态文件不记录日志和过期时间 Nginx访问日志 1.先看看...

杉下
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部