微信公众号：程序yuan
关注可了解更多的教程。问题或建议，请公众号留言;
查看--> 全套EasyUI示例目录
Tree树组件
Tree 树，在Easyui也是一个非常常见的组件，在组件一个管理系统的时候，少不了使用树来做导航菜单，那么，现在让我们一起来学习一下吧。。。
数据库设计：
JSP文件
<%--
Created by IntelliJ IDEA.
User: ooyhao
Date: 2018/7/29 0029
Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Tree</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/Tree.js"></script>
<style rel="stylesheet" type="text/css">
</style>
<script>
</script>
</head>
<body style="padding: 100px;">
<%--<ul class="easyui-tree">
<li>
<span>宜春学院</span>
<ul>
<li>
<span>数学与计算机科学学院</span>
<ul>
<li>学工科</li>
<li>
<span>计算机科学与技术</span>
<ul>
<li>计算机科学与技术1班</li>
<li>计算机科学与技术2班</li>
</ul>
</li>
<li>
<span>网络工程</span>
<ul>
<li>网络工程2班</li>
<li>网络工程1班</li>
</ul>
</li>
</ul>
</li>
<li>学工处</li>
<li>
<span>体育学院</span>
<ul>
<li>体育教育</li>
<li>体育表演</li>
</ul>
</li>
</ul>
</li>
<li>
<span>南昌大学</span>
<ul>
<li>软件学院</li>
</ul>
</li>
</ul>--%>
<ul id="box">
</ul>
<div id="menu">
<div data-options="iconCls:'icon-redo'">变成父节点</div>
<div data-options="iconCls:'icon-add'">增加</div>
<div data-options="iconCls:'icon-edit'">修改</div>
<div data-options="iconCls:'icon-remove'">删除</div>
<div data-options="iconCls:'icon-cancel'">取消</div>
</div>
</body>
</html>
JS文件
$(function () {
var options = {
url:'findTrees.action',
// url:'getTrees.action',
method:'post',
//展开折叠是否使用动画
animate:true,
//是否在每一个节点前显示复选框
checkbox:true,
//是否进行层叠选中
// cascadeCheck:false,
//是否只在叶子节点显示复选框，需要配合checkbox使用
// onlyLeafCheck:true,
lines:true,
//是否使用拖拽功能
dnd:false,
// data:[],//本地加载的菜单数据
formatter:function (node) {
// return '['+node.text+']';
return node.text;
},
onLoadSuccess:function (node,data) {
if(data){
$(data).each(function (index,value) {
// value.iconCls='icon-ok';
// value.text = value.text+'@';
if(value.state="closed"){
// $("#box").tree("expandAll");
}
});
}
},
onClick:function (node) {
// console.log(node);
},
onDblClick:function (node) {
// console.log(node);
},
onBeforeLoad:function (node,param) {
// console.log(node);
console.log(param);//参数
},
onBeforeExpand:function (node) {
// console.log(node);
},
onExpand:function (node) {
// console.log(node);
},
onBeforeCollapse:function (node) {
// console.log(node);
},
onCollapse:function (node) {
// console.log(node);
},
//勾选复选框
onBeforeCheck:function (node,checked) {
// console.log(node);
// console.log(checked);
},
onCheck:function (node,checked) {
// console.log(node);
// console.log(checked);
},
//点击节点
onBeforeSelect:function (node) {
// console.log(node);
},
onSelect:function (node) {
// console.log(node);
},
onContextMenu:function (e,node) {
e.preventDefault();
$("#box").tree('select',node.target);
$("#menu").menu('show',{
left:e.pageX,
top:e.pageY,
});
},
onBeforeEdit:function () {
// alert("before");
},
onAfterEdit:function (node) {
var id = node.id;
var text = node.text;
$.ajax({
url:'updateTree.action',
type:'post',
data:{
id:id,
text:text,
},
dataType:"json",
success:function (data) {
$.messager.show({
title:"提示",
msg:data.msg,
timeout:2000,
showType:'slide',
});
}
});
},
onCancelEdit:function (node) {
// alert("cancel");
}
};
$("#box").tree(options);
$("#menu").menu({
width:150,
onClick:function (item) {
console.log(item);
if(item.text == "修改"){
var node = $('#box').tree('getSelected');
$("#box").tree('beginEdit',node.target);
}else if(item.text == "删除"){
var node = $('#box').tree('getSelected');
if(!$("#box").tree('isLeaf',node.target)){
$.messager.alert("错误","不能删除这个节点",'error');
return;
}
$.ajax({
url:'deleteTreeById.action',
type:'post',
data:{
id:node.id,
},
dataType:"json",
success:function (data) {
$("#box").tree('remove',node.target);
$.messager.show({
title:"提示",
msg:data.msg,
timeout:2000,
showType:"slide",
});
}
});
}else if(item.text == "变成父节点"){
var node = $('#box').tree('getSelected');
if(!$('#box').tree("isLeaf",node.target)){
$.messager.alert("提示","当前节点为父节点，不可转换","warning");
return;
}
$.ajax({
url:'changeNodeState.action',
type:'post',
data:{
id:node.id,
},
dataType:'json',
success:function (data) {
$.messager.show({
title:'提示',
msg:data.msg,
timeout:2000,
showType:'slide',
});
$('#box').tree('update',{
target:node.target,
id:node.id,
text:node.text,
state:'closed',
});
var pNode = $('#box').tree('getParent',node.target);
$('#box').tree('reload',pNode.target);
}
});
}else if(item.text == "增加"){
var node = $('#box').tree('getSelected');
if($('#box').tree("isLeaf",node.target)){
$.messager.alert("提示","当前节点不是父节点，请将其装换为父节点","info");
return;
}
$.ajax({
url:'addTree.action',
type:'post',
data:{
text:'新节点',
pid:node.id,
flag:0,
},
dataType:'json',
success:function (data) {
if(data.flag){
$('#box').tree('append',{
parent:node.target,
data:[
{
text:"新节点",
}
]
});
}
$.messager.show({
title:"提示",
msg:data.msg,
timeout:2000,
showType:'slide',
});
var pNode = $('#box').tree('getParent',node.target);
$('#box').tree('reload',node.target);
}
});
}else if(item.text == "取消"){
var node = $('#box').tree('getSelected');
$("#box").tree('reload',node.target);
}
},
});
});Controller文件
package com.ooyhao.controller;
import com.ooyhao.EasyUIVo.Message;
import com.ooyhao.pojo.Tree;
import com.ooyhao.service.TreeService;
import org.apache.ibatis.annotations.Param;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.List;
/**
* @author ooyhao
*/
@Controller
public class TreeController {
@Autowired
private TreeService treeService;
@RequestMapping(value = "getTrees")
@ResponseBody
public List<Tree> getTrees(){
return treeService.getTrees();
}
@RequestMapping(value = "findTrees")
@ResponseBody
public List<Tree> findTrees(String id){
int pid = -1;
if(id != null)
pid = Integer.parseInt(id);
return treeService.findTreesByPid(pid);
}
@RequestMapping(value = "deleteTreeById")
@ResponseBody
public Message deleteTreeById(String id){
treeService.deleteTreeById(Integer.parseInt(id));
return new Message(true,"删除成功");
}
@RequestMapping(value = "updateTree")
@ResponseBody
public Message updateTree(String id, String text){
Tree tree = treeService.getTreeById(Integer.parseInt(id));
tree.setText(text);
treeService.updateTree(tree);
return new Message(true,"更新成功");
}
@RequestMapping(value = "addTree")
@ResponseBody
public Message addTree(Tree tree){
treeService.addTree(tree);
return new Message(true,"添加成功");
}
@RequestMapping(value = "changeNodeState")
@ResponseBody
public Message changeNodeState(Integer id){
Tree tree = treeService.getTreeById(id);
tree.setState("closed");
treeService.updateTree(tree);
return new Message(true,"状态改变成功");
}
}
Service文件
package com.ooyhao.service;
import com.ooyhao.pojo.Tree;
import java.util.List;
/**
* @author ooyhao
*/
public interface TreeService {
public List<Tree> getTrees();
public List<Tree> findTreesByPid(Integer pid);
public void deleteTreeById(Integer id);
public void updateTree(Tree tree);
public Tree getTreeById(Integer id);
public void addTree(Tree tree);
}
ServiceImpl文件
package com.ooyhao.service;
import com.ooyhao.dao.TreeMapper;
import com.ooyhao.pojo.Tree;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
/**
* @author ooyhao
*/
@Service
public class TreeServiceImpl implements TreeService {
@Autowired
private TreeMapper treeMapper;
/**
* 一次获得所有树结构
* @return
*/
@Override
public List<Tree> getTrees() {
return buildTree(-1);
}
//使用递归创建菜单树
public List<Tree> buildTree(Integer pid){
//创建一棵树
//获得一级菜单
List<Tree> trees = treeMapper.getTreesByPid(pid);
if(trees == null || trees.size() == 0){
return null;
}
//遍历一级菜单
for(Tree tree : trees){
//获得每一个节点的id作为下一级的父级id
List<Tree> treeList = buildTree(tree.getId());
tree.setChildren(treeList);
}
return trees;
}
/**
* 异步创建树
* @param pid
* @return
*/
@Override
public List<Tree> findTreesByPid(Integer pid) {
return treeMapper.getTreesByPid(pid);
}
@Override
public void deleteTreeById(Integer id) {
treeMapper.deleteTreeById(id);
}
@Override
public void updateTree(Tree tree) {
treeMapper.updateTree(tree);
}
@Override
public Tree getTreeById(Integer id) {
return treeMapper.getTreeById(id);
}
@Override
public void addTree(Tree tree) {
treeMapper.addTree(tree);
}
}
DAO文件
package com.ooyhao.dao;
import com.ooyhao.pojo.Tree;
import java.util.List;
/**
* @author ooyhao
*/
public interface TreeMapper {
/**
* 获得所有的记录
* @return
*/
public List<Tree> getTrees();
/**
* 根据pid获得记录
*/
public List<Tree> getTreesByPid(Integer pid);
/**
* 根据id获得记录
*/
public Tree getTreeById(Integer id);
/**
* 根据id删除记录
*/
public void deleteTreeById(Integer id);
/**
* 更新记录
*/
public void updateTree(Tree tree);
/**
* 插入一条记录
*/
public void addTree(Tree tree);
}
Mapper文件
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.ooyhao.dao.TreeMapper">
<select id="getTrees" resultType="Tree">
select * from tb_tree where flag != 2;
</select>
<select id="getTreesByPid" resultType="Tree" parameterType="Integer">
select * from tb_tree WHERE pid = #{pid} ;
</select>
<select id="getTreeById" parameterType="Integer" resultType="Tree">
select * from tb_tree where id = #{id}
</select>
<delete id="deleteTreeById" parameterType="Integer">
DELETE FROM tb_tree WHERE id = #{id};
</delete>
<update id="updateTree" parameterType="Tree">
UPDATE tb_tree
<set>
<if test="text != null and text !='' ">
text = #{text},
</if>
<if test="text != null and text !='' ">
pid = #{pid},
</if>
<if test="attributes != null and attributes !='' ">
attributes = #{attributes},
</if>
<if test="flag != null and flag !='' ">
flag = #{flag},
</if>
<if test="state != null and state !='' ">
state = #{state},
</if>
</set>
WHERE id = #{id}
</update>
<insert id="addTree" parameterType="Tree">
insert into tb_tree (text,pid,state,flag,attributes)values(#{text},#{pid},#{state},#{flag},#{attributes});
</insert>
</mapper>
Message文件
package com.ooyhao.EasyUIVo;
import java.io.Serializable;
/**
* @author ooyhao
*/
public class Message<T> implements Serializable{
private Boolean flag = true;
private String msg = "操作成功";
private T obj;
public Message() {
}
public Message(Boolean flag, String msg) {
this.flag = flag;
this.msg = msg;
}
public Message(Boolean flag, String msg, T obj) {
this.flag = flag;
this.msg = msg;
this.obj = obj;
}
public Boolean getFlag() {
return flag;
}
public void setFlag(Boolean flag) {
this.flag = flag;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public T getObj() {
return obj;
}
public void setObj(T obj) {
this.obj = obj;
}
@Override
public String toString() {
return "Message{" +
"flag=" + flag +
", msg='" + msg + '\'' +
", obj=" + obj +
'}';
}
}
Tree文件
package com.ooyhao.pojo;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
/**
* @author ooyhao
*/
public class Tree implements Serializable {
private Integer id;
private String text;
private Integer pid;
private Integer flag;
private String state;
private String attributes;
private List<Tree> children = new ArrayList<>();
public Tree() {
}
public Tree(Integer id, String text, Integer pid, Integer flag, String state, String attributes) {
this.id = id;
this.text = text;
this.pid = pid;
this.flag = flag;
this.state = state;
this.attributes = attributes;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public Integer getPid() {
return pid;
}
public void setPid(Integer pid) {
this.pid = pid;
}
public Integer getFlag() {
return flag;
}
public void setFlag(Integer flag) {
this.flag = flag;
}
public String getAttributes() {
return attributes;
}
public void setAttributes(String attributes) {
this.attributes = attributes;
}
public String getState() {
return state;
}
public void setState(String state) {
this.state = state;
}
public List<Tree> getChildren() {
return children;
}
public void setChildren(List<Tree> children) {
this.children = children;
}
@Override
public String toString() {
return "Tree{" +
"id=" + id +
", text='" + text + '\'' +
", pid=" + pid +
", flag=" + flag +
", state='" + state + '\'' +
", attributes='" + attributes + '\'' +
", children=" + children +
'}';
}
}
效果图
------------------------------------------------
关注小编微信公众号获取更多资源
