ztree权限树增删改
如果是崭新崭新的像我一样接触ztree朋友,建议去看大佬的博客链接：Ztree使用教程 - leagueandlegends - 博客园 (cnblogs.com)
一、权限树展示
这三个按钮分别是 增加节点，修改节点名字，删除节点
二、程序代码
1.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%String path = request.getContextPath();%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="<%=path%>/web/ztree/js/jquery-1.4.4.min.js" ></script>
<link rel="stylesheet" href="<%=path%>/web/ztree/css/metroStyle/metroStyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=path%>/web/ztree/js/jquery.ztree.all.min.js" ></script>
<script src="<%=path%>/web/ztree/js/jquery.ztree.core.min.js"></script>
<script src="<%=path%>/web/ztree/js/jquery.ztree.excheck.min.js"></script>
<script src="<%=path%>/web/ztree/js/jquery.ztree.exedit.min.js"></script>
</head>
<body>
<!-- main content start-->
<div id="page-wrapper">
<div class="main-page">
<div class="tables">
<h2 class="title1">权限树</h2>
<div class="bs-example widget-shadow" data-example-id="hoverable-table">
<div>
<ul id="treeDemo" class="ztree" style="margin-left:10%;margin-top:3%;margin-bottom:10%;height: auto;font-size: 40px"></ul>
</div>
</div>
</div>
</div>
</div>
<!-- main content end-->
<script>
var settings = {
view: {
addHoverDom: addHoverDom, //当鼠标移动到节点上时，显示用户自定义控件
removeHoverDom: removeHoverDom, //离开节点时的操作
},
data: {
simpleData: {
enable: true, //true 、 false 分别表示 使用 、 不使用 简单数据模式
idKey: "id", //节点数据中保存唯一标识的属性名称
pIdKey: "parentId", //节点数据中保存其父节点唯一标识的属性名称
rootPId: -1 //用于修正根节点父节点数据，即 pIdKey 指定的属性值
},
key: {
name: "menuName" //zTree 节点数据保存节点名称的属性名称 默认值："name"
}
},
check: {
enable: true, //true 、 false 分别表示 显示 、不显示 复选框或单选框
nocheckInherit: true //当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true
},
edit: {
enable: true,
showRemoveBtn: true,
removeTitle: "删除节点",
renameTitle: "编辑节点名称",
showRenameBtn: true,
},
callback: {
// 回调事件
onClick: zTreeOnClick,//点击增加
beforeRemove: zTreeBeforeRemove,
onRemove: zTreeOnRemove,//移动
onRename: zTreeOnRename//修改
}
}
var zTreeObj;
$(document).ready(function(){
$.ajax({
type:"get",
url:"getMenuTestList",
async:true,
success:function(res){
zTreeObj = $.fn.zTree.init($("#treeDemo"), settings, JSON.parse(res).menulists); //初始化树
zTreeObj.expandAll(true); //true 节点全部展开、false节点收缩
}
});
});
function zTreeOnClick(event, treeId, treeNode) {
//绑定添加事件，并定义添加操作
// var newID = treeNode.id; //获取新添加的节点Id
// zTree.addNodes(treeNode, {id:newID, pId:treeNode.id, name:name}); //页面上添加节点
// var node = zTree.getNodeByParam("id", newID, null); //根据新的id找到新添加的节点
// zTree.selectNode(node); //让新添加的节点处于选中状态
//
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
//将新节点添加到数据库中
var menuName='NewNode'+Math.random().toString(36).substring(2);
$.post('saveMenuTest?parentId='+treeNode.id+'&menuName='+menuName,function (data) {
var newID = JSON.parse(data); //获取新添加的节点Id
zTree.addNodes(treeNode, {id:newID, pId:treeNode.id, menuName:menuName}); //页面上添加节点
var node = zTree.getNodeByParam("id", newID, null); //根据新的id找到新添加的节点
zTree.selectNode(node); //让新添加的节点处于选中状态
location.reload();
});
};
function addHoverDom(treeId, treeNode) {
var sObj = $("#" + treeNode.tId + "_span"); //获取节点信息
if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
var addStr = "<span class='button add' id='addBtn_" + treeNode.tId + "' title='添加节点' onfocus='this.blur();'></span>"; //定义添加按钮
sObj.after(addStr); //加载添加按钮
};
function removeHoverDom(treeId, treeNode) {
$("#addBtn_"+treeNode.tId).unbind().remove();
};
// 编辑节点事件
function zTreeOnRename(event, treeId, treeNode) {
$.post('updateMenuTest?id=' + treeNode.id+'&menuName='+treeNode.menuName,function () {
location.reload();
});
}
// 删除之前事件
function zTreeBeforeRemove(treeId, treeNode) {
return confirm("是否确认删除？") == true;
}
// 删除节点事件
function zTreeOnRemove(event, treeId, treeNode) {
$.post('removeMenuTest?id=' + treeNode.id,function () {
location.reload();
});
}
</script>
</body>
</html>
2.sql数据
DROP TABLE IF EXISTS `menu_test`; CREATE TABLE `menu_test` ( `id` int NOT NULL AUTO_INCREMENT, `parent_id` varchar(255) COLLATE utf8mb4_general_ci DEFAULT NULL, `menu_name` varchar(255) COLLATE utf8mb4_general_ci DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=97 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci; -- ---------------------------- -- Records of menu_test -- ---------------------------- INSERT INTO `menu_test` VALUES ('1', '0', '系统管理'); INSERT INTO `menu_test` VALUES ('2', '1', '用户管理'); INSERT INTO `menu_test` VALUES ('3', '2', '角色管理修改'); INSERT INTO `menu_test` VALUES ('4', '1', '网站管理'); INSERT INTO `menu_test` VALUES ('5', '1', '媒体管理'); INSERT INTO `menu_test` VALUES ('6', '5', '音频管理'); INSERT INTO `menu_test` VALUES ('8', '2', '权限管理'); INSERT INTO `menu_test` VALUES ('79', '4', '餐饮管理'); INSERT INTO `menu_test` VALUES ('80', '4', '酒水管理'); INSERT INTO `menu_test` VALUES ('81', '4', '财务管理'); INSERT INTO `menu_test` VALUES ('82', '4', '未来规划'); INSERT INTO `menu_test` VALUES ('95', '1', '博客管理');
3.model
import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; @Data @AllArgsConstructor @NoArgsConstructor public class MenuTest { private String id; private String parentId; private String menuName; }
4.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.kanfang.dao.WoWDao"> <select id="getMenuTestList" resultType="MenuTest"> select id as id, parent_id as parentId, menu_name as menuName from menu_test </select> <insert id="save" parameterType="MenuTest"> insert into menu_test(parent_id,menu_name) values(#{parentId},#{menuName}) </insert> <select id="findIdByMenuTest" resultType="java.lang.String" parameterType="MenuTest"> select id from menu_test where parent_id=#{parentId} and menu_name=#{menuName} </select> <update id="updatemenuName" parameterType="MenuTest"> update menu_test set menu_name=#{menuName} where id=#{id} </update> <delete id="remove" parameterType="java.lang.String"> delete from menu_test where id=#{id} </delete> </mapper>
5,dao,service,serviceimpl
package com.kanfang.service.impl; import com.kanfang.dao.WoWDao; import com.kanfang.model.MenuTest; import com.kanfang.service.WoWService; import org.springframework.stereotype.Service; import javax.annotation.Resource; import java.util.List; @Service public class WoWServiceImpl implements WoWService { @Resource private WoWDao dao; @Override public List<MenuTest> getMenuTestList() { return dao.getMenuTestList(); } @Override public String findIdByMenuTest(MenuTest menutest) { return dao.findIdByMenuTest(menutest); } @Override public boolean save(MenuTest menutest) { return dao.save(menutest); } @Override public boolean updatemenuName(MenuTest menutest) { return dao.updatemenuName(menutest); } @Override public void remove(String id) { dao.remove(id); } }
package com.kanfang.dao; import com.kanfang.model.MenuTest; import org.apache.ibatis.annotations.Mapper; import java.util.List; @Mapper public interface WoWDao { List<MenuTest> getMenuTestList(); String findIdByMenuTest(MenuTest menutest); boolean save(MenuTest menutest); boolean updatemenuName(MenuTest menutest); void remove(String id); }
package com.kanfang.service.impl; import com.kanfang.dao.ManagerHistoryDao; import com.kanfang.model.ManagerHistory; import com.kanfang.service.ManagerHistoryService; import org.springframework.stereotype.Service; import javax.annotation.Resource; import java.util.List; @Service public class ManagerHistoryServiceImpl implements ManagerHistoryService { @Resource private ManagerHistoryDao dao; @Override public boolean save(ManagerHistory managerhistory) { return dao.save(managerhistory); } @Override public List<ManagerHistory> show() { return dao.show(); } @Override public void remove(String id) { dao.remove(id); } }
6.controller
package com.kanfang.controller; import com.alibaba.fastjson.JSON; import com.kanfang.model.MenuTest; import com.kanfang.service.WoWService; import lombok.extern.log4j.Log4j2; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import javax.annotation.Resource; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.io.PrintWriter; import java.util.HashMap; import java.util.Map; @Controller @Log4j2 public class WoWTree { @Resource private WoWService wowservice; @RequestMapping(value = "wow0") public String wow0(){ return "Manager/wow"; } @RequestMapping(value = "wow") public String wow(){ return "Manager/WoWTree"; } @RequestMapping("/getMenuTestList") public void getMenuTestList( HttpServletResponse response) throws IOException { response.setCharacterEncoding("utf-8");//如果不加此行，中文编码会乱码 Map<String, Object> map = new HashMap<String, Object>(); map.put("menulists", wowservice.getMenuTestList()); PrintWriter out = response.getWriter(); String str = JSON.toJSONString(map);//将list转化为JSON字符串 out.print(str); out.close(); } @RequestMapping("/saveMenuTest") public void saveMenuTest(String parentId,String menuName, HttpServletResponse response) throws IOException { response.setCharacterEncoding("utf-8");//如果不加此行，中文编码会乱码 MenuTest menutest=new MenuTest(); menutest.setParentId(parentId); menutest.setMenuName(menuName); wowservice.save(menutest); String id=wowservice.findIdByMenuTest(menutest); PrintWriter out = response.getWriter(); String str = JSON.toJSONString(id);//将list转化为JSON字符串 out.print(str); out.close(); } @RequestMapping("/removeMenuTest") public void removeMenuTest(String id, HttpServletResponse response) throws IOException { response.setCharacterEncoding("utf-8");//如果不加此行，中文编码会乱码 wowservice.remove(id); } @RequestMapping("/updateMenuTest") public void updateMenuTest(String id,String menuName, HttpServletResponse response) throws IOException { response.setCharacterEncoding("utf-8");//如果不加此行，中文编码会乱码 MenuTest menutest=new MenuTest(); menutest.setMenuName(menuName); menutest.setId(id); wowservice.updatemenuName(menutest); } }
