easyUI tree 使用

1.首先建一个树的实体

public class Tree implements Serializable {

	/**
	 * 
	 * serialVersionUID:TODO（用一句话描述这个变量表示什么）
	 * 
	 * @since Ver 1.1
	 */

	private static final long serialVersionUID = 1L;

	/**
	 * 节点ID，对加载远程数据很重要。
	 */
	private String id;

	/**
	 * children: 一个节点数组声明了若干节点。
	 */
	private List<Tree> children;

	/**
	 * attributes: 被添加到节点的自定义属性。
	 */
	private Map<String, String> attributes = new HashMap<String, String>();

	/**
	 * text：显示节点文本。
	 */
	private String text;

	/**
	 * state：节点状态，'open' 或 'closed'，默认：'open'。在设置为'closed'的时候，当前节点的子节点将会从远程服务器加载他们。
	 */
	private String state = "closed";//'open' 

	private String iconCls;

	/**
	 * checked：表示该节点是否被选中。
	 */
	private boolean checked = false;

	/**
	 * 编码
	 */
	private String nodeCode;

	/**
	 * 父亲节点编码
	 */
	private String nodeParentCode;
	/**
	 * 节点
	 */
	private String jd;

	public String getJd() {
		return jd;
	}

	public void setJd(String jd) {
		this.jd = jd;
	}

	public Tree() {

	}

	public Tree(String id, String text) {
		this.id = id;
		this.text = text;
	}
	public Tree(String id, String text,String jd) {
		this.id = id;
		this.text = text;
		this.jd = jd;
	}
	/**
	 * 节点ID，对加载远程数据很重要。
	 *
	 * 获取id  
	 * @return id 节点ID，对加载远程数据很重要。  
	 */

	public String getId() {
		return id;
	}

	/**
	 * 设置节点ID，对加载远程数据很重要。  
	 * @param id 节点ID，对加载远程数据很重要。  
	 */

	public void setId(String id) {
		this.id = id;
	}

	/**
	 * children:一个节点数组声明了若干节点。
	 *
	 * 获取children  
	 * @return children children:一个节点数组声明了若干节点。  
	 */

	public List<Tree> getChildren() {
		return children;
	}

	/**
	 * 设置children:一个节点数组声明了若干节点。  
	 * @param children children:一个节点数组声明了若干节点。  
	 */

	public void setChildren(List<Tree> children) {
		this.children = children;
	}

	/**
	 * attributes:被添加到节点的自定义属性。
	 *
	 * 获取attributes  
	 * @return attributes attributes:被添加到节点的自定义属性。  
	 */

	public Map<String, String> getAttributes() {
		return attributes;
	}

	/**
	 * 设置attributes:被添加到节点的自定义属性。  
	 * @param attributes attributes:被添加到节点的自定义属性。  
	 */

	public void setAttributes(Map<String, String> attributes) {
		this.attributes = attributes;
	}

	/**
	 * text：显示节点文本。
	 *
	 * 获取text  
	 * @return text text：显示节点文本。  
	 */

	public String getText() {
		return text;
	}

	/**
	 * 设置text：显示节点文本。  
	 * @param text text：显示节点文本。  
	 */

	public void setText(String text) {
		this.text = text;
	}

	/**
	 * state：节点状态，'open'或'closed'，默认：'open'。在设置为'closed'的时候，当前节点的子节点将会从远程服务器加载他们。
	 *
	 * 获取state  
	 * @return state state：节点状态，'open'或'closed'，默认：'open'。在设置为'closed'的时候，当前节点的子节点将会从远程服务器加载他们。  
	 */

	public String getState() {
		return state;
	}

	/**
	 * 设置state：节点状态，'open'或'closed'，默认：'open'。在设置为'closed'的时候，当前节点的子节点将会从远程服务器加载他们。  
	 * @param state state：节点状态，'open'或'closed'，默认：'open'。在设置为'closed'的时候，当前节点的子节点将会从远程服务器加载他们。  
	 */

	public void setState(String state) {
		this.state = state;
	}

	/**
	 * iconCls
	 *
	 * 获取iconCls  
	 * @return iconCls iconCls  
	 */

	public String getIconCls() {
		return iconCls;
	}

	/**
	 * 设置iconCls  
	 * @param iconCls iconCls  
	 */

	public void setIconCls(String iconCls) {
		this.iconCls = iconCls;
	}

	/**
	 * checked：表示该节点是否被选中。
	 *
	 * 获取checked  
	 * @return checked checked：表示该节点是否被选中。  
	 */

	public boolean isChecked() {
		return checked;
	}

	/**
	 * 设置checked：表示该节点是否被选中。  
	 * @param checked checked：表示该节点是否被选中。  
	 */

	public void setChecked(boolean checked) {
		this.checked = checked;
	}

	/**
	 * 编码
	 *
	 * 获取nodeCode  
	 * @return nodeCode 编码  
	 */

	public String getNodeCode() {
		return nodeCode;
	}

	/**
	 * 设置编码  
	 * @param nodeCode 编码  
	 */

	public void setNodeCode(String nodeCode) {
		this.nodeCode = nodeCode;
	}

	/**
	 * 父亲节点编码
	 *
	 * 获取nodeParentCode  
	 * @return nodeParentCode 父亲节点编码  
	 */

	public String getNodeParentCode() {
		return nodeParentCode;
	}

	/**
	 * 设置父亲节点编码  
	 * @param nodeParentCode 父亲节点编码  
	 */

	public void setNodeParentCode(String nodeParentCode) {
		this.nodeParentCode = nodeParentCode;
	}

}

 

2.页面js

function initTree() {
				var areaTree =$('#UNITTREE').tree({
				 	checkbox: false,
				 	url: '<c:url value="/tree.do?action=loadRootTreeByUser" />',
				 	onBeforeExpand:function(node,param){
				 	var root = $('#UNITTREE').tree('getRoot');// 获取根节点
				 	root=root.id.substr(0,6).replace("00","").replace("00","");
			 		if(root.length == 2){
			 		if(node.id.length==15&&node.jd==3){
			 		    url = '<c:url value="/assessment.do?action=loadChildzbTree&ad_cd="/>' + node.id+ "&dt=" + new Date().getTime();
			 			}else if(node.id.length==15&&node.jd==4){
			 			url = '';
			 		}else if(node.id.length ==6){
			 			url = '<c:url value="/assessment.do?action=loadChildTree&ad_cd="/>' + node.id.substr(0,6)+ "&dt=" + new Date().getTime();
			 		}else if(node.id.length ==15){
			 			url = '<c:url value="/wr_ad.do?action=loadChildTree&ad_cd="/>' + node.id.substr(0,6)+ "&dt=" + new Date().getTime();
			 		}
			 		}else if(root.length ==4){
			 			if(node.id.length==15&&node.jd==3){
			 		    url = '<c:url value="/assessment.do?action=loadChildzbTree&ad_cd="/>' + node.id+ "&dt=" + new Date().getTime();
			 			}else if(node.id.length==15&&node.jd==4){
			 			url = '';
			 		}else if(node.id.length ==6){
			 			url = '<c:url value="/assessment.do?action=loadChildTree&ad_cd="/>' + node.id.substr(0,6)+ "&dt=" + new Date().getTime();
			 		}else if(node.id.length ==15){
			 			url = '<c:url value="/wr_ad.do?action=loadChildTree&ad_cd="/>' + node.id.substr(0,6)+ "&dt=" + new Date().getTime();
			 		}
			 		}
			 		areaTree.tree('options').url = url;// change the url
				 	},
				 	onContextMenu: function(e, node){
				 		var root = $('#UNITTREE').tree('getRoot');// 获取根节点
						e.preventDefault();
						// 查找节点
						$('#UNITTREE').tree('select', node.target);
						if(node == root) {
						
						} else {
							// 显示快捷菜单
							if(node.id.length==6){
							$('#treeMenu').menu('show', {
								left: e.pageX,
								top: e.pageY
							});
							}else if(node.jd==3){
							$('#treeMenu1').menu('show', {
								left: e.pageX,
								top: e.pageY
							});
							}else if(node.jd==4){
							$('#treeMenu2').menu('show', {
								left: e.pageX,
								top: e.pageY
							});
							}
						}
						
					},
				 	onLoadSuccess:function(node, data) {
				 		var parent=$('#UNITTREE').tree('getRoot');
				 		$('#UNITTREE').tree('expand',parent.target);
				 		//list_div hide
				 		$("#list_div").hide();
				 		$("#tree_div").show();
				 	}
				 });
			}

3.添加或修改节点后刷新

if(data.url=="1") {
							try {
								closeShowDiv();
								var node = $('#UNITTREE').tree('getSelected');
								var root = $('#UNITTREE').tree('getRoot');// 获取根节点
								$("#UNITTREE").tree('reload',node.target);
								$('#UNITTREE').tree('expand',node.target);
							} catch(err) {
							}
						}else if(data.url=="2"){
						try {
								closeShowDiv();
								var node = $('#UNITTREE').tree('getSelected');
								var p = $('#UNITTREE').tree('getParent',node.target);
								console.log(p);
								$("#UNITTREE").tree('reload',p.target);
								$('#UNITTREE').tree('expand',p.target);
							} catch(err) {
							}
						}

 

4.右键点击树显示的菜单

<div id="treeMenu1" class="easyui-menu" style="width: 180px;">
			<div onclick="showAddAssessment();" data-options="iconCls:'icon-add'">
				增加考核指标
			</div>
			<div onclick="showEditUnit();" data-options="iconCls:'icon-edit'">
				修改考核项目名称
			</div>
			<div onclick="showprojectDelete();"
				data-options="iconCls:'icon-remove'">
				删除考核项目
			</div>
		</div>

5.将数据转换为树节点数据

/**
	 * 
	 * 此方法描述的是：根据编码获取对象并转换成树节点对象
	 * 
	 * @Title: getWR_AD
	 * @author: philwilla@sina.com
	 * @param ad_cd
	 * @return
	 * @return List<Tree> 返回类型
	 * @version: Jul 8, 2018 1:14:25 PM
	 * @throws Exception
	 */
	public List<Tree> getWR_AD(String ad_cd) throws Exception {
		try {
			WR_AD_B o = wr_ad_b_EntityDao.getByAD_CD(ad_cd);
			List<Tree> list = new ArrayList<Tree>();
			Tree t = new Tree(o.getAd_cd(), o.getAd_nm());
			list.add(t);
			return list;
		} catch (Exception e) {
			logger.error("加载根节点出现异常", e);
			throw e;
		}
	}