1. 云图网首页
  2. 技术专区
  3. 编程笔记

EasyUI Editable Tree详解编程语言

• 编程笔记

效果如图：

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封装类参见blog.ytso.com/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/blog.ytso.com/7856545

作者：blog.ytso.com

出处：blog.ytso.com/article/details/38846521

原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/14515.html

赞 (0)
0
上一篇 2021年7月19日
下一篇 2021年7月19日

相关推荐

发表回复

登录后才能评论