easyui-tree实现及针对不同结点添加不同右键菜单

9 篇文章 0 订阅
8 篇文章 0 订阅

页面加载时向后台发送请求获取tree数据

	$(function(){
		$('#tree').tree({
	          url:'${pageContext.request.contextPath }/document/getMenuList',
	          animate:true,
	          checkbox:true,
	          onlyLeafCheck:true,//叶子结点添加复选框
	          onClick:function(node){//单击node事件
	            alert(node.text);
	          },
	          onContextMenu: function(e, node){ //给结点添加右键菜单 
	                        e.preventDefault();  //阻止右键默认事件
	                        var root = $('#tree').tree('getParent', node.target)//判断该结点有没有父结点
		                        if(root == null){//若成立则为根结点,添加一个右键样式,可以添加子节点
		                        	$('#parentNode').menu('show', {  
			                            left: e.pageX,  
			                            top: e.pageY  
			                        });
		                        }
	                        var leaf = $('#tree').tree('isLeaf', node.target);
	                        var parentOne = $('#tree').tree('getParent', node.target);
	                        var parentTwo = $('#tree').tree('getParent', parentOne.target);
	                        if(leaf && parentTwo != null){//本项目要求tree只有3层,若此时条件成立,说明已经是最底层(第三层),右键菜单去除添加节点
	                        	 $('#leaf').menu('show', {  
			                            left: e.pageX,  
			                            top: e.pageY  
			                        });
	                        }else{//此时说明还可以添加子节点
	                        	 $('#parentNode').menu('show', {  
			                            left: e.pageX,  
			                            top: e.pageY  
			                        });
	                        }
	                      
	                    }  
	        });
	})
节点右键菜单代码,添加在body体中

        <ul id="tree" style="margin:16px"></ul>
        <div id="leaf" class="easyui-menu" style="width: 120px;">
	        <div οnclick="removeNode()" iconcls="icon-remove">删除节点</div>
       		<div οnclick="updateNode()" iconcls="icon-edit">修改节点</div>
    	</div>
    	<div id="parentNode" class="easyui-menu" style="width: 120px;">
	        <div οnclick="addNode()" iconcls="icon-add">添加节点</div>
       		<div οnclick="updateNode()" iconcls="icon-edit">修改节点</div>
    	</div>

后台java代码

controller层

	@RequestMapping(value = "/getMenuList", method = RequestMethod.POST)
	public ResponseEntity<?> getMenuList(){
		List<VEasyuiTree> vtList = new ArrayList<VEasyuiTree>();
		vtList = folderService.getMenuList();
		return new ResponseEntity<Object>(vtList, HttpStatus.OK);
	}
service 层

	@Override
	public List<VEasyuiTree> getMenuList() {
		List<VEasyuiTree> vtList = new ArrayList<VEasyuiTree>();
		List<Folder> parents = folderDao.findRootNode();//获取顶级父节点,该字段一般为空,或为特殊值
		if(parents.size() >0){
			for(Folder folder: parents){
				VEasyuiTree vEasyuiTree = getTree(folder);//查询该父节点下所有子节点,并转换成easyui-tree数据样式
				vtList.add(vEasyuiTree);
			}
		}
		return vtList;
	}
	public VEasyuiTree getTree(Folder folder){
		List<VEasyuiTree> vtList = new ArrayList<VEasyuiTree>();
	        //转换成Easyui数据
	    	VEasyuiTree model = GetVTree(folder);
	        List<Folder> childs = GetFolderByParentId(folder.getId());
	        if (!childs.isEmpty()){
	        	//递归子节点
	        	int j = 0;
	            for(Folder e: childs){
	            	VEasyuiTree vt = GetVTree(e);
	            	vtList.clear();
	            	vtList.add(j, vt);
	            	model.setChildren(vtList);
	            	List<Folder> lf = GetFolderByParentId(e.getId());
	            	if(lf.size() > 0){
	            		int i = 0;
	            		for(Folder ele:lf){
	            			List<VEasyuiTree> vtList1 = new ArrayList<VEasyuiTree>();
	            			VEasyuiTree vEasyuiTree = model.getChildren().get(j);
	            			VEasyuiTree vts = GetVTree(ele);
	            			vtList1.add(i, vts);
	    	            	vEasyuiTree.setChildren(vtList1);
	            			i++;
	            		}
	            	}
	            	j++;
	            }
	        }
	        return model;
	    }
		private VEasyuiTree GetVTree(Folder folder) {
			VEasyuiTree vt = new VEasyuiTree();
			vt.setId(folder.getId());
			vt.setState("close");
			vt.setText(folder.getFolder_name());
			return vt;
		}
VEasyuiTree 实体类code
<pre name="code" class="java">import java.util.List;

public class VEasyuiTree {
	
	private String id;
	private String text;
	private String state;
	private boolean ischecked;
	private Object attributes;
	private  List<VEasyuiTree> children;
	
	
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getText() {
		return text;
	}
	public void setText(String text) {
		this.text = text;
	}
	public String getState() {
		return state;
	}
	public void setState(String state) {
		this.state = state;
	}
	public boolean isIschecked() {
		return ischecked;
	}
	public void setIschecked(boolean ischecked) {
		this.ischecked = ischecked;
	}
	public Object getAttributes() {
		return attributes;
	}
	public void setAttributes(Object attributes) {
		this.attributes = attributes;
	}
	public List<VEasyuiTree> getChildren() {
		return children;
	}
	public void setChildren(List<VEasyuiTree> children) {
		this.children = children;
	}
	
}


 


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值