首页 > 代码库 > easyUI树形结构
easyUI树形结构
树形结构是常见也是常用的,之前一直在使用但是基本都是调用别人写好的方法,好像也没调用太明白的感觉,这次在开发ITOO的时候终于研究了一番,发现其实要实现树形结构其实不是一件困难的事,而且实现方法也不是唯一的,之前大家都很倾向使用zTree,网上搜了一下发现zTtree是一个比较强大“树插件”但是觉得对于目前的我来说并不是很合适,首先我们的前台框架使用的easyUI,easyUI有自己的树形结构控件,再引入一个zTree没有多大的必要;而且对于我来说相对于js代码来说我更熟悉使用后台java代码来控制,所以决定研究一下后台生成树形结构,使用json的数据格式将数据传递给easyUI的树形控件。
首先说,easyUI的树形结构对json数据时有要求的,所以在后台将数据拼接成easyUI需要的格式就可以很轻松的生成一颗树形结构了。
首先来看需要树形结构的实体:
/*********************************************************************** * 模块: Institution.java * 作者: 陈丽娜 * 说明: 机构实体类 * 日期: 2014年12月2日 20:49:05 ***********************************************************************/ package com.tgb.itoo.basic.entity; 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.JoinColumn; import javax.persistence.ManyToOne; import javax.persistence.OneToMany; import javax.persistence.Table; import org.apache.log4j.varia.FallbackErrorHandler; import org.codehaus.jackson.annotate.JsonIgnore; /** * 机构实体 */ @Entity @Table(name = "TB_Institution") public class Institution extends EntityDelete { /** * 机构代码 */ @Column(name = "InstitutionCode", length = 255) private String institutionCode; /** * 机构名称 */ @Column(name = "InstitutionName", length = 255) private String institutionName; /** * 学制 */ @Column(name = "schoolSystem", length = 255) private String schoolSystem; /** * 学费 */ @Column(name = "money", length = 255) private String money; /** * 机构类型Id */ @Column(name="nodeLevelId", length=30) private String nodeLevelId; /** * 学校层次 */ @ManyToOne(cascade = CascadeType.DETACH, fetch = FetchType.EAGER, targetEntity = SchoolLevel.class) @JoinColumn(name = "levelId", nullable = true) private SchoolLevel schoolLevel; /** * 自关联 父节点 */ @ManyToOne(cascade = CascadeType.REFRESH,fetch=FetchType.EAGER,targetEntity = Institution.class) @JoinColumn(name = "pId", nullable = true) private Institution parentInstitution; /** *get/set方法省略 */ }
将实体转换成easyUI需要的树形结构的方法类:
首先需要定义一个与easyUI需要的json数据一致的实体类:
package itoo.basic.tool.json; import java.util.ArrayList; import java.util.List; /** * easyUI树形结构转换实体 * @author 陈丽娜 * @version 1.0.0 , 2015年1月29日 上午10:39:28 */ public class TreeNode{ /** * 显示节点的id */ private String id; /** * 显示节点的名称 */ private String text; /** * 显示节点的图标 */ private String icon; /** * 显示节点的父节点 */ private String parentId; /** * 显示节点的子节点集合 */ private List<TreeNode> children; /** * 空的构造函数 */ public TreeNode(){ } /** * 有参数的构造参数 * @param id 显示的节点ID * @param text 显示的节点名称 * @param icon 显示的节点图标 * @param parentId 显示的节点的父节点 * @param children 显示节点的子节点 */ public TreeNode(String id, String text,String icon,String parentId,List<TreeNode> children){ super(); this.id=id; this.text=text; this.icon=icon; this.parentId=parentId; this.children=children; } /** *省略get/set方法 */ /** * 添加子节点的方法 * @param node 树节点实体 */ public void addChild(TreeNode node){ if(this.children==null){ children=new ArrayList<TreeNode>(); children.add(node); }else{ children.add(node); } } }
定义好实体类之后,将查出来的需要以树形结构显示的数据转换为treenode的实体类型:
package itoo.basic.tool.json; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import com.tgb.itoo.basic.entity.Institution; /** * 树形机构方法类 * @author 陈丽娜 * @version 1.0.0 , 2015年1月29日 上午10:44:55 */ public class TreeUntil{ /** * 将组织机构转换成treenode的方法 * @param institutions 需要转换的机构list集合 * @return 返回一个treenode结构的list集合 */ public List fillTree(List<Institution> institutions){ List<TreeNode> list=new ArrayList<TreeNode>(); //定义一个树形结构实体 Map map=new HashMap<String, TreeNode>(); //定义一个map try { //将传递过来的参数赋值给机构实体,遍历每一个将机构赋值给treenode相应的属性 for(Institution institution:institutions){ TreeNode node=new TreeNode(); node.setId(institution.getId()); //id node.setText(institution.getInstitutionName()); //赋值名称 //判断该机构节点是否有父节点,如果父节点不为空则赋值给treenode的父节点 if(institution.getParentInstitution()!=null){ node.setParentId(institution.getParentInstitution().getId()); } map.put(institution.getId(), node); //将机构的id与树形结构实体放在map中 } for(Institution institution:institutions){ if(institution.getParentInstitution()!=null){ //如果该机构节点的父节点不为空,但是父节点id为空,则在list中添加有一个 //map中的机构的的id; //如果父节点id不为空定义pId为父节点的id; //并定义两个树形结构实体,给父的树形结构pNode添加一个子节点实体cNode if(institution.getParentInstitution().getId()==null){ list.add((TreeNode)map.get(institution.getId())); }else{ String pId=institution.getParentInstitution().getId(); TreeNode pNode=(TreeNode)map.get(pId); TreeNode cNode=(TreeNode)map.get(institution.getId()); pNode.addChild(cNode); } }else { list.add((TreeNode)map.get(institution.getId())); } } } catch (Exception e) { // TODO: handle exception e.printStackTrace(); } return list; //返回树形结构list集合 } }
这样大部分的工作就完成了,还需要再controller中将数据转成json,并在jsp页面中接收:
/** * 查询所有的组织机构 树形结构 * @param response 向前台传递数据 * @param request 获取前台的传递数据 */ @RequestMapping("/info/queryAll") private void queryAllType(HttpServletResponse response,HttpServletRequest request){ try{ //查询到所有的组织机构信息 List<Institution> institutions =institutionBean.queryAllInstitutions(); treeUntil=new TreeUntil(); //将查询到的数据转换为树形结构的list List list=treeUntil.fillTree(institutions); jacksonJsonUntil=new JacksonJsonUntil(); //将返回的list转化成json数据,并返回给jsp页面 jacksonJsonUntil.beanToJson(response, list); }catch(Exception e){ e.printStackTrace(); } }
这时候在jsp中直接调用这个controller就可以了:
<div id="p" data-options="region:'west'" title="组织机构树" style="width:20%;padding:10px"> <ul id="tt" class="easyui-tree" url="info/queryAll"> </ul> </div>
最终的效果图为:
easyUI树形结构
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。