java_easyui体系之Tree的加载

一：简介

实现三种Tree的初始化工作、并且重点叙述使用ajax动态加载树。

1、 使用class属性初始化树

2、 使用java script初始化树

3、 使用ajax动态加载树

4、 使用ajax初始化树、使树所有节点展开

二：效果图

三：实现步骤

1、使用class初始化树

a) 定义树状结构的html文档、指定使用class=”easyui-tree”属性、可在data-options中添加自己想要的属性或方法、事件

	
  

		
   
Folder 
    
 
     
Sub Folder 1 
      
 
       
File 11 
 
       
File 12
 
       
File 13
 
      
 
 
     
File 2
 
     
File 3
 
    
 
		
   
File21
	
  

2、使用java script初始化树

a) 定义一个用于放置Tree的ul标签

b) 使用java script初始化

	$(function() {
		//使用java script初始化
		$('#tt2').tree({
			data : [ {
				"id" : 1,
				"text" : "Folder1",
				"iconCls" : "icon-save",
				"children" : [ {
					"text" : "File1",
					"checked" : true
				}, {
					"text" : "Books",
					"state" : "open",
					"attributes" : {
						"url" : "/demo/book/abc",
						"price" : 100
					},
					"children" : [ {
						"text" : "PhotoShop",
						"checked" : true
					}, {
						"id" : 8,
						"text" : "Sub Bookds",
						"state" : "closed"
					} ]
				} ]
			}, {
				"text" : "Languages",
				"state" : "closed",
				"children" : [ {
					"text" : "Java"
				}, {
					"text" : "C#"
				} ]
			} ]
		});
	});

3、使用ajax动态加载树

a) 前期准备工作

i. 创建数据库、用于存放Tree信息、这里使用的hibernate自动创建、这里补充一个大意的地方、当我写好TreeDTO和其配置文件的时候、启动程序却怎么样也不给我创建表、崩溃的最后找到原因、原来在applicationContext.xml中没有将hibernate映射文件加载到mappingResource中：图

ii. 数据库中初始手动添加的数据：图

iii. 用于生成保存Tree信息的Java Bean：TreeDTO代码

package com.chy.ssh.business.bean;

import java.io.Serializable;

@SuppressWarnings("serial")
public class TreeDTO implements Serializable{
	private String id;
	private String pid;
	private String text;
	private String url;
	private int seq;
	
	
	public TreeDTO() {
		super();
	}
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getPid() {
		return pid;
	}
	public void setPid(String pid) {
		this.pid = pid;
	}
	public String getText() {
		return text;
	}
	public void setText(String text) {
		this.text = text;
	}
	public String getUrl() {
		return url;
	}
	public void setUrl(String url) {
		this.url = url;
	}
	public int getSeq() {
		return seq;
	}
	public void setSeq(int seq) {
		this.seq = seq;
	}
}

iv. 用于构建Json字符串返回到前台显示的EasyUITree代码

package com.chy.ssh.business.bean.modal;

import java.io.Serializable;
import java.util.Map;

@SuppressWarnings("serial")
public class EasyUITree implements Serializable{
	private String id;
	private String text;
	private Boolean checked = false;
	private Map
  
    attributes;
	private String state = "open";
	
	//省略getXXX() setXXX()方法	
}
  

b) 主要步骤：

i. 前台：仅仅一个URL请求、他会自动的将id传到后台、不用我们从新获取再用别的代码改变参数去请求后台――代码：

	$(function() {
		//异步动态加载树
		$('#tt3').tree({
			url : 'treeAction_treeLoad.action',
			lines : true,
			checkbox : true,
		});

	});

ii. 后台：根据传来的id查询记录、处理字符串（开始传入的id为null、这里查询是要判断一下）

TreeAction中代码：

	public void treeLoad(){
		//从数据库中查询的保存tree的集合、比如id、父类id、text等等、可自己扩展
		List
  
    list = treeService.getTreesByParentId(id);
		//用于前台显示的tree的属性、比如id、state、text、checked等等
		List
   
     eList = new ArrayList
    
     (); if(list.size() != 0){ for(TreeDTO t : list){ EasyUITree e = new EasyUITree(); e.setId(t.getId()); e.setText(t.getText()); Map
     
       attributes = new HashMap
      
       (); attributes.put("url", t.getUrl()); e.setAttributes(attributes); int count = treeService.countChildrens(t.getId()); if