最近几个项目都用到了EasyUI这个Jquery框架,目前感觉起来还是很好使的,展示效果很好,帮助文档什么的资料很多,而且互联网上Easy粉很多,大多数拥护和喜爱EasyUI的粉丝们都愿意在网络平台互相分享学习成果,甚至有专门的社区来讨论使用情况,网址是http://bbs.jeasyuicn.com/,里面的资源模块里有很多都是免费的学习资料,包括视频文档项目源码等,建议初学者去看视频,然后研究一下这个网站(sypro)的实现http://sshe.jeasyuicn.com/,甚至有视频教程教大家怎么实现这个项目。互联网是一个巨人,他博学多才,期待能站在巨人的肩膀上开开眼界,学习到更多的知识技能,对于将来或现在的工作都是一个很大的收获。
本篇博客是对EasyUI中树的实现的总结。如果想要展示一棵树,有很多方式,当然要分析你的需求。如果是展示省市区、学校、部门等大数据的话,建议还是使用异步加载。当然如果只是展示几个几乎不变的菜单项,就可以扁平化的展示你的数据了。
首先介绍怎么实现一棵异步树。
项目前准备:
1、首先你要搭建一个你熟悉的框架环境,然后再前台加入EasyUI的源码包,并在页面引入js和css等文件。本文的实例主要讲解怎么实现树,以SSH框架为例。如果还有不懂怎么搭建EasyUI框架的同学,可以在EasyUI的中文社区里找EasyUI的初级视频来看看,非常简单的。
2、建立数据库,比方说我们要通过树来展示你的菜单,那么就要先看一下EasyUI中tree的Data Format,也就是说我们要了解后台传给前台什么样式的Json格式。
从上面的文档截图可以看出,他的数据格式有以下属性:id,text,state,checked,attributes,children;
我们在设计数据库的时候,可以尽量的将节点id和节点名称分别设置成id和text,这样在前台解析Json的时候就能直接认出这些属性值,并显示出数据来。当然利用扩展的方式的话,你可以不必按照这些规范来,但是需要在tree控件里传入几个参数来传入属性值。
首先,建立一个t_menu表:(注释如图)
外键:
测试数据:
准备完以上的内容之后,我们开始做demo。
1、加入EasyUI的树控件:
<ul id="menuTree" class="easyui-tree" data-options="url:'<%=basePath%>menuAction!getTreeNode.action',parentField:'pid',lines:true,onLoadSuccess:function(node, data){$(this).tree('collapseAll')}"></ul>
解析:
data-options里的URL是Action的路径,p
arentField设置成我们model里的pid,
lines:true用来显示树节点前的加减号,
onLoadSuccess:function(node, data){$(this).tree('collapseAll')}用来设置关闭所有的树节点。
加入扩展js:
$.fn.tree.defaults.loadFilter = function (data, parent) {
var opt = $(this).data().tree.options;
var idFiled,
textFiled,
parentField;
if (opt.parentField) {
idFiled = opt.idFiled || 'id';
textFiled = opt.textFiled || 'text';
parentField = opt.parentField; var i,
l,
treeData = [],
tmpMap = []; for (i = 0, l = data.length; i < l; i++) {
tmpMap[data[i][idFiled]] = data[i];
} for (i = 0, l = data.length; i < l; i++) {
if (tmpMap[data[i][parentField]] && data[i][idFiled] != data[i][parentField]) {
if (!tmpMap[data[i][parentField]]['children'])
tmpMap[data[i][parentField]]['children'] = [];
data[i]['text'] = data[i][textFiled];
tmpMap[data[i][parentField]]['children'].push(data[i]);
} else {
data[i]['text'] = data[i][textFiled];
treeData.push(data[i]);
}
}
return treeData;
}
return data;
};
2、Action类实现
首先是model类TMenu.java,映射数据库的类。
import java.util.HashSet;
import java.util.Set;
import javax.persistence.CascadeType;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.FetchType;
import javax.persistence.Id;
import javax.persistence.JoinColumn;
import javax.persistence.ManyToOne;
import javax.persistence.OneToMany;
import javax.persistence.Table; /**
* TMenu entity. @author MyEclipse Persistence Tools
*/
@Entity
@Table(name = "t_menu", catalog = "easyui")
public class TMenu implements java.io.Serializable { // Fields private String id;
private TMenu TMenu;
private String text;
private String iconCls;
private String url;
private Set<TMenu> TMenus = new HashSet<TMenu>(0); // Constructors /** default constructor */
public TMenu() {
} /** minimal constructor */
public TMenu(String id) {
this.id = id;
} /** full constructor */
public TMenu(String id, TMenu TMenu, String text, String iconCls, String url, Set<TMenu> TMenus) {
this.id = id;
this.TMenu = TMenu;
this.text = text;
this.iconCls = iconCls;
this.url = url;
this.TMenus = TMenus;
} // Property accessors
@Id
@Column(name = "id", unique = true, nullable = false, length = 36)
public String getId() {
return this.id;
} public void setId(String id) {
this.id = id;
} @ManyToOne(fetch = FetchType.LAZY)
@JoinColumn(name = "pid")
public TMenu getTMenu() {
return this.TMenu;
} public void setTMenu(TMenu TMenu) {
this.TMenu = TMenu;
} @Column(name = "text", length = 100)
public String getText() {
return this.text;
} public void setText(String text) {
this.text = text;
} @Column(name = "iconCls", length = 50)
public String getIconCls() {
return this.iconCls;
} public void setIconCls(String iconCls) {
this.iconCls = iconCls;
} @Column(name = "url", length = 200)
public String getUrl() {
return this.url;
} public void setUrl(String url) {
this.url = url;
} @OneToMany(cascade = CascadeType.ALL, fetch = FetchType.LAZY, mappedBy = "TMenu")
public Set<TMenu> getTMenus() {
return this.TMenus;
} public void setTMenus(Set<TMenu> TMenus) {
this.TMenus = TMenus;
} }
其次是model类Menu.java,此处的model是pageModel,是为了接应前台的name值的:
public class Menu { private String pid;//父菜单ID
private String pText;//父菜单名称
private String id;//子菜单Id
private String text;//子菜单名称
private String iconCls;//子菜单图标
private String url;//子菜单路径
private String state; //---------------set/get-------------- public String getPid() {
return pid;
}
public void setPid(String pid) {
this.pid = pid;
} public String getpText() {
return pText;
}
public void setpText(String pText) {
this.pText = pText;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
} public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public String getIconCls() {
return iconCls;
}
public void setIconCls(String iconCls) {
this.iconCls = iconCls;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
public String getState() {
return state;
}
public void setState(String state) {
this.state = state;
} }
Action类:
package com.action; import org.apache.struts2.convention.annotation.Action;
import org.apache.struts2.convention.annotation.Namespace;
import org.apache.struts2.convention.annotation.ParentPackage;
import org.springframework.beans.factory.annotation.Autowired; import com.pageModel.Menu;
import com.service.IMenuService; import com.opensymphony.xwork2.ModelDriven; @ParentPackage("basePackage")
@Namespace("/")
@Action(value="menuAction")
public class MenuAction extends BaseAction implements ModelDriven<Menu> {
Menu menu=new Menu();
@Override
public Menu getModel() {
// TODO Auto-generated method stub
return menu;
}
private IMenuService menuService; public IMenuService getMenuService() {
return menuService;
}
@Autowired
public void setMenuService(IMenuService menuService) {
this.menuService = menuService;
}
/**
* 异步获得树节点
*/
public void getTreeNode(){
super.writeJson(menuService.getTreeNode(menu.getId()));
}
}
2、了解getTreeNode()方法的实现:
对应service的实现类:
package com.service.impl; import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Set; import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service; import com.dao.IBaseDao;
import com.model.TMenu;
import com.pageModel.Menu;
import com.service.IMenuService; @Service("menuService")
public class MenuServiceImpl implements IMenuService {
private IBaseDao<TMenu> menuDao; public IBaseDao<TMenu> getMenuDao() {
return menuDao;
} @Autowired
public void setMenuDao(IBaseDao<TMenu> menuDao) {
this.menuDao = menuDao;
} @Override
public List<Menu> getTreeNode(String id) {
List<Menu> menus=new ArrayList<Menu>();
StringBuffer hql=new StringBuffer();
hql=hql.append("from TMenu t where ");
Map<String, Object> map=new HashMap<String, Object>();
if (id==null || "".equals(id)) {
//返回总根节点
hql=hql.append(" t.TMenu is null"); } else {
//异步加载当前id下的子节点
hql=hql.append(" t.TMenu.id=:id");
map.put("id", id);
}
List<TMenu> tMenus= menuDao.find(hql.toString(),map);
for (TMenu tMenu : tMenus) {
Menu menu=new Menu();
BeanUtils.copyProperties(tMenu, menu);
Set<TMenu> set=tMenu.getTMenus();
if (set!=null && !set.isEmpty()) {
menu.setState("closed"); //节点以根节点形式体现(文件夹)
} else {
menu.setState("open"); //节点 以叶子形式体现(文件)
}
menus.add(menu);
}
return menus;
} }
最后展示实现效果:当单击加号的时候才会加载其子节点,异步实现了功能树。
下篇博客将介绍另一种加载树的方式,就是一次把所有的树节点都加载上来,显示扁平化数据。