最近需要用到EASYUI中的TREE功能，以前我是直接拼接成<UL><LI>发现这样拼完之后在更改树后对树的刷新不是很理想，现改用JSON格式，首先分析TREE中JOSN格式如下：

?

[{
	"id":1,
	"text":"流程分类",
	"children":[{
		"id":11,
		"text":"门禁流程分类",
		"checked":true
	},{
		"id":113,
		"text":"子门禁流程分类",
		"children":[{
			"id":1131,
			"text":"子子门禁流程分类"
		},{
			"id": 8,
			"text":"Async Folder",
			"state":"closed"
		}]
	}]
},{
	"id":3
	"text":"行政",
	"children":[{
		"id":"31",
		"text":"加班"
	},{
		"id":"33",
		"text":"请假"
	}]
}]

?可以看出这种模式是由三个属性所组成，ID TEXT 集合，根据分析 我们需要对此模式建立一个BEAN的结构模型，建立TREENODE：

package com.odbpo.beans;

import java.util.List;

public class TreeNode {

	private int id;

	private String text;
	
	private int pid;

	private List<TreeNode> children;

	public int getPid() {
		return pid;
	}

	public void setPid(int pid) {
		this.pid = pid;
	}

	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

	public String getText() {
		return text;
	}

	public void setText(String text) {
		this.text = text;
	}

	public List<TreeNode> getChildren() {
		return children;
	}

	public void setChildren(List<TreeNode> children) {
		this.children = children;
	}
}

?BEAN构建完成，那么接下来分析如何往BEAN里传数据，首先分析 数据库表中结构

create table depatment(
id,--当前ID
pid,--父ID
name--显示名称
)

?接下来我们要建立一个COM.UTIL包，所递归方法放置在这个包下，以便后续多次调用方便

建立类名为：JSONFACTORY

/*
	 * 以对象形式传回前台
	 */
	public static List<TreeNode> buildtree(List<TreeNode> nodes,int id){
		List<TreeNode> treeNodes=new ArrayList<TreeNode>();
		for (TreeNode treeNode : nodes) {
			TreeNode node=new TreeNode();
			node.setId(treeNode.getId());
			node.setText(treeNode.getText());
			if(id==treeNode.getPid()){
				node.setChildren(buildtree(nodes, node.getId()));
				treeNodes.add(node);
			}
			
		}
		return treeNodes;
	}
	

?完成以上工作后我们就要在控制器中使用在DAO中建立好的查询方法，这里DAO中写法就不细说了；

控制器写法如下：

	@RequestMapping("/flow_tree")
	@ResponseBody
	public List<TreeNode> getTree(){
		List<TreeNode> nodes=new ArrayList<TreeNode>();
		List<FlowSortTable> list_all=flowSortTableServiceImpl.findAll();
		for (FlowSortTable flowSortTable : list_all) {
			TreeNode treeNode=new TreeNode();
			treeNode.setId(flowSortTable.getSortId());
			treeNode.setPid(flowSortTable.getSortPartmentId());
			treeNode.setText(flowSortTable.getSortName());
			nodes.add(treeNode);
		}
		List<TreeNode> treeNodes=JsonTreeFactory.buildtree(nodes,0);
		return treeNodes;
	}

?以上工作结束，我们就可以在前台使用EASYUITREE模式了

将此代码 放在$(document).ready(function(){})中

$("#tt1").tree({
  			url: '${contextPath}/main/flow/flow_tree.html',
  			onClick:function(node){
  				$("#sort").css("display","block");
  				$("#save").hide();
  				$("#update").show();
  				odbpo_combobox("#flowType",'${contextPath}/main/flow/flowSelect.html',"flowId","flowName");
  				var pnode=$(this).tree('getParent',node.target);
  				$("#flowType").combobox('setValue', pnode.id);
  				$("#node_id").val(node.id);
  				$("#node_text").val(node.text);
				console.debug(node.id);
				console.debug(node.text);			
  			}
  		})

?HTML构建：

<ul id="tt1">
			
		</ul>

?启动TOMCAT预览就可以看到一个树形图的效果了！

?

?