easyUi--tree

加载tree时:

向后台发送的参数:id,(最外层的要给默认值)

从后台返回的参数:

json数组

// 节点ID

            private Long id;

            // 节点文本

            private String text;

            // 节点状态，'open' 或 'closed'，默认：'open'。如果为'closed'的时候，将不自动展开该节点。

            private String state;

$(function(){
	$("#contentCategory").tree({
		url : '/contentCategory/list',
		animate: true,
		method : "GET",
		onContextMenu: function(e,node){
            e.preventDefault();
            $(this).tree('select',node.target);
            $('#contentCategoryMenu').menu('show',{
                left: e.pageX,
                top: e.pageY
            });
        },
        //当光标离开编辑框，自动触发此方法
        onAfterEdit : function(node){
        	//把新建节点变成jquery对象
        	var _tree = $(this);
        	if(node.id == 0){
        		// 新增节点
        		$.post("/contentCategory/create",{parentId:node.parentId,name:node.text},function(data){
        			if(data.status == 200){
        				_tree.tree("update",{
            				target : node.target,
            				id : data.data.id
            			});
        			}else{
        				$.messager.alert('提示','创建'+node.text+' 分类失败!');
        				//ps:回滚啊,这应该在后台业务层判断
        			}
        		});
        	}else{
        		//修改节点
        		$.post("/contentCategory/update",{id:node.id,name:node.text});
        	}
        }
	});
});

对node节点的操作:

function menuHandler(item){
	//获取整颗树dom对象
	var tree = $("#contentCategory");
	//获取树形节点选中节点对象
	var node = tree.tree("getSelected");
	//如果传递参数是add,表示是添加节点
	if(item.name === "add"){
		//调用EasyUI 的 append方法添加节点
		tree.tree('append', {
            parent: (node?node.target:null),
            data: [{
                text: '新建分类',
                id : 0,
                parentId : node.id
            }]
        }); 
		//获取新添加节点dom对象
		var _node = tree.tree('find',0);
		//开始编辑，鼠标离开，触发事件onAfterEdit
		tree.tree("select",_node.target).tree('beginEdit',_node.target);
	}else if(item.name === "rename"){
		tree.tree('beginEdit',node.target);
	}else if(item.name === "delete"){
		$.messager.confirm('确认','确定删除名为 '+node.text+' 的分类吗？',function(r){
			if(r){
				
				//判断是不是父节点
				if(tree.tree("isLeaf",node.target)){
					//判断是不是有兄弟节点
					//有的话传递父节点信息,否则传递null
					var parentId;
					var parentNode = tree.tree("getParent",node.target);
					//alert(parentNode.text);
					//alert(tree.tree("getChildren",parentNode.target).length);
					if(tree.tree("getChildren",parentNode.target).length==1){
						//没有兄弟节点
						parentId = parentNode.id;
					}else{
						//有兄弟节点
						parentId = null;
					}
					
					$.post("/contentCategory/delete/",{parentId:parentId,id:node.id},function(data){
						//也要判断
						if(data.status==0){
							//不能删
							$.messager.alert('提示',node.text+' 节点下有内容,不能删除');
						}else{
							tree.tree("remove",node.target);
						}
					});	
				}else{
					$.messager.alert('提示',node.text+' 是父节点,不能删除');
				}
				
			}
		});
	}
}

页面

<div>
	 <ul id="contentCategory" class="easyui-tree"></ul>
</div>
<div id="contentCategoryMenu" class="easyui-menu" style="width:120px;" data-options="onClick:menuHandler">
    <div data-options="iconCls:'icon-add',name:'add'">添加</div>
    <div data-options="iconCls:'icon-remove',name:'rename'">重命名</div>
    <div class="menu-sep"></div>
    <div data-options="iconCls:'icon-remove',name:'delete'">删除</div>
</div>