文档章节

EasyUI Editable Tree

猪刚烈
 猪刚烈
发布于 2014/10/12 11:49
字数 979
阅读 104
收藏 0
点赞 0
评论 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
海淀
程序员
jquery easyui tree控件复选框选择处理

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

AIU_GS ⋅ 05/22 ⋅ 0

第七节 - 部门管理模块(画一个datagrid表格)

在easyui中,datagrid组件需要用一个table标签去渲染。 PS: 在easyui的表格组件中,我们唯一要关心的就是 1.提交到什么地址: url 2.显示哪些字段。 比如,ID字段,你需要在th中设置一个fie...

剽悍一小兔 ⋅ 05/11 ⋅ 0

基于easyui的文档管理系统springmvc+mybaits实现

开发背景 最近需要开发一个后台项目,想来想去决定使用easyui来做页面处理,于是就先自己做了一个练手的文件管理后台。 2. 架构 架构方面才用srpingmvc+mybaits+maven方式,页面用jsp,数据库...

无小农 ⋅ 06/11 ⋅ 0

第六节 - 部门管理模块(开始)

sql建表语句详见:https://www.jianshu.com/p/c88077ed9073 1.新建html模板 新建一个空白的txt文档,然后把后缀名改为.html 用任意一个编辑器打开,比如sublime,dreamweaver。 2.引入easyu...

剽悍一小兔 ⋅ 05/11 ⋅ 0

EasyUI Combobox中getValue和getText

在组织部项目中使用的Combobox都是通过<input>标签实现的,如下: <input id="checkPlace" class="easyui-combobox" name="checkPlace" data-options="valueField:'id',textField:'text',ur......

霜叶情 ⋅ 04/12 ⋅ 0

【php增删改查实例】第十四节 - 用户管理模块(起步)

从这一节开始,开始着手开发部门管理模块。 之后的内容就在此基础上进行增加。 1.用户查询 在目录中建立一个user文件夹,作为我们用户管理的模块。 打开这个文件,新建一个userManage.html文...

剽悍一小兔 ⋅ 06/01 ⋅ 0

第五节 - easyUI的基本使用

1. 列表组件 datagrid 1.1 创建一个grid.html 1.2 引入easyUI的资源文件 1.3 绘制表格组件 Html: 效果: 1.1 编写后台程序,查询部门数据 在当前文件夹,新建一个dept.php 进行数据库连接测...

剽悍一小兔 ⋅ 05/07 ⋅ 0

你这个easyui 列回显的问题最后解决了吗,求教

@小波刘 你好,想跟你请教个问题:https://www.oschina.net/question/10202142142095你这个easyui 列回显的问题最后解决了吗,求教

营养快线送你520 ⋅ 05/09 ⋅ 0

使用easyui的DataGrid实现即时编辑(CRUD)

首先来个users.sql /MySQL Data TransferSource Host: localhostSource Database: mydbTarget Host: localhostTarget Database: mydbDate: 2011/6/3 13:59:12/ SET FOREIGNKEYCHECKS=0; -- T......

styleman ⋅ 05/10 ⋅ 0

【php增删改查实例】第十三节 - EasyUI列格式化

因为easyUI的datagrid组件是横着一格一格加载数据的,一行加载好了之后才会去加载下一行。所谓的列格式化,就是在加载某一列的所有单元格时,对即将加载到这些单元格的数据进行二次包装。 比...

剽悍一小兔 ⋅ 06/01 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

如何利用Spring Cloud构建起自我修复型分布式系统

利用Netflix所打造的组件及各类大家熟知的工具,我们完全可以顺利应对由微服务以及分布式计算所带来的技术挑战。 在过去一年当中,微服务已经成为软件架构领域一个炙手可热的新名词,而且我们...

harries ⋅ 51分钟前 ⋅ 0

临近实习前的感想

再过两星期就要开始新的一段实习了,想想去年的这个时候也在实习,心中不免思绪万千,也一直想写对2017做个总结,但一直迟迟没有下笔。 2017年的春节,我就开始准备开学后找份实习。那时候就...

无精疯 ⋅ 今天 ⋅ 0

Spring AOP(面向切面编程)

Spring AOP概念: Spring AOP 可以劫持一个执行的方法,在方法执行之前或之后添加额外的功能。通常情况下,AOP把项目中需要在多处用到的功能,比如日志、安全和事物等集中到一个类中处理,而...

霍淇滨 ⋅ 今天 ⋅ 0

人工智能、机器学习、数据挖掘以及数据分析有什么联系?

人工智能是目前炙手可热的一个领域,所有的互联网公司以及各路大迦们纷纷表态人工智能将是下一个时代的革命性技术,可与互联网、移动互联网时代的变更相媲美;AlphaGo在围棋领域战胜人类最顶...

董黎明 ⋅ 今天 ⋅ 0

使用 vue-cli 搭建项目

vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli 一、 安装 node.js 首先需要安装node环境,可以直接到中...

初学者的优化 ⋅ 今天 ⋅ 0

设计模式 之 享元模式

设计模式 之 享元模式 定义 使用共享技术来有效地支持大量细粒度对象的复用 关键点:防止类多次创建,造成内存溢出; 使用享元模式来将内部状态与外部状态进行分离,在循环创建对象的环境下,...

GMarshal ⋅ 今天 ⋅ 0

SpringBoot集成Druid的最简单的小示例

参考网页 https://blog.csdn.net/king_is_everyone/article/details/53098350 建立maven工程 Pom文件 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM......

karma123 ⋅ 今天 ⋅ 0

Java虚拟机基本结构的简单记忆

Java堆:一般是放置实例化的对象的地方,堆分新生代和老年代空间,不断未被回收的对象越老,被放入老年代空间。分配最大堆空间:-Xmx 分配初始堆空间:-Xms,分配新生代空间:-Xmn,新生代的大小一...

算法之名 ⋅ 今天 ⋅ 0

OSChina 周日乱弹 —— 这么好的姑娘都不要了啊

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @TigaPile :分享曾惜的单曲《讲真的》 《讲真的》- 曾惜 手机党少年们想听歌,请使劲儿戳(这里) @首席搬砖工程师 :怎样约女孩子出来吃饭,...

小小编辑 ⋅ 今天 ⋅ 11

Jenkins实践3 之脚本

#!/bin/sh# export PROJ_PATH=项目路径# export TOMCAT_PATH=tomcat路径killTomcat(){pid=`ps -ef | grep tomcat | grep java|awk '{print $2}'`echo "tom...

晨猫 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部