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="#" 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

EasyUI Editable Tree的更多相关文章

easyUI 的tree 修改节点，sql递归查询
1.easyUI 的tree 修改节点: 我需要:切换语言状态,英文下, 修改根节点文本,显示英文. 操作位置:在tree的显示 $('#tree').tree(),onLoadSuccess事件方法 ...
easyui中tree控件添加自定义图标icon
来源于:http://blog.163.com/lintianhuanhai@126/blog/static/165587366201421704420256/ <!DOCTYPE html&g ...
做权限树时使用EasyUI中Tree
符合EasyUI中Tree的Json格式,我们先看一下,格式是如何的 [{ "id":1, "text":"My Documents", & ...
如何让EasyUI的Tree或者ComboTree节点不显示图标？
版本:jQuery EasyUI 1.3.2 通过测试,只需把节点的state属性设置为null即可使EasyUI的Tree或者ComboTree控件的节点不显示图标.
第二百二十六节，jQuery EasyUI，Tree(树)组件
jQuery EasyUI,Tree(树)组件本节课重点了解 EasyUI 中 Tree(树)组件的使用方法,这个组件依赖于 Draggable(拖动)和 Droppable(放置)组件. 一．加 ...
easyUI的tree
前端使用easyUI,放了一个tree,搞死了. easyUI的tree,后端传过来的数据,是json格式:然后easyUI向后端提交.请求时,会自动将节点的id附在url后面. 主要有两个注意的地方 ...
使用EasyUI中Tree
easyui里面的加载tree的两种方式第一种: 使用EasyUI中Tree 符合EasyUI中Tree的Json格式,我们先看一下,格式是如何的 [{ , "text":&qu ...
数据库中树形列表(以easyui的tree为例)
构造一棵easyui前台框架的一个树形列表为例后台框架是spring MVC+JPA. 先看一下数据库是怎么建的,怎么存放的数据下面是实体类 /** * 部门类用户所属部门(这里的部门是一个相对抽 ...
EasyUI使用tree方法生成树形结构加载两次的问题
html代码中利用class声明了easyui-tree,导致easyUI解析class代码的时候先解析class声明中的easyui-tree这样组件就请求了一次url:然后又调用js初始化代码请求 ...

随机推荐

js 利用iframe和location.hash跨域解决的方法，java图片上传回调JS函数跨域
奶奶的:折腾了我二天,最终攻克了!网上有非常多样例. 但跟我的都不太一样,费话不多说了,上图上代码: IE ,firefix,chrome 測试通过 js :这个主页面,部分代码, functi ...
关于Java的对象、数组、String类的具体用法
对象的行为: 1.内存分配(栈和堆的区别) 栈:保存局部变量的值(用来保存基本数据类型的值:保存类的实例的引用) 对:用来存放动态产生的数据,比如new出来的对象 2.调用方法方法返回一个值.方法不 ...
NET 2015
.NET 2015 英文原文:Understanding .NET 2015 Understanding 翻译为了解或理解,对于 .NET 来说,2015 年注定会更加精彩,所以标题就用了“精彩”这个 ...
NotePad++ for PHP
原文:NotePad++ for PHP 一.安装设置 1.首先根据你的系统下载相应的安装文件.http://notepad-plus-plus.org/ Notepad++插件:http://sou ...
Google Maps API Web Services
原文:Google Maps API Web Services 摘自:https://developers.google.com/maps/documentation/webservices/ Goo ...
<C++ 实现设计模式> 观察者模式
观察者模式,又称公布--订阅,mvc模式等. 通俗点讲,比方股票来说,非常多人关注一支股票,派一个人去观察股票的情况,一有变化(观察),就通知全部的预定这个消息的人. 而我们常见的mvc模式,v是指v ...
C# 调用Webservice并传递序列化对象
原文:C# 调用Webservice并传递序列化对象 C#动态调用WebService注意要点 1.动态调用的url后面注意一定要加上?WSDL 例如:string _url = "ht ...
最新发布树莓派2代Wi-Fi自动连接实战(适合初学者)
话说天地会珠海分舵在上几天才刚给大家分享了个海外资讯说树莓派2已经发布且Windows10加盟之类的资讯,具体请查看<海外优秀资讯抢先看8 - Windows 10 for Raspberry ...
异步提交form的时候利用jQuery validate实现表单验证
异步提交form的时候利用jQuery validate实现表单验证相信很多人都用过jquery validate插件,非常好用,并且可以通过下面的语句来自定义验证规则 // 电话号码验证 ...
在项目管理工具Redmine中使用SubVersion进行版本管理
原文:在项目管理工具Redmine中使用SubVersion进行版本管理在项目管理工具Redmine中使用SubVersion进行版本管理分类: Redmine2009-06-01 10:11 5 ...

EasyUI Editable Tree

EasyUI Editable Tree的更多相关文章

随机推荐

热门专题