Easyui tree 从数据库中动态加载数据

用到easyui，顺便做了个关于easyui  tree 加载数据的DEMO，比较简单。

先看样式

 

废话少说，直接上代码。

1. 前端html代码（就是这么简单）

 

 <div region="west" class="west" title="导航菜单">
    <ul id="tree"></ul>
  </div>

2. js脚本代码   主要是在页面初始化的时候，去后台请求数据，然后组装成tree所需要的json格式

 

 

$(function () {
	    			    		
	    		// 实例化树菜单
	    		$("#tree").tree({
	    			url:'getNodesById.do?id=1',//请求路径，id为根节点的id
	    			onLoadSuccess:function(node,data){
	    				 var tree = $(this);
	    				 if(data){
	    					 $(data).each(function(index,d) {
	                             if (this.state=='closed') {
	                                 tree.tree('expandAll');
	                             }
	                         });
	    				 }
	    			}
	    			
	    		});
	    		

3. 数据库设计

 

 

其中id为表id，pid为父id，text为节点名称，attributes为其他（比如路径）

4. 后台请求代码

这里使用的是springmvc来实现的，其他的也是同理

处理json是需要自己去拼接成你需要的目录json数据格式。先拼接根节点，然后再循环遍历子节点，如果子节点还存在子节点，就会一直去遍历。

 

/**
	 * 初始化所有的树形节点
	 */
	@RequestMapping(value="/getNodesById")
	public void getNodesById(int id ,HttpServletResponse response){
		System.out.println("kaishi");
		String str ="";
		StringBuilder json = new StringBuilder();
		
		// 获得根节点
		Tree treeRoot = IopDataService.getNodeById(id);
		// 拼接根节点
		json.append("[");
		json.append("{\"id\":" +String.valueOf(treeRoot.getId())); 
        json.append(",\"text\":\"" +treeRoot.getText() + "\""); 
        json.append(",\"state\":\"open\"");
		// 获取根节点下的所有子节点
		List<Tree> treeList = IopDataService.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 = IopDataService.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();
		}
	}

所使用到的实体类和工具类方法

 

Tree.java

 

public class Tree {
	private int id;// 表id
	private int pid;// 父节点id
	private String text;// 节点内容
	private String attributes;// 请求路径
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public int getPid() {
		return pid;
	}
	public void setPid(int pid) {
		this.pid = pid;
	}
	public String getText() {
		return text;
	}
	public void setText(String text) {
		this.text = text;
	}
	public String getAttributes() {
		return attributes;
	}
	public void setAttributes(String attributes) {
		this.attributes = attributes;
	}
	
	
}

工具类

 

 

/**
	 * 处理数据集合，将数据集合转为符合格式的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(",\"state\":\"closed\""); 
            json.append("},");
		}
		String str = json.toString();
		str = str.substring(0, str.length()-1);
		
		System.out.println("---------"+str);
		return str;
	}

以上就是所有的代码了，代码没有优化，还有点小细节没有处理，但能生成树。大家看到就是一层一层的拼接的，其实用集合直接转也行，不过你需要将集合和封装好，可以定义一个实体或多个实体类，最里层的实体定义tree的属性，外层定义tree的一些属性和该节点所对应的数据集合，最外层定义为总的实体，一次类推，类似于bean实体包含一个List<bean2>,bean2中包含List<bean3>等，最后转为JSONObject也行。