java_easyui体系之Tree的加载
一：简介
实现三种Tree的初始化工作、并且重点叙述使用ajax动态加载树。
1、 使用class属性初始化树
2、 使用javascript初始化树
3、 使用ajax动态加载树
4、 使用ajax初始化树、使树所有节点展开
二：效果图
三：实现步骤
1、使用class初始化树
a) 定义树状结构的html文档、指定使用class=”easyui-tree”属性、可在data-options中添加自己想要的属性或方法、事件
<ul id="tt" class="easyui-tree" data-options="lines:true">
<li><span>Folder</span>
<ul>
<li><span>Sub Folder 1</span>
<ul>
<li><span><a href="#">File 11</a> </span></li>
<li><span>File 12</span></li>
<li><span>File 13</span></li>
</ul>
</li>
<li><span>File 2</span></li>
<li><span>File 3</span></li>
</ul>
</li>
<li><span>File21</span></li>
</ul>2、使用javascript初始化树
a) 定义一个用于放置Tree的ul标签
<ul id="tt2"></ul>b) 使用javascript初始化
$(function() {
//使用javascript初始化
$('#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<String, Object> 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<TreeDTO> list = treeService.getTreesByParentId(id);
//用于前台显示的tree的属性、比如id、state、text、checked等等
List<EasyUITree> eList = new ArrayList<EasyUITree>();
if(list.size() != 0){
for(TreeDTO t : list){
EasyUITree e = new EasyUITree();
e.setId(t.getId());
e.setText(t.getText());
Map<String, Object> attributes = new HashMap<String, Object>();
attributes.put("url", t.getUrl());
e.setAttributes(attributes);
int count = treeService.countChildrens(t.getId());
if(count > 0){
//注意state这个属性、当他为open时、说明这个节点是个文件夹、会以文件夹的形式显示、
//当他是closed的时候、说明这个节点是一个具体的文件节点、不会以文件夹的形式显示。
e.setState("closed");
}
eList.add(e);
}
}
id = null;
//将含有用于显示tree的信息的集合、转换成json格式、传到前台。
WriteJson.pwObj(eList);
}底层DAO中代码：
public List<TreeDTO> getTreesByParentId(String id) {
StringBuffer hql = new StringBuffer();
if(id == null || "".equals(id)){
hql.append("from TreeDTO t where t.pid is null ");
}else{
hql.append("from TreeDTO t where t.pid = '"+id+"' ");
}
List<TreeDTO> list = new ArrayList<TreeDTO>();
try {
list = this.getHibernateTemplate().find(hql.toString());
} catch (DataAccessException e) {
e.printStackTrace();
}
return list;
}iii. 将查询、处理后的结果集使用json工具处理成json格式字符串、传到前台用于显示
WriteJson.pwObj(eList)的实现：
package com.chy.ssh.utils;
import java.io.IOException;
import java.io.PrintWriter;
import java.io.StringWriter;
import org.apache.struts2.ServletActionContext;
import org.codehaus.jackson.JsonFactory;
import org.codehaus.jackson.JsonGenerator;
import org.codehaus.jackson.map.ObjectMapper;
public class WriteJson {
public static String getJson(Object o) {
StringWriter sw = new StringWriter();
try {
ObjectMapper om = new ObjectMapper();
JsonGenerator jg = new JsonFactory().createJsonGenerator(sw);
om.writeValue(jg, o);
jg.close();
} catch (IOException e) {
e.printStackTrace();
}
return sw.toString();
}
public static void pwObj(Object obj){
try {
PrintWriter pw = ServletActionContext.getResponse().getWriter();
pw.print(getJson(obj));
pw.flush();
pw.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}4、使用ajax一次性加载树
有前面的东西这里就很简单了：只要在初始化树时为其添加一个onLoadSuccess事件就好、代码：
//异步动态加载树
$('#tt3').tree({
url : 'treeAction_treeLoad.action',
lines : true,
checkbox : true,
onLoadSuccess : function(node, data) {
console.info(node);
console.info(data);
var t = $(this);
if (data) {
$(data).each(function(index, d) {
if (this.state == 'closed') {
t.tree('expandAll');
}
});
}
}
});四：源码补充
1、tree.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'tree.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<jsp:include page="../inc.jsp"></jsp:include>
<script type="text/javascript">
$(function() {
//使用javascript初始化
$('#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#"
} ]
} ]
});
//异步动态加载树
$('#tt3').tree({
url : 'treeAction_treeLoad.action',
lines : true,
checkbox : true,
onLoadSuccess : function(node, data) {
console.info(node);
console.info(data);
var t = $(this);
if (data) {
$(data).each(function(index, d) {
if (this.state == 'closed') {
t.tree('expandAll');
}
});
}
}
});
});
</script>
</head>
<body>
<h2>initial tree by class :</h2>
<ul id="tt" class="easyui-tree" data-options="lines:true">
<li><span>Folder</span>
<ul>
<li><span>Sub Folder 1</span>
<ul>
<li><span><a href="#">File 11</a> </span></li>
<li><span>File 12</span></li>
<li><span>File 13</span></li>
</ul>
</li>
<li><span>File 2</span></li>
<li><span>File 3</span></li>
</ul>
</li>
<li><span>File21</span></li>
</ul>
<br />
<h2>initial tree by javascript:</h2>
<ul id="tt2"></ul>
<br />
<h2>Dynamic load tree :</h2>
<br />
<ul id="tt3"></ul>
<br />
</body>
</html>
2、TreeAction:
package com.chy.ssh.web.action;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.chy.ssh.business.bean.TreeDTO;
import com.chy.ssh.business.bean.modal.EasyUITree;
import com.chy.ssh.business.service.TreeService;
import com.chy.ssh.utils.WriteJson;
import com.opensymphony.xwork2.ActionSupport;
public class TreeAction extends ActionSupport {
private static final long serialVersionUID = 1L;
private TreeService treeService;
private String id;
public void treeLoad(){
//从数据库中查询的保存tree的集合、比如id、父类id、text等等、可自己扩展
List<TreeDTO> list = treeService.getTreesByParentId(id);
//用于前台显示的tree的属性、比如id、state、text、checked等等
List<EasyUITree> eList = new ArrayList<EasyUITree>();
if(list.size() != 0){
for(TreeDTO t : list){
EasyUITree e = new EasyUITree();
e.setId(t.getId());
e.setText(t.getText());
Map<String, Object> attributes = new HashMap<String, Object>();
attributes.put("url", t.getUrl());
e.setAttributes(attributes);
int count = treeService.countChildrens(t.getId());
if(count > 0){
//注意state这个属性、当他为open时、说明这个节点是个文件夹、会以文件夹的形式显示、
//当他是closed的时候、说明这个节点是一个具体的文件节点、不会以文件夹的形式显示。
e.setState("closed");
}
eList.add(e);
}
}
id = null;
//将含有用于显示tree的信息的集合、转换成json格式、传到前台。
WriteJson.pwObj(eList);
}
public TreeService getTreeService() {
return treeService;
}
public void setTreeService(TreeService treeService) {
this.treeService = treeService;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
}3、底层TreeDAOImpl 中间serveice省略：
package com.chy.ssh.business.dao;
import java.util.ArrayList;
import java.util.List;
import org.springframework.dao.DataAccessException;
import org.springframework.orm.hibernate3.support.HibernateDaoSupport;
import com.chy.ssh.business.bean.TreeDTO;
public class TreeDAOImpl extends HibernateDaoSupport implements TreeDAO {
public int countChildrens(String id) {
return Integer.parseInt(String.valueOf(this.getHibernateTemplate().find("select count(*) from TreeDTO t where t.pid = '"+id+"'").get(0)));
}
@SuppressWarnings("unchecked")
public List<TreeDTO> getTreesByParentId(String id) {
StringBuffer hql = new StringBuffer();
if(id == null || "".equals(id)){
hql.append("from TreeDTO t where t.pid is null ");
}else{
hql.append("from TreeDTO t where t.pid = '"+id+"' ");
}
List<TreeDTO> list = new ArrayList<TreeDTO>();
try {
list = this.getHibernateTemplate().find(hql.toString());
} catch (DataAccessException e) {
e.printStackTrace();
}
return list;
}
}
1058
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
