ztree生成树的目录结构，且自定义图片+模态框

最新推荐文章于 2024-01-19 14:59:44 发布
最新推荐文章于 2024-01-19 14:59:44 发布
阅读量466 收藏
点赞数
分类专栏： Spring web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40244391/article/details/103294536
版权
web 同时被 2 个专栏收录
28 篇文章 0 订阅
订阅专栏
Spring
9 篇文章 0 订阅
订阅专栏

只有前端的页面和JS没有后台，数据库表的结构看图，页面使用了layer和ztree自行拷贝官方的js和css文件

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<script type="text/javascript">
		$(function() {
			$(".list-group-item").click(function() {
				if ($(this).find("ul")) {
					$(this).toggleClass("tree-closed");
					if ($(this).hasClass("tree-closed")) {
						$("ul", this).hide("fast");
					} else {
						$("ul", this).show("fast");
					}
				}
			});
			initMenuTree();
			
		});
		
		function initMenuTree(){
			 /* 对树插件的配置信息 */
		   var setting = {
		        data: {
		            simpleData: {
		                enable: true,
		                pIdKey: "pid"
		            }
		        } ,
		        view: {
		        	//用于在节点上固定显示用户自定义控件
					addDiyDom: function(treeId, treeNode){
						//treeNode 一个菜单节点
						$("#" + treeNode.tId + "_ico").removeClass();//.addClass();
						$("#" + treeNode.tId + "_ico").addClass(treeNode.icon);
						//$("#" + treeNode.tId + "_span").before("<span class='"+treeNode.icon+"'></span>");
						//点击不跳转
						var aObj = $("#" + treeNode.tId + "_a");
						aObj.attr("href", "javascript:;");
						aObj.attr("target", "_self");
					},
					addHoverDom: function(treeId, treeNode){  
						var aObj = $("#" + treeNode.tId + "_a"); // tId = permissionTree_1, ==> $("#permissionTree_1_a")
						//如果已经有了按钮组 就不进行构建按钮组
						if (treeNode.editNameFlag || $("#btnGroup"+treeNode.tId).length>0) return;
						//按钮组
						var s = '<span id="btnGroup'+treeNode.tId+'">';
						//根节点
						if ( treeNode.level == 0 ) {
							//增加按钮  传入当前节点Id
							s += '<a onclick="addBtn('+treeNode.id+')" class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" href="#" >&nbsp;&nbsp;<i class="fa fa-fw fa-plus rbg "></i></a>';
						} 
						//二级节点
						else if ( treeNode.level == 1 ) {
							//修改按钮
							s += '<a onclick="updateBtn('+treeNode.id+')" class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;"  href="#" title="修改权限信息">&nbsp;&nbsp;<i class="fa fa-fw fa-edit rbg "></i></a>';
							//增加按钮 
							s += '<a onclick="addBtn('+treeNode.id+')" class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" href="#" >&nbsp;&nbsp;<i class="fa fa-fw fa-plus rbg "></i></a>';
							if (treeNode.children.length == 0) {
								//删除按钮
								s += '<a onclick="deleteBtn('+treeNode.id+')" class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" href="#" >&nbsp;&nbsp;<i class="fa fa-fw fa-times rbg "></i></a>';
							}
						} 
						//三级节点
						else if ( treeNode.level == 2 ) {
							//修改按钮
							s += '<a onclick="updateBtn('+treeNode.id+')" class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;"  href="#" title="修改权限信息">&nbsp;&nbsp;<i class="fa fa-fw fa-edit rbg "></i></a>';
							//删除按钮
							s += '<a onclick="deleteBtn('+treeNode.id+')" class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" href="#">&nbsp;&nbsp;<i class="fa fa-fw fa-times rbg "></i></a>';
						}
						s += '</span>';
						aObj.append(s);
					},
					removeHoverDom: function(treeId, treeNode){
						$("#btnGroup"+treeNode.tId).remove();
					}
		        } 
		    }; 
			//查询所有的树节点
		    $.ajax({
		        type: "GET",
		        url: "${PATH}/menu/queryMenus",
		        data: {},
		        success: function (retVal) {
		            var zNodes = retVal;
		            zNodes.push({
		            	id:0,
		            	name:'系统菜单'
		            })
		            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
		            var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
		            treeObj.expandAll(true); 
		        }
		    });
		}
		
	 	function addBtn(id){
			
			$('#addModal').modal({
				show:true,
				//防止鼠标按妞按下去模态框消失
				backdrop:'static',
				//防止ESC按下去模态框消失
				keyboard:true
			});
			var pid=$("#addModal input[name='pid']").val(id);
		}
		
		$("#saveBtn").click(function(){
			var pid=$("#addModal input[name='pid']").val();
			var name=$("#addModal input[name='name']").val();
			var url=$("#addModal input[name='url']").val();
			var icon=$("#addModal input[name='icon']").val();
			$.ajax({
				 type: "post",
			        url: "${PATH}/menu/addMenu",
			        data: {pid:pid,name:name,url:url,icon:icon},
			        success: function (retVal) {
			        	if(retVal=="ok"){
		    				layer.msg("保存成功", {
		                        time: 1000,
		                        icon: 6
		                    }, function () {
		                        //1.关掉模态框
		    				    $("#addModal").modal('hide');
		                        //2.刷新角色列表
		                        initMenuTree();
		                        //3.把输入框设置为空
		                        var pid=$("#addModal input[name='pid']").val('');
		            			var name=$("#addModal input[name='name']").val('');
		            			var url=$("#addModal input[name='url']").val('');
		            			var icon=$("#addModal input[name='icon']").val('');
		                    });
		    			}else{
		    				layer.msg('菜单保存失败',{
		                        time: 1000,
		                        icon: 5
		                    });
		    			}
			        }
			});
		});
        function updateBtn(id){
			
			$('#updateModal').modal({
				show:true,
				//防止鼠标按妞按下去模态框消失
				backdrop:'static',
				//防止ESC按下去模态框消失
				keyboard:true
			});
			$.ajax({
				   type: "post",
			        url: "${PATH}/menu/queryMenuById",
			        data: {id:id},
			        success: function (retVal) {
			        	if(retVal!=null){
			        		$("#updateModal input[name='id']").val(retVal.id);
							$("#updateModal input[name='name']").val(retVal.name);
							$("#updateModal input[name='url']").val(retVal.url);
							$("#updateModal input[name='icon']").val(retVal.icon);
			        	}else{
			        		layer.msg("查询失败", {
		                        time: 1000,
		                        icon: 6
		                    });
			        	}
			        }
			     });    
		    }
		
        $("#updateBtn").click(function(){
        	var id=$("#updateModal input[name='id']").val();
			var name=$("#updateModal input[name='name']").val();
			var url=$("#updateModal input[name='url']").val();
			var icon=$("#updateModal input[name='icon']").val();
        	$.ajax({
				 type: "post",
			        url: "${PATH}/menu/updateMenu",
			        data: {id:id,name:name,url:url,icon:icon},
			        success: function (retVal) {
			        	if(retVal=="ok"){
		    				layer.msg("修改成功", {
		                        time: 1000,
		                        icon: 6
		                    }, function () {
		                        //1.关掉模态框
		    				    $("#updateModal").modal('hide');
		                        //2.刷新角色列表
		                        initMenuTree();
		                    });
		    			}else{
		    				layer.msg('菜单修改失败',{
		                        time: 1000,
		                        icon: 5
		                    });
		    			}
			        }
			});
        	
        });
        
        
        function deleteBtn(id){
        	layer.confirm('确认删除？？？？', {
				  btn: ['确认','取消'] //按钮
				}, function(index){
		        	$.ajax({
						 type: "post",
					        url: "${PATH}/menu/deleteMenu",
					        data: {id:id},
					        success: function (retVal) {
					        	if(retVal=="ok"){
				    				layer.msg("删除成功", {
				                        time: 1000,
				                        icon: 6
				                    }, function () {
				                        initMenuTree();
				                    });
				    			}else{
				    				layer.msg("菜单删除失败",{
				                        time: 1000,
				                        icon: 5
				                    });
				    			}
					        }
					    });
				      layer.close(index);//关闭弹窗
				});
             } 
		
	</script>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<%@ include file="/WEB-INF/jsp/common/css.jsp"%>
</head>
<body>

	<jsp:include page="/WEB-INF/jsp/common/top.jsp"></jsp:include>
	<div class="container-fluid">
		<div class="row">
			<jsp:include page="/WEB-INF/jsp/common/sidebar.jsp"></jsp:include>
			<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">
							<i class="glyphicon glyphicon-th"></i> 菜单树
						</h3>
					</div>
					<div class="panel-body">
						<ul id="treeDemo" class="ztree"></ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 添加数据 模态框 -->
	<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">添加菜单</h4>
				</div>
				<div class="modal-body">
					<div class="form-group">
						<label for="name">菜单名称</label> <input type="hidden" name="pid"> <input type="text" class="form-control" id="name" name="name" placeholder="请输入菜单名称">
					</div>
					<div class="form-group">
						<label for="url">菜单URL</label> <input type="text" class="form-control" id="url" name="url" placeholder="请输入菜单URL">
					</div>
					<div class="form-group">
						<label for="icon">菜单图标</label> <input type="text" class="form-control" id="icon" name="icon" placeholder="请输入菜单图标">
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button id="saveBtn" type="button" class="btn btn-primary">保存</button>
				</div>
			</div>
		</div>
	</div>
	
	
	<!-- 更新数据 模态框 -->
	<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">修改菜单</h4>
				</div>
				<div class="modal-body">
					<div class="form-group">
						<label for="name">菜单名称</label> <input type="hidden" name="id"> <input type="text" class="form-control" id="name" name="name" placeholder="请输入菜单名称">
					</div>
					<div class="form-group">
						<label for="url">菜单URL</label> <input type="text" class="form-control" id="url" name="url" placeholder="请输入菜单URL">
					</div>
					<div class="form-group">
						<label for="icon">菜单图标</label> <input type="text" class="form-control" id="icon" name="icon" placeholder="请输入菜单图标">
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button id="updateBtn" type="button" class="btn btn-primary">修改</button>
				</div>
			</div>
		</div>
	</div>
	<%@ include file="/WEB-INF/jsp/common/js.jsp"%>
	<%@ include file="/WEB-INF/jsp/menu/function.jsp" %> 
</body>
</html>

模态框（layer的东西）

         这个东西还挺好用的不用自己再写一个添加修改的页面，直接在当前页面进行数据的添加和修改，

    样板：

<!-- 添加数据 模态框 -->
	<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">添加菜单</h4>
				</div>
				<div class="modal-body">
					<div class="form-group">
						<label for="name">菜单名称</label> <input type="hidden" name="pid"> <input type="text" class="form-control" id="name" name="name" placeholder="请输入菜单名称">
					</div>
					<div class="form-group">
						<label for="url">菜单URL</label> <input type="text" class="form-control" id="url" name="url" placeholder="请输入菜单URL">
					</div>
					<div class="form-group">
						<label for="icon">菜单图标</label> <input type="text" class="form-control" id="icon" name="icon" placeholder="请输入菜单图标">
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button id="saveBtn" type="button" class="btn btn-primary">保存</button>
				</div>
			</div>
		</div>
	</div>
	
	
	<!-- 更新数据 模态框 -->
	<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">修改菜单</h4>
				</div>
				<div class="modal-body">
					<div class="form-group">
						<label for="name">菜单名称</label> <input type="hidden" name="id"> <input type="text" class="form-control" id="name" name="name" placeholder="请输入菜单名称">
					</div>
					<div class="form-group">
						<label for="url">菜单URL</label> <input type="text" class="form-control" id="url" name="url" placeholder="请输入菜单URL">
					</div>
					<div class="form-group">
						<label for="icon">菜单图标</label> <input type="text" class="form-control" id="icon" name="icon" placeholder="请输入菜单图标">
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button id="updateBtn" type="button" class="btn btn-primary">修改</button>
				</div>
			</div>
		</div>
	</div>

轻语莫念
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java 生成文件结构目录树
07-23
使用纯java代码遍历文件夹，生成一个文件夹目录结构的目录树。 及返回一个包含有 id(文件夹id) fid(当前文件夹父目录文件夹id) name (文件/文件夹路径)的集合对象。可根据这个结果传到前台，通过jquery.ztree 或是dtree 直接生成文件夹结构的目录树
Ztree生成树
08-16
Ztree是一款广泛应用于Web开发中的JavaScript树形控件，它能帮助开发者轻松地在网页上展示层次结构的数据，如文件目录、组织结构等。在给定的“Ztree生成树”主题中，我们可以深入探讨Ztree的核心功能、如何使用JSON...
ztree自定义图标(iconSkin，iconClose,iconOpen)
a13697013326的博客
08-01 3337
设计图: 先放上ztree的api:http://www.treejs.cn/v3/api.php 首先是ztree的初始化: js文件的初始化 ​ var obj = [ { name: '福建省', id:1, iconOpen:openurl, iconClose:closeurl...
zTree异步加载(自定义图片)
weixin_30951743的博客
04-02 133
原文链接：https://blog.csdn.net/qq_37936542/article/details/78429675zTree官网：点击打开链接一：文件下载点击首页右下角的ztree download，选择Guihub下载点击Clone or download下载二：相关包介绍jquery.ztree.core-3.x.js 核心包（必须）jquer...
移除树结构的空文件夹
最新发布
weixin_45444673的博客
01-19 374
【代码】移除树结构的空文件夹。
使用jQuery zTree插件快速实现目录树
Jeff 的专栏
09-08 7958
ztree是JQuery的一个开源树形目录的插件，用来快速构建网站的树形目录结构，并且提供了功能丰富，利于扩展的API。 只要引入jquery和ztree的库js，然后给ztree提供需要的json数据，并且设置好ztress的属性，就可以即刻展示出树形目录。 总结下来，要使用ztree的话，必须要完成以下几步：
Django+zTree构建组织架构树的方法
09-18
zTree是一个开源的依靠JQuery实现的多功能树插件，具有性能优异、配置灵活、功能强大的特点，这篇文章主要介绍了Django+zTree构建组织架构树,需要的朋友可以参考下
ztree实现左边动态生成树右边为内容详情功能
10-19
zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件。接下来通过本文给大家分享ztree实现左边动态生成树右边为内容详情功能，需要的朋友参考下吧
结合ztree的下拉框树形结构数据多选，单选
07-12
总的来说，"结合ztree的下拉框树形结构数据多选，单选"是一个涉及到前端开发中JavaScript交互设计、数据处理和用户界面优化的重要知识点。通过理解并熟练运用zTree这个工具，开发者能够创建出功能强大且用户体验良好...
jQuery EasyUI结合zTree树形结构制作web页面
12-11
zTree则是一个专门用于生成树形结构的jQuery插件，由国内开发者开发，以其强大的功能和免费的特性而受到广泛欢迎。zTree支持多样的操作，如拖拽、编辑、选择等，且拥有详尽的API文档，使得开发者能够轻松定制和扩展...
jQuery zTree插件快速实现目录树
12-08
ztree是JQuery的一个开源树形目录的插件，用来快速构建网站的树形目录结构，并且提供了功能丰富，利于扩展的API。 JQuery ztree官网 只要引入jquery和ztree的库js，然后给ztree提供需要的json数据，并且设置好ztress的属性，就可以即刻展示出树形目录。 总结下来，要使用ztree的话，必须要完成以下几步： 1. 引入库文件 jquery.js ztree.js ztree.css 2. 获取数据 你要思考数据来源问题了。 如果要自己从数据库查询树形结构这时候你需要知道oracle的递归查询connect by：oracle中使用start with…con
zTree自定义状态图标实现
10-17
本实例详细讲述了如何通过zTree实现满足项目需求Tree数据分层显示要求，通过zTree灵活的自定义属性，轻松完成Tree的改造
Ztree生成目录
大海无量的博客
09-25 853
1.生成目录如图所示： 2.前端引用Ztree: 官方demo: 把zTreeStyle这个目录复制到自己项目的css目录中，复制jquery.ztree.all.min.js文件到自己项目的js目录中： html文件中引用： <link rel="stylesheet" href="../../css/zTreeStyle/zTreeStyle.css" />...
Ztree树状图文件目录
阑珊处的秋月博客
10-13 795
项目场景 使用第三方插件制作层级分明的文件目录,并实现跳转,修改文件名,删除文件,添加新文件的功能。 一、Ztree介绍 1.Ztree是什么？ zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。zTree 是开源免费的软件（MIT 许可证）。 2.为什么用Ztree？ 采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀。 兼容 IE、FireFox、Ch...
jQuery Ztree基本用法
weixin_33690367的博客
06-02 230
1.首先在页面上有&lt;ul/&gt;标签 &lt;ul id="tree" class="ztree"&gt;&lt;/ul&gt; 2.定义ztree的配置参数 var setting = { //check属性放在data属性之后，复选框不起作用 check: { enable: true }, data: { simpleData: { ...
zTree.js读取XML文件动态生成目录树
ssss_cccc的博客
08-04 428
Ztree无法直接加载xml类型的文件，可以先将xml数据读取成json格式的字符串或者直接将数据规整为一个list。 ztree设置 var settingss = { data: { simpleData: { enable: true, //true 、 false 分别表示 使用 、 不使用 简单数据模式 idKey: "nodeID", //节点数据中保存唯一标识的属性名称 pIdKey
zTree生成动态树
daydayup0658的博客
09-14 158
环境搭建：需要jquery 1.4+，jquery.ztree.core-3.1.min.js，ztree自带的css文件和图片，并且css文件和图片文件夹要处于同一目录(很重要)，否则动态树无法正常显示。数据库的设计：CREATE TABLE `function` (                `id` int(4) NOT NULL AUTO_INCREMENT,         ...
ztree 删除/添加节点
hello，是翠花呀
06-27 4125
点击复选框或者 单选框后添加节点 var treeObj = $.fn.zTree.getZTreeObj(&amp;amp;quot;tree&amp;amp;quot;); var selectedNode = treeObj.getCheckedNodes(); // getSelectedNodes var newNode = { name: $(&amp;amp;quot;#newName&amp;amp;quot;).val() }; if
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值