jsp页面,引入jquery和ztree的js, css文件,解释在里面,仔细看
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<div>
<ul id="contentCategory" class="easyui-tree"> <!--这个div ul就是用来展示树结构的-->
</ul>
</div><!--这个div是展示右键出来的那个功能栏,默认是不显示的-->
<div id="contentCategoryMenu" class="easyui-menu" style="width:120px;" data-options="onClick:menuHandler">
<div data-options="iconCls:'icon-add',name:'add'">添加</div>
<div data-options="iconCls:'icon-remove',name:'rename'">重命名</div>
<div class="menu-sep"></div>
<div data-options="iconCls:'icon-remove',name:'delete'">删除</div>
</div>
<script type="text/javascript">
$(function(){
$("#contentCategory").tree({
url : '/content/category/list', <!--用来获取树结构的url,如果单单想获取树结构,别的不需要的话,下面的这些都可以不用写-->
animate: true,
method : "GET",
onContextMenu: function(e,node){ <!--这个就算用来展示右键弹出来的功能框-->
e.preventDefault();
$(this).tree('select',node.target);
$('#contentCategoryMenu').menu('show',{
left: e.pageX,
top: e.pageY
});
},
onAfterEdit : function(node){ <!--这个是修改节点的时候如果是0就是新增加的节点,这js都不用改的.主要是后台实现-->
var _tree = $(this);
if(node.id == 0){
// 新增节点
$.post("/content/category/create",{parentId:node.parentId,name:node.text},function(data){
if(data.status == 200){
_tree.tree("update",{
target : node.target,
id : data.data.id
});
}else{
$.messager.alert('提示','创建'+node.text+' 分类失败!');
}
});
}else{
$.post("/content/category/update",{id:node.id,name:node.text});
}
}
});
});
function menuHandler(item){ //下面这块就是那些事件的判断
var tree = $("#contentCategory");
var node = tree.tree("getSelected");
if(item.name === "add"){
tree.tree('append', {
parent: (node?node.target:null),
data: [{
text: '新建分类',
id : 0,
parentId : node.id
}]
});
var _node = tree.tree('find',0);
tree.tree("select",_node.target).tree('beginEdit',_node.target);
}else if(item.name === "rename"){
tree.tree('beginEdit',node.target);
}else if(item.name === "delete"){
$.messager.confirm('确认','确定删除名为 '+node.text+' 的分类吗?',function(r){
if(r){
$.post("/content/category/delete/",{id:node.id},function(){
tree.tree("remove",node.target);
});
}
});
}
}
</script>
后台controller ,页面加载的方法,其实就是加载了父级最外面一级的,每次点击的时候还会走这个方法查询相应下面的数据.添加的话得根据返回自增主键写sql语句,因为得需要返回插入字段返回的id值,具体参考https://blog.csdn.net/kxj19980524/article/details/84870824
package cn.e3mall.controller;
import java.util.List;
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.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;import cn.e3mall.common.pojo.EasyUITreeNode;
import cn.e3mall.common.utils.E3Result;
import cn.e3mall.content.service.ContentCategoryService;/**
* 内容分类管理Controller
* <p>Title: ContentCatController</p>
* <p>Description: </p>
* <p>Company: www.itcast.cn</p>
* @version 1.0
*/
@Controller
public class ContentCatController {@Autowired
private ContentCategoryService contentCategoryService;
@RequestMapping("/content/category/list")
@ResponseBody
public List<EasyUITreeNode> getContentCatList(
@RequestParam(name="id", defaultValue="0")Long parentId) {
List<EasyUITreeNode> list = contentCategoryService.getContentCatList(parentId);
return list;
}
/**
* 添加分类节点
*/
@RequestMapping(value="/content/category/create", method=RequestMethod.POST)
@ResponseBody
public E3Result createContentCategory(Long parentId, String name) {
//调用服务添加节点
E3Result e3Result = contentCategoryService.addContentCategory(parentId, name);
return e3Result;
}
}
Service代码,主要就是从数据库先把parentid为某个值的查出来然后存放到工具类中,这个工具类必须这么写,因为ztree要求返回的就是这个格式下面有工具类
package cn.e3mall.content.service.impl;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import cn.e3mall.common.pojo.EasyUITreeNode;
import cn.e3mall.common.utils.E3Result;
import cn.e3mall.content.service.ContentCategoryService;
import cn.e3mall.mapper.TbContentCategoryMapper;
import cn.e3mall.pojo.TbContentCategory;
import cn.e3mall.pojo.TbContentCategoryExample;
import cn.e3mall.pojo.TbContentCategoryExample.Criteria;/**
* 内容分类管理Service
* <p>Title: ContentCategoryServiceImpl</p>
* <p>Description: </p>
* <p>Company: www.itcast.cn</p>
* @version 1.0
*/
@Service
public class ContentCategoryServiceImpl implements ContentCategoryService {@Autowired
private TbContentCategoryMapper contentCategoryMapper;
@Override
public List<EasyUITreeNode> getContentCatList(long parentId) {
// 根据parentid查询子节点列表
TbContentCategoryExample example = new TbContentCategoryExample();
Criteria criteria = example.createCriteria();
//设置查询条件
criteria.andParentIdEqualTo(parentId);
//执行查询
List<TbContentCategory> catList = contentCategoryMapper.selectByExample(example);
//转换成EasyUITreeNode的列表
List<EasyUITreeNode> nodeList = new ArrayList<>();
for (TbContentCategory tbContentCategory : catList) {
EasyUITreeNode node = new EasyUITreeNode();
node.setId(tbContentCategory.getId());
node.setText(tbContentCategory.getName());
node.setState(tbContentCategory.getIsParent()?"closed":"open"); //这个设置open close也是固定的这么写就行
//添加到列表
nodeList.add(node);
}
return nodeList;
}@Override
public E3Result addContentCategory(long parentId, String name) {
//创建一个tb_content_category表对应的pojo对象
TbContentCategory contentCategory = new TbContentCategory();
//设置pojo的属性
contentCategory.setParentId(parentId);
contentCategory.setName(name);
//1(正常),2(删除)
contentCategory.setStatus(1);
//默认排序就是1
contentCategory.setSortOrder(1);
//新添加的节点一定是叶子节点
contentCategory.setIsParent(false);
contentCategory.setCreated(new Date());
contentCategory.setUpdated(new Date());
//插入到数据库
contentCategoryMapper.insert(contentCategory);
//判断父节点的isparent属性。如果不是true改为true
//根据parentid查询父节点
TbContentCategory parent = contentCategoryMapper.selectByPrimaryKey(parentId);
if (!parent.getIsParent()) {
parent.setIsParent(true);
//更新到数数据库
contentCategoryMapper.updateByPrimaryKey(parent);
}
//返回结果,返回E3Result,包含pojo
return E3Result.ok(contentCategory);
}}
返回的工具类
package cn.e3mall.common.pojo;
import java.io.Serializable;
public class EasyUITreeNode implements Serializable {
private long id;
private String text;
private String state;
public long getId() {
return id;
}
public void setId(long id) {
this.id = id;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public String getState() {
return state;
}
public void setState(String state) {
this.state = state;
}
}
package cn.e3mall.common.utils;
import java.io.Serializable;
import java.util.List;import com.fasterxml.jackson.databind.JsonNode;
import com.fasterxml.jackson.databind.ObjectMapper;public class E3Result implements Serializable{
// 定义jackson对象
private static final ObjectMapper MAPPER = new ObjectMapper();// 响应业务状态
private Integer status;// 响应消息
private String msg;// 响应中的数据
private Object data;public static E3Result build(Integer status, String msg, Object data) {
return new E3Result(status, msg, data);
}public static E3Result ok(Object data) {
return new E3Result(data);
}public static E3Result ok() {
return new E3Result(null);
}public E3Result() {
}
public static E3Result build(Integer status, String msg) {
return new E3Result(status, msg, null);
}public E3Result(Integer status, String msg, Object data) {
this.status = status;
this.msg = msg;
this.data = data;
}public E3Result(Object data) {
this.status = 200;
this.msg = "OK";
this.data = data;
}// public Boolean isOK() {
// return this.status == 200;
// }public Integer getStatus() {
return status;
}public void setStatus(Integer status) {
this.status = status;
}public String getMsg() {
return msg;
}public void setMsg(String msg) {
this.msg = msg;
}public Object getData() {
return data;
}public void setData(Object data) {
this.data = data;
}/**
* 将json结果集转化为TaotaoResult对象
*
* @param jsonData json数据
* @param clazz TaotaoResult中的object类型
* @return
*/
public static E3Result formatToPojo(String jsonData, Class<?> clazz) {
try {
if (clazz == null) {
return MAPPER.readValue(jsonData, E3Result.class);
}
JsonNode jsonNode = MAPPER.readTree(jsonData);
JsonNode data = jsonNode.get("data");
Object obj = null;
if (clazz != null) {
if (data.isObject()) {
obj = MAPPER.readValue(data.traverse(), clazz);
} else if (data.isTextual()) {
obj = MAPPER.readValue(data.asText(), clazz);
}
}
return build(jsonNode.get("status").intValue(), jsonNode.get("msg").asText(), obj);
} catch (Exception e) {
return null;
}
}/**
* 没有object对象的转化
*
* @param json
* @return
*/
public static E3Result format(String json) {
try {
return MAPPER.readValue(json, E3Result.class);
} catch (Exception e) {
e.printStackTrace();
}
return null;
}/**
* Object是集合转化
*
* @param jsonData json数据
* @param clazz 集合中的类型
* @return
*/
public static E3Result formatToList(String jsonData, Class<?> clazz) {
try {
JsonNode jsonNode = MAPPER.readTree(jsonData);
JsonNode data = jsonNode.get("data");
Object obj = null;
if (data.isArray() && data.size() > 0) {
obj = MAPPER.readValue(data.traverse(),
MAPPER.getTypeFactory().constructCollectionType(List.class, clazz));
}
return build(jsonNode.get("status").intValue(), jsonNode.get("msg").asText(), obj);
} catch (Exception e) {
return null;
}
}}
表结构,这几个字段是起码有的,主要就是根据这几个字段展示ztree