java开发记录-EasyUI树代码示例

// 示例
$('#templateTree').tree({
				animate:true , //定义节点在展开或折叠的时候是否显示动画效果。
				lines:true ,//定义是否显示树控件上的虚线。
		        queryParams:{
		        },
			    url: compileUrl("${rc.contextPath}/template/listTemplate"),
			    loadFilter: function(data){//数据加载
			        if (data.success){
			            return data.data.vds;
			        }
			    },
			    onContextMenu: function (e, node) { //右键时触发事件                      
			    	e.preventDefault();
			        nodeId =node.id;
			    	$('#templateTree').tree('select', node.target);
			    	if(node.pid == "root"){
				         // 显示快捷菜单
				         $('#fatherNode').menu('show', {
				             left: e.pageX,
				             top: e.pageY
				         });
			    	}
			    	if(node.pid=="node"){
				         // 显示快捷菜单
				         $('#childNode').menu('show', {
				             left: e.pageX,
				             top: e.pageY
				         });
			    	}
			    	if(node.pid=="catalog"){
				         // 显示快捷菜单
				         $('#catalogNode').menu('show', {
				             left: e.pageX,
				             top: e.pageY
				         });
			    	}	
			    },
			    onLoadSuccess(){
			      /*	if(nodeId!=null){
			      		var node = $("#templateTree").tree('find', nodeId);
						$("#templateTree").tree('expandTo', node.target);
						$("#templateTree").tree('expand', node.target);
			      	}*/
			    	 //将记录已展开节点ID的数组容器转存到另一个数组容器中
	                var list = [];
	                for (var j = 0; j < recordNodes.length; j++) {
	                    list.push(recordNodes[j])
	                }
	                //这里必须将已记录的节点转存到另一个数组中,
	                //因为执行collapseAll方法后,会触发onBeforeCollapse事件
	                //会清空已记录的节点数据
	                $("#templateTree").tree("collapseAll");
	                for (var i = 0; i < list.length; i++) {
	                 var node =$('#templateTree').tree('find',list[i])
	                    $('#templateTree').tree('expand', node.target);
	                }
			    },
			    onBeforeExpand: function (node) {
	                //每次执行展开一个节点的操作时
	                //记录被展开的节点ID
	                recordNodes.push(node.id.toString());
	            },
	            onBeforeCollapse: function (node) {
	                //每次执行折叠一个节点的操作时
	                //数组容器去除被折叠的节点ID
	                var i = recordNodes.indexOf(node.id.toString());
	                if (i >= 0) {
	                    recordNodes.splice(i, 1);
	                }
	            },
			    onDblClick:function(node){//双击事件 动态添加tab页
			    	
			    }	
			});

//子菜单样式
	<div id="childNode" class="easyui-menu text-center" data-options=" hideOnUnhover:false">
			     <div onclick="updateTreeNode()" >修改</div>
			     <div onclick="removeNode()" >删除</div>
			</div>