Easyui tree 节点的增删改以及同后台交互

         初试easyui，功能挺强大，但是研究了一下，逐渐攻克easyui的各个模块，今天主要是关于easyui tree的一些使用主要包括四方面，初始化加载tree（当然这里使用初始化tree数据并不是页面生成的，而是通过后台取出来的数据组装成的json  tree，然后生成树），添加子节点，修改子节点，删除子节点，以及叶子节点加载tab，根据数据库数据来生成图表趋势图。

1. Tree的初始化

           由页面静态加载的，大家都知道了，easyui API也有，我就不再赘述了，这里主要是怎么通过ajax后台请求数据，并生成tree。

        我们一般都是会配合一个登录系统来实现，用户登录之后会出现tree的页面，在页面初始化的时候加载tree，就需要onload时间来实现，或者使用jQuery的$(function (){})；也能实现。

        代码如下：

                 $(function () {
	    		// 登录成功提示
	    		$.messager.show({
	    			title : '提示',
	    			msg : "登录成功"
	    		});
                      // 一下添加tree代码

 });

这样当页面元素加载完成就会调用function，这时在里面加上tree的加载就行。

(1). 树的请求数据     

// 实例化树菜单
	    		$("#tree").tree({
	    			url:'getNodesById.do?id=1',// 请求路径
	    			onLoadSuccess:function(node,data){// 成功加载树之后的操作
	    				 var tree = $(this);
	    				 if(data){
	    					 $(data).each(function(index,d) {// 遍历生成节点
	                             if (this.state=='closed') {
	                                 tree.tree('expandAll');
	                             }
	                         });
	    				 }
	    			}
	    			
	    		});

上面的代码就是简单的加载tree的方法，其中url就是请求路径，在这里会根据url去同后台进行交互，后台只要组装好数据，response后前天就行。

(2)   后台请求并组装json数据       Java代码实现如下；

/**
	 * 初始化所有的树形节点
	 * @throws UnsupportedEncodingException 
	 */
	@RequestMapping(value="/getNodesById")
	public void getNodesById(@RequestParam int id ,HttpServletRequest request,HttpServletResponse response) throws UnsupportedEncodingException{
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		System.out.println("kaishi");
		String str ="";
		StringBuilder json = new StringBuilder();
		
		// 获得根节点
		Tree treeRoot = treeService.getNodeById(id);
		// 拼接根节点
		json.append("[");
		json.append("{\"id\":" +String.valueOf(treeRoot.getId())); 
        json.append(",\"text\":\"" +treeRoot.getText() + "\""); 
        json.append(",\"state\":\"open\"");
		// 获取根节点下的所有子节点
		List<Tree> treeList = treeService.getNodesById(id);
		// 遍历子节点下的子节点
		if(treeList!=null && treeList.size()!=0){
			json.append(",\"children\":[");
			for (Tree t : treeList) {
				
				json.append("{\"id\":" +String.valueOf(t.getId())); 
	            json.append(",\"text\":\"" +t.getText() + "\""); 
	            json.append(",\"state\":\"open\""); 
				
				// 该节点有子节点
				// 设置为关闭状态,而从构造异步加载tree
			
				List<Tree> tList = treeService.getNodesById(t.getId());
				if(tList!=null && tList.size()!=0){// 存在子节点
					 json.append(",\"children\":[");
					 json.append(dealJsonFormat(tList));// 存在子节点的都放在一个工具类里面处理了
					 json.append("]");
				}
				json.append("},");
			}
			str = json.toString();
			str = str.substring(0, str.length()-1);
			str+="]}]";
			
		}
		try {
			
			System.out.println("输出json数据"+str);
			response.getWriter().print(str);
		} catch (IOException e) {
			e.printStackTrace();
		}
	}



/**
     * 处理数据集合，将数据集合转为符合格式的json
     * @param tList 参数
     * @return json字符串
     */
    public String dealJsonFormat(List<Tree> tList){
        StringBuilder json = new StringBuilder();
        for (Tree tree : tList) {
            json.append("{\"id\":" +String.valueOf(tree.getId())); 
            json.append(",\"text\":\"" +tree.getText() + "\""); 
            json.append(",\"attributes\":\""+tree.getAttributes()+"\""); 
            json.append("},");
        }
        String str = json.toString();
        str = str.substring(0, str.length()-1);
        
        System.out.println("---------"+str);
        return str;
    }

// 输出的json格式

[
    {
        "id": 1,
        "text": "功能菜单",
        "state": "open",
        "children": [
            {
                "id": 2,
                "text": "北京",
                "state": "open",
                "children": [
                    {
                        "id": 4,
                        "text": "北京IOP数据",
                        "attributes": "showAreaList.do?"
                    },
                    {
                        "id": 5,
                        "text": "北京虚拟机数据",
                        "attributes": "showAreaList.do?"
                    }
                ]
            },
            {
                "id": 3,
                "text": "上海",
                "state": "open",
                "children": [
                    {
                        "id": 6,
                        "text": "上海IOP数据",
                        "attributes": "showAreaList.do?"
                    },
                    {
                        "id": 7,
                        "text": "上海虚拟机数据",
                        "attributes": "showAreaList.do?"
                    }
                ]
            }
        ]
    }
]

上面就是输出的json格式，这样返回到前端就可以生成tree了。

2. 节点的增删改

             这个我没有研究出来直接在添加修改时，焦点聚焦到选中的节点，使用了另外一种方法，使用easyui的dialog弹出窗来实现的，这个不要见笑了。