EasyUI Editable Tree

时间：2016-09-23 11:03:34 阅读：164 评论：0 收藏：0 [点我收藏+]

标签：

<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‘

ul id="tt"></ul>

$(‘#tt‘).etree({
	url: ‘tree_data.json‘,
	createUrl: ...,
	updateUrl: ...,
	destroyUrl: ...,
	dndUrl: ...
});

设置url,createUrl,updateUrl,destroyUrl,dndUrl属性来自动同步数据到服务器