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初始化代码请求 ...
随机推荐
- Mac+PhpStorm+XAMPP+Xdebug
Mac+PhpStorm+XAMPP+Xdebug 环境的配置 在上一篇 PHP 系列的文章<PHP 集成开发环境比较>中,我根据自己的亲身体验,非常简略的介绍和对比了几款常用的集成开 ...
- HDU 3523 Image copy detection（KM最大匹配）
HDU 3523 Image copy detection 题目链接 题意:这题事实上题意读懂就简单了,说白了就是1-n放到1-n列,每列的值为每列上数字和该数字的差的绝对值,然后求总和最小 思路:就 ...
- PHP_零基础学php
现在学习php的工具有很多,所以一般没必要去搭建环境,我用的工具是phpstudy,IDE是Eclipse 1,用php输出一段文字 <html> <head> <tit ...
- 基于Cocos2dx + box2d 愤怒的小鸟的实现Demo
1. Demo初始界面 2. 游戏界面 3. 精确碰撞检測 4. 下载 压缩文件文件夹 AngryBird source 愤慨的小鸟Demo源码,基于Cocos2dx C++,以及box2d技 ...
- C# 实现设置系统环境变量设置
原文:C# 实现设置系统环境变量设置 以前实现系统环境变量设置时是要在电脑属性--高级--环境变量设置,实现方式主要有2种, 修改注册表,添加环境变量 调用系统Kernel32.DLL函数,设置环境变 ...
- 程序员面试必备经典CTCI，谷歌面试官经典作品！
1.1 判断一个字符串中的字符是否唯一 1.2 字符串翻转 1.3 去除字符串中重复字符 1.8 利用已知函数判断字符串是否为另一字符串的子串 2.1 从链表中移除重复结点 2.2 实现一个算法从一个 ...
- 上海及周边地区产品技术创业QQ群：98905958
创业是一件骄傲的事,每一个行业里最棒人才都应该创业或參与创业或以一个创业者的心态进行职业远景规划: 创业是一件寻常的事,跟上班打工一样寻常,没有什么必须的前置条件才干够開始,也没有什么前置条件能保证我 ...
- 让Windows 8 / 8.1 以及 Windows Server 2012 / 2012 R2的任务管理器的性能面板，显示磁盘数据
运行[diskperf -y],关闭任务管理器,重新打开即可.
- ActiveReports 9实战教程（2）： 准备数据源（设计时、运行时）
原文:ActiveReports 9实战教程(2): 准备数据源(设计时.运行时) 在上讲中<ActiveReports 9实战教程(1): 手把手搭建环境Visual Studio 2013 ...
- testNg自动化，读取excel的数据
自己写了一个testng执行excel用例的小程序,主要是运行.xlsx的,需要支持xls可以自己扩展,分享一下.下载地址:http://yun.baidu.com/share/link?sharei ...