树状数据结构是项目开发中经常使用的，使用EasyUI开发前端界面最好使用EasyUI提供的Tree控件，使用起来非常容易。
树状数据结构遍历有两种方法：
一是：使用递归调用穷举数据结构的每一级节点，编程比较麻烦，
二是：使用异步加载的方式，每次点击鼠标展开当前节点的下一级节点，编程比较简单。
EasyUI树控件
创建页面使用布局管理器分为左右两部分
<body class="easyui-layout">
<div data-options="region:'west',title:'部门导航'" style="width:200px;padding:0px;">
<ul id="tree" class="easyui-tree">
</ul>
</div>
<div data-options="region:'center',title:'部门管理'">
</div>
</body>
在页面就绪事件初始Tree控件数据
根节点使用了静态数据
<script>
$(document).ready(function()
{
$('#tree').tree({
data:[{'id':'1','text':'集团公司','state':'closed',
'attributes':{"priority":null,"parentId":null,"isload":"false"}}]
})
}
);
</script>
设计数据库表
CMD>mysql -uroot -proot
create 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('集团公司',0,null);
insert into ORGMODEL_ORG(name,priority,parentid) values('销售公司',1,1);
insert into ORGMODEL_ORG(name,priority,parentid) values('生产公司',2,1);
insert into ORGMODEL_ORG(name,priority,parentid) values('财务部',1,2);
insert into ORGMODEL_ORG(name,priority,parentid) values('审计科',1,4);
insert into ORGMODEL_ORG(name,priority,parentid) values('生产车间',2,3);
在这里插入代码片
设计部门实体类OrgInfo
package com.test.model;
import java.io.Serializable;
import java.sql.Date;
/**
* 部门实体类
* @author ChenQiXiang
*
*/
public class OrgInfo implements Serializable{
//部门ID，部门的唯一标识
private Integer id = null;
//部门名称
private String name = null;
//部门父ID
private Integer parentId = null;
//部门排序
private Integer priority = 0;
//部门路径
private String path = null;
//部门全名称
private String fullName = null;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getParentId() {
return parentId;
}
public void setParentId(Integer parentId) {
this.parentId = parentId;
}
public Integer getPriority() {
return priority;
}
public void setPriority(Integer priority) {
this.priority = priority;
}
public String getPath() {
return path;
}
public void setPath(String path) {
this.path = path;
}
public String getFullName() {
return fullName;
}
public void setFullName(String fullName) {
this.fullName = 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 = null;
private String text = null;
private String iconCls = null;
private String url = null;
private String state = null;
private Map attributes = new HashMap();
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;
}
public void addProp(String key,String value)
{
attributes.put(key,value);
}
public Map getAttributes() {
return attributes;
}
public void setAttributes(Map attributes) {
this.attributes = attributes;
}
}
设计操作数据库方法
Mapper.xml
<select id="getOrgList" resultType="com.test.model.OrgInfo">
select * from ORGMODEL_ORG
</select>
<select id="getRootOrg" resultType="com.test.model.OrgInfo">
select * from ORGMODEL_ORG where parentid is null
</select>
<select id="getOrgById" resultType="com.test.model.OrgInfo">
select * from ORGMODEL_ORG where id=#{id}
</select>
<select id="getChildOrg" resultType="com.test.model.OrgInfo">
select * from ORGMODEL_ORG where parentid=#{id}
</select>
<insert id="saveOrg" parameterType="com.test.model.OrgInfo"
useGeneratedKeys="true" keyColumn="id" keyProperty="id">
insert into ORGMODEL_ORG(name,parentId,priority,path,fullname)
values(#{name},#{parentId},#{priority},#{path},#{fullName})
</insert>
Mapper接口
//获取所有部门列表
public List<OrgInfo> getOrgList();
//根据部门ID获取部门对象
public OrgInfo getOrgById(@Param("id") Integer id);
//根据部门ID获取下属部门列表
public List<OrgInfo> getChildOrg(@Param("id") Integer id);
//获取根部门
public OrgInfo getRootOrg();
public void saveOrg(OrgInfo oi);
服务接口
/**
* 获取所有部门列表
*
* @return List<UserInfo>
*/
public List<OrgInfo> getOrgList() throws Exception;
/**
* 根据部门ID获取部门对象
* @param id 部门ID
* @return List<UserInfo>
*/
public OrgInfo getOrgById(@Param("id") Integer id) throws Exception;
//根据部门ID获取下属部门列表
public List<OrgInfo> getChildOrg(Integer id);
//获取根部门
public OrgInfo getRootOrg();
public void saveOrg(OrgInfo oi);
服务实现类
@Override
public List<OrgInfo> getOrgList() throws Exception{
try
{
return mapper.getOrgList();
}
catch(Exception e)
{
throw e;
}
}
@Override
public OrgInfo getOrgById(Integer id) throws Exception{
try
{
return mapper.getOrgById(id);
}
catch(Exception e)
{
throw e;
}
}
@Override
public List<OrgInfo> getChildOrg(Integer id) {
try
{
return mapper.getChildOrg(id);
}
catch(Exception e)
{
e.printStackTrace();
}
return null;
}
@Override
public OrgInfo getRootOrg() {
try
{
return mapper.getRootOrg();
}
catch(Exception e)
{
e.printStackTrace();
}
return null;
}
@Override
public void saveOrg(OrgInfo oi) {
try
{
mapper.saveOrg(oi);
}
catch(Exception e)
{
e.printStackTrace();
}
}
定义页面Tree控件节点展开前事件
每次展开接口从后台加载当前节点的下一级节点，并添加到本节点上。
$(document).ready(function()
{
$('#tree').tree({
data:[{'id':'1','text':'集团公司','state':'closed',
'attributes':{"priority":null,"parentId":null,"isload":"false"}}],
onBeforeExpand:function(node,param)
{
if(node.attributes.isload=='false')
{
$.ajaxSettings.async = false;
var url = '/orgchild?id='+node.id;
$.get(url,function(data)
{
$('#tree').tree('append', {
parent: node.target,
data: data
});
}
)
$.ajaxSettings.async = true;
node.attributes.isload = 'true';
}
}
})
}
);
Controller层添加相应的
方法
@ResponseBody
@RequestMapping("/orgroot")
public List<TreeInfo> orgroot()
{
OrgInfo root = orgmodel.getRootOrg();
List<TreeInfo> trees = new ArrayList<TreeInfo>();
TreeInfo rootTree = new TreeInfo();
rootTree.setId(root.getId().toString());
rootTree.setText(root.getName());
rootTree.setState("closed");
Map attributes = new HashMap();
attributes.put("parentId",root.getParentId());
attributes.put("priority", root.getPriority());
attributes.put("path", "/");
attributes.put("fullName", "/"+root.getName());
rootTree.setAttributes(attributes);
trees.add(rootTree);
return trees;
}
@ResponseBody
@RequestMapping("/orgchild")
public List<TreeInfo> orgchild(Integer id)
{
List<OrgInfo> child = orgmodel.getChildOrg(id);
List<TreeInfo> trees = new ArrayList<TreeInfo>();
for(OrgInfo oi:child)
{
TreeInfo rootTree = new TreeInfo();
rootTree.setId(oi.getId().toString());
rootTree.setText(oi.getName());
rootTree.setState("closed");
Map attributes = 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()
{
$('#tree').tree({
data:[{'id':'1','text':'集团公司','state':'closed',
'attributes':{"priority":null,"parentId":null,"isload":"false"}}],
onBeforeExpand:function(node,param)
{
if(node.attributes.isload=='false')
{
$.ajaxSettings.async = false;
var url = '/orgchild?id='+node.id;
$.get(url,function(data)
{
$('#tree').tree('append', {
parent: node.target,
data: data
});
}
)
$.ajaxSettings.async = true;
node.attributes.isload = 'true';
}
},
onExpand: function(node){
},
onClick: function(node){
$('#id').val(node.id);
$('#name').textbox('setValue',node.text);
$('#priority').textbox('setValue',node.attributes.priority);
$('#parentId').val(node.attributes.parentId);
}
})
}
);
添加Form表单
<body class="easyui-layout">
<div data-options="region:'west',title:'部门导航'" style="width:200px;padding:0px;">
<ul id="tree" class="easyui-tree">
</ul>
</div>
<div data-options="region:'center',title:'部门管理'">
<form id="frm" method="post">
<input type="hidden" id="id" name="id"/>
<input type="hidden" id="parentId" name="parentId"/>
<div style="margin-left:50px;margin-top:30px">
<input class="easyui-textbox" type="text" id="name" name="name" data-options="label:'部门名称:'" />
</div>
<div style="margin-left:50px;margin-top:30px">
<input class="easyui-textbox" type="text" id="priority" name="priority" data-options="label:'部门优先级:'" />
</div>
<div style="margin-left:50px;margin-top:30px">
<a id="btn" onclick="addsuborg()" class="easyui-linkbutton" data-options="iconCls:'icon-search'">添加子部门</a>
<a id="btn" onclick="updatesuborg()" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">修改部门</a>
<a id="btn" onclick="deletesuborg()" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">删除部门</a>
</div>
</form>
</div>
</body>
添加子节点功能
JS事件
<script>
function addsuborg()
{
var frmdata = $('#frm').serialize();
$.ajax(
{
url:'/orgsubsave',
data:frmdata,
success:function(data){
if(data == true)
{
$('#tree').tree({
data:[{'id':'1','text':'集团公司','state':'closed',
'attributes':{"priority":null,"parentId":null,"isload":"false"}}],
});
}
}
})
}
</script>
Controller保存方法
@ResponseBody
@RequestMapping("/orgsubsave")
public boolean orgsubsave(OrgInfo oi)
{
Integer parentId = oi.getId();
oi.setId(null);
oi.setParentId(parentId);
boolean rtn = sendmsg.sendSyncMsg(oi);
return rtn;
}
