如何使用EasyUITree控件

树状数据结构是项目开发中经常使用的&＃xff0c;使用EasyUI开发前端界面最好使用EasyUI提供的Tree控件&＃xff0c;使用起来非常容易。

树状数据结构遍历有两种方法&＃xff1a;
一是&＃xff1a;使用递归调用穷举数据结构的每一级节点&＃xff0c;编程比较麻烦&＃xff0c;
二是&＃xff1a;使用异步加载的方式&＃xff0c;每次点击鼠标展开当前节点的下一级节点&＃xff0c;编程比较简单。

EasyUI树控件

创建页面使用布局管理器分为左右两部分

在页面就绪事件初始Tree控件数据

根节点使用了静态数据

设计数据库表

CMD>mysql -uroot -prootcreate database w1 character set utf8;use w1; //打开数据库w1
create table ORGMODEL_ORG (id int auto_increment primary key,name varchar(200),priority int,parentid int,path varchar(200),fullname varchar(500));charset gbk;insert into ORGMODEL_ORG(name,priority,parentid) values(&＃39;集团公司&＃39;,0,null);
insert into ORGMODEL_ORG(name,priority,parentid) values(&＃39;销售公司&＃39;,1,1);
insert into ORGMODEL_ORG(name,priority,parentid) values(&＃39;生产公司&＃39;,2,1);
insert into ORGMODEL_ORG(name,priority,parentid) values(&＃39;财务部&＃39;,1,2);
insert into ORGMODEL_ORG(name,priority,parentid) values(&＃39;审计科&＃39;,1,4);
insert into ORGMODEL_ORG(name,priority,parentid) values(&＃39;生产车间&＃39;,2,3);


在这里插入代码片


设计部门实体类OrgInfo

package com.test.model;import java.io.Serializable;
import java.sql.Date;/*** 部门实体类* &＃64;author ChenQiXiang**/
public class OrgInfo implements Serializable{//部门ID&＃xff0c;部门的唯一标识private Integer id &＃61; null;//部门名称private String name &＃61; null;//部门父IDprivate Integer parentId &＃61; null;//部门排序private Integer priority &＃61; 0;//部门路径private String path &＃61; null;//部门全名称private String fullName &＃61; null;public Integer getId() {return id;}public void setId(Integer id) {this.id &＃61; id;}public String getName() {return name;}public void setName(String name) {this.name &＃61; name;}public Integer getParentId() {return parentId;}public void setParentId(Integer parentId) {this.parentId &＃61; parentId;}public Integer getPriority() {return priority;}public void setPriority(Integer priority) {this.priority &＃61; priority;}public String getPath() {return path;}public void setPath(String path) {this.path &＃61; path;}public String getFullName() {return fullName;}public void setFullName(String fullName) {this.fullName &＃61; fullName;}
}

树控件数据类

package com.test.model;import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;public class TreeInfo {public String id &＃61; null;private String text &＃61; null;private String iconCls &＃61; null;private String url &＃61; null;private String state &＃61; null;private Map attributes &＃61; new HashMap();public String getId() {return id;}public void setId(String id) {this.id &＃61; id;}public String getText() {return text;}public void setText(String text) {this.text &＃61; text;}public String getIconCls() {return iconCls;}public void setIconCls(String iconCls) {this.iconCls &＃61; iconCls;}public String getUrl() {return url;}public void setUrl(String url) {this.url &＃61; url;}public String getState() {return state;}public void setState(String state) {this.state &＃61; state;}public void addProp(String key,String value){attributes.put(key,value);}public Map getAttributes() {return attributes;}public void setAttributes(Map attributes) {this.attributes &＃61; attributes;}
}

设计操作数据库方法

Mapper.xmlselect * from ORGMODEL_ORGselect * from ORGMODEL_ORG where parentid is nullselect * from ORGMODEL_ORG where id&＃61;#{id}select * from ORGMODEL_ORG where parentid&＃61;#{id}insert into ORGMODEL_ORG(name,parentId,priority,path,fullname)values(#{name},#{parentId},#{priority},#{path},#{fullName})Mapper接口//获取所有部门列表public List getOrgList();//根据部门ID获取部门对象public OrgInfo getOrgById(&＃64;Param("id") Integer id);//根据部门ID获取下属部门列表public List getChildOrg(&＃64;Param("id") Integer id);//获取根部门public OrgInfo getRootOrg();public void saveOrg(OrgInfo oi);服务接口/*** 获取所有部门列表* * &＃64;return List*/public List getOrgList() throws Exception;/*** 根据部门ID获取部门对象* &＃64;param id 部门ID* &＃64;return List*/public OrgInfo getOrgById(&＃64;Param("id") Integer id) throws Exception;//根据部门ID获取下属部门列表public List getChildOrg(Integer id);//获取根部门public OrgInfo getRootOrg();public void saveOrg(OrgInfo oi);服务实现类&＃64;Overridepublic List getOrgList() throws Exception{try{return mapper.getOrgList();}catch(Exception e){throw e;}}&＃64;Overridepublic OrgInfo getOrgById(Integer id) throws Exception{try{return mapper.getOrgById(id);}catch(Exception e){throw e;}}&＃64;Overridepublic List getChildOrg(Integer id) {try{return mapper.getChildOrg(id);}catch(Exception e){e.printStackTrace();}return null;}&＃64;Overridepublic OrgInfo getRootOrg() {try{return mapper.getRootOrg();}catch(Exception e){e.printStackTrace();}return null;}&＃64;Overridepublic void saveOrg(OrgInfo oi) {try{mapper.saveOrg(oi);}catch(Exception e){e.printStackTrace();}}

定义页面Tree控件节点展开前事件

每次展开接口从后台加载当前节点的下一级节点&＃xff0c;并添加到本节点上。

$(document).ready(function(){$(&＃39;#tree&＃39;).tree({data:[{&＃39;id&＃39;:&＃39;1&＃39;,&＃39;text&＃39;:&＃39;集团公司&＃39;,&＃39;state&＃39;:&＃39;closed&＃39;,&＃39;attributes&＃39;:{"priority":null,"parentId":null,"isload":"false"}}],onBeforeExpand:function(node,param){if(node.attributes.isload&＃61;&＃61;&＃39;false&＃39;){$.ajaxSettings.async &＃61; false;var url &＃61; &＃39;/orgchild?id&＃61;&＃39;&＃43;node.id;$.get(url,function(data){$(&＃39;#tree&＃39;).tree(&＃39;append&＃39;, {parent: node.target,data: data});})$.ajaxSettings.async &＃61; true;node.attributes.isload &＃61; &＃39;true&＃39;;}}})});


Controller层添加相应的

方法

&＃64;ResponseBody&＃64;RequestMapping("/orgroot")public List orgroot(){OrgInfo root &＃61; orgmodel.getRootOrg();List trees &＃61; new ArrayList();TreeInfo rootTree &＃61; new TreeInfo();rootTree.setId(root.getId().toString());rootTree.setText(root.getName());rootTree.setState("closed");Map attributes &＃61; new HashMap();attributes.put("parentId",root.getParentId());attributes.put("priority", root.getPriority());attributes.put("path", "/");attributes.put("fullName", "/"&＃43;root.getName());rootTree.setAttributes(attributes);trees.add(rootTree);return trees;}&＃64;ResponseBody&＃64;RequestMapping("/orgchild")public List orgchild(Integer id){List child &＃61; orgmodel.getChildOrg(id);List trees &＃61; new ArrayList();for(OrgInfo oi:child){TreeInfo rootTree &＃61; new TreeInfo();rootTree.setId(oi.getId().toString());rootTree.setText(oi.getName());rootTree.setState("closed");Map attributes &＃61; new HashMap();attributes.put("parentId", oi.getParentId());attributes.put("priority", oi.getPriority());attributes.put("path", oi.getPath());attributes.put("fullName", oi.getFullName());attributes.put("isload", "false");rootTree.setAttributes(attributes);trees.add(rootTree);}return trees;}

点击节点事件处理

$(document).ready(function(){$(&＃39;#tree&＃39;).tree({data:[{&＃39;id&＃39;:&＃39;1&＃39;,&＃39;text&＃39;:&＃39;集团公司&＃39;,&＃39;state&＃39;:&＃39;closed&＃39;,&＃39;attributes&＃39;:{"priority":null,"parentId":null,"isload":"false"}}],onBeforeExpand:function(node,param){if(node.attributes.isload&＃61;&＃61;&＃39;false&＃39;){$.ajaxSettings.async &＃61; false;var url &＃61; &＃39;/orgchild?id&＃61;&＃39;&＃43;node.id;$.get(url,function(data){$(&＃39;#tree&＃39;).tree(&＃39;append&＃39;, {parent: node.target,data: data});})$.ajaxSettings.async &＃61; true;node.attributes.isload &＃61; &＃39;true&＃39;;}},onExpand: function(node){},onClick: function(node){$(&＃39;#id&＃39;).val(node.id);$(&＃39;#name&＃39;).textbox(&＃39;setValue&＃39;,node.text);$(&＃39;#priority&＃39;).textbox(&＃39;setValue&＃39;,node.attributes.priority);$(&＃39;#parentId&＃39;).val(node.attributes.parentId);}})});


添加Form表单

添加子节点功能

JS事件
Controller保存方法&＃64;ResponseBody&＃64;RequestMapping("/orgsubsave")public boolean orgsubsave(OrgInfo oi){Integer parentId &＃61; oi.getId();oi.setId(null);oi.setParentId(parentId);boolean rtn &＃61; sendmsg.sendSyncMsg(oi);return rtn;}


代码下载
https://pan.baidu.com/s/1HGcg90JP3HJVxOjqFreY_w