zTree动态加载节点入门demo

最新推荐文章于 2024-03-09 21:49:48 发布
最新推荐文章于 2024-03-09 21:49:48 发布
阅读量3.5k 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zziamalei/article/details/45618847
版权

1、demo地址 http://www.ztree.me/v3/demo.php#_108

2、前台页面

     

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%

  String path=request.getContextPath();
 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>功能管理</title>

   <link rel="stylesheet" href="<%=basePath %>/js/zTree_v3/css/demo.css" type="text/css">
	<link rel="stylesheet" href="<%=basePath %>/js/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
	  <script src='<%=basePath %>/js/jquery/jquery-2.1.4.min.js' type="text/javascript"></script>
	<script type="text/javascript" src="<%=basePath %>/js/zTree_v3/js/jquery.ztree.core-3.5.js"></script>
	<script type="text/javascript" src="<%=basePath %>/js/zTree_v3/js/jquery.ztree.excheck-3.5.js"></script>
	<script type="text/javascript" src="<%=basePath %>/js/zTree_v3/js/jquery.ztree.exedit-3.5.js"></script>
	<script type="text/javascript" src="<%=basePath %>/js/zTree_v3/js/jquery.ztree.exhide-3.5.js"></script>
	<script type="text/javascript" src="<%=basePath %>/js/layer-v1.8.5/layer.min.js"></script>
   <style type="text/css">
      .ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
   </style>
   <!-- Add code to initialize the tree when the document is loaded: -->
   <script type="text/javascript">
   var setting = {
			view: {
				addHoverDom: addHoverDom,
				removeHoverDom: removeHoverDom,
				selectedMulti: false
			},
			edit: {
				enable: true,
				editNameSelectAll: true,
				showRemoveBtn: showRemoveBtn,
				showRenameBtn: showRenameBtn,
				removeTitle: "删除",
				renameTitle: "重命名",
			},
			async: {
				//返回的json格式：[{"isParent":true,"id":"e831e160f62811e48087b888e32eee38","name":"网站地图","parentId":"0"}]}
				enable: true,
				url:"<%=basePath %>/fun/getChildren.do",
				autoParam:["id"],
				dataFilter: filter
			},
			callback: {
				beforeDrag: beforeDrag,
				beforeEditName: beforeEditName,
				beforeRemove: beforeRemove,
				beforeRename: beforeRename,
				onRemove: onRemove,
				onRename: onRename
			}
		};
      
   
	   function filter(treeId, parentNode, childNodes) {
		   childNodes = childNodes.replace('father','isParent');
		   var jsonObj = JSON.parse(childNodes);
		   childNodes=jsonObj["list"];
			if (!childNodes) return null;
			for (var i=0, l=childNodes.length; i<l; i++) {
				childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
			}
			return childNodes;
		}
   
      
       var log, className = "dark";
		function beforeDrag(treeId, treeNodes) {
			return false;
		}
       
		function beforeEditName(treeId, treeNode) {
			className = (className === "dark" ? "":"dark");
			showLog("[ "+getTime()+" beforeEditName ]     " + treeNode.name);
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.selectNode(treeNode);
			return confirm("进入节点 -- " + treeNode.name + " 的编辑状态吗？"+treeNode.id);
		}
		function beforeRemove(treeId, treeNode) {
			className = (className === "dark" ? "":"dark");
			showLog("[ "+getTime()+" beforeRemove ]     " + treeNode.name);
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.selectNode(treeNode);
			var f = confirm("确认删除 节点 -- " + treeNode.name + " 吗？"+treeNode.id);
			if(f){
				$.ajax({
		    		   type: "POST",
		    		   url: "<%=basePath %>/fun/del.do",
		    		   data: {"pkGlobalId":treeNode.id},
		    		   dataType : "json",
		    		   success:function(data){
		    			 if(data!=0){
		    				 f=true;
		    				 alert("删除成功");
		    			 }else{
		    				 f=false;
		    			 }
		    		   }
		    		});
				
			}
			return f;
		}
		function onRemove(e, treeId, treeNode) {
			showLog("[ "+getTime()+" onRemove ]     " + treeNode.name);
		}
		function beforeRename(treeId, treeNode, newName, isCancel) {
			className = (className === "dark" ? "":"dark");
			showLog((isCancel ? "<span style='color:red'>":"") + "[ "+getTime()+" beforeRename ]     " + treeNode.name + (isCancel ? "</span>":""));
			if (newName.length == 0) {
				alert("节点名称不能为空.");
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				setTimeout(function(){zTree.editName(treeNode)}, 10);
				return false;
			}
			return true;
		}
		function onRename(e, treeId, treeNode, isCancel) {
			alert(treeNode.level+"主键为【"+treeNode.id+"】的标签名称修改为了【"+treeNode.name+"】，需要向后台发送请求");
			//showLog((isCancel ? "<span style='color:red'>":"") + "[ "+getTime()+" onRename ]     " + treeNode.name + (isCancel ? "</span>":""));
	
			    	$.ajax({
			    		   type: "POST",
			    		   url: "<%=basePath %>/fun/update.do",
			    		   data: {"name":treeNode.name,"pkGlobalId":treeNode.id},
			    		   dataType : "json",
			    		   success:function(data){
			    			 if(data==1){
			    				 alert("修改成功");
			    			 }
			    		   }
			    		});

		}
		function showRemoveBtn(treeId, treeNode) {
			var flag=true;
			if(treeNode.level==0){
				//是第一个节点
				flag=false;
			}
			/* if(treeNode.isLastNode){
				//是最后一个节点
				flag=false;
			} */
			return flag;
		}
		function showRenameBtn(treeId, treeNode) {
			var flag=true;
			if(treeNode.level==0){
				//是第一个节点
				flag=false;
			}
			return flag;
		}
		function showLog(str) {
			if (!log) log = $("#log");
			log.append("<li class='"+className+"'>"+str+"</li>");
			if(log.children("li").length > 8) {
				log.get(0).removeChild(log.children("li")[0]);
			}
		}
		function getTime() {
			var now= new Date(),
			h=now.getHours(),
			m=now.getMinutes(),
			s=now.getSeconds(),
			ms=now.getMilliseconds();
			return (h+":"+m+":"+s+ " " +ms);
		}

		var newCount = 1;
		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='新增' οnfοcus='this.blur();'></span>";
			sObj.after(addStr);
			var btn = $("#addBtn_"+treeNode.tId);
			if (btn) btn.bind("click", function(){
				
				alert("单击了新增");
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				$.layer({
				    type: 2,
				    shade: [0],
				    fix: false,
				    title: '新增',
				    maxmin: true,
				    iframe: {src : '<%=basePath %>/func/addNewFun.jsp?parentId='+treeNode.id},
				    area: ['400px' , '240px'],
				    closeBtn: [0, true],
				    close: function(index){
				    	var name = layer.getChildFrame('#name', index).val();
				    	
				    	$.ajax({
				    		   type: "POST",
				    		   url: "<%=basePath %>/fun/add.do",
				    		   data: {"name":name,"parentId":treeNode.id},
				    		   dataType : "json",
				    		   success:function(data){
				    			  data= JSON.parse(data);
				    		     if(data.flag){
								    	zTree.addNodes(treeNode, {id:data.msg, pId:treeNode.id, name:name});
										return false;
				    		     }
				    		   }
				    		});
				    	

				    }
				}); 
				
				
			});
		};
		function removeHoverDom(treeId, treeNode) {
			$("#addBtn_"+treeNode.tId).unbind().remove();
		};
		function selectAll() {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.setting.edit.editNameSelectAll =  $("#selectAll").attr("checked");
		}
		
		
		function refreshNode(e) {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
			type = e.data.type,
			silent = e.data.silent,
			nodes = zTree.getSelectedNodes();
			if (nodes.length == 0) {
				alert("请先选择一个父节点");
			}
			for (var i=0, l=nodes.length; i<l; i++) {
				zTree.reAsyncChildNodes(nodes[i], type, silent);
				if (!silent) zTree.selectNode(nodes[i]);
			}
		}
       
		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting);
			$("#refreshNode").bind("click", {type:"refresh", silent:false}, refreshNode);
			$("#refreshNodeSilent").bind("click", {type:"refresh", silent:true}, refreshNode);
			$("#addNode").bind("click", {type:"add", silent:false}, refreshNode);
			$("#addNodeSilent").bind("click", {type:"add", silent:true}, refreshNode);
		});
   
   </script>
   
</head>
<body>
<div class="zTreeDemoBackground left">
		<ul id="treeDemo" class="ztree"></ul>
	</div>
</body>
</html>

zziamalei
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
django使用ztree实现树状结构效果，子节点实现动态加载（l懒加载）
c1007857613的专栏
08-02 1695
django使用ztree实现树状结构效果，子节点实现动态加载（l懒加载）
jQuery zTree 异步加载添加子节点重复问题
10-18
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。下面通过本文给大家分享jQuery zTree 异步加载添加子节点重复问题，需要的朋友参考下吧
zTree动态添加节点
weixin_39816740的博客
06-28 1万+
在zTree上面动态添加节点要用到函数：addNodes(parentNode, [index], newNodes, isSilent)关于这个函数的详细说明如下：示例代码如下：//1、获取zTree对象var treeObj = $.fn.zTree.getZTreeObj("treeDiv"); //2、获取当前选中的节点var selectedNode = treeObj.getSelec...
Jquery.zTree动态加载数据
最新发布
为技术而生
03-09 3174
1.ajax获取数据 var zTreeNodes;var setting = { view: { selectedMulti: true //支持多选 }, data: { simpleData: { enable: true //开启 } }, callback: { beforeClick: getCurrentNode, ...
ztree动态加载数据
崔伟的博客
08-22 1604
ztree以数组形式动态加载数据 $(function(){     nodeTree();      })     /*var nodeName=$("#nodeName").val();//名称     var capacity=$("#ui-id-1 option:selected").val();//容量     var zone=$("#citySel").val();//地区    ...
ztree树节点调用iframe（点击树动态加载右边页面）
sunlu12312的博客
02-08 139
NO
zTree异步加载子节点针对大数据量数列表
05-26
最近项目中有一个比较大型的树节点加载，网上面也看过一些解决方案，感觉都不是很好，也有很多误区，比如单击节点时加载子节点，导致节点重复添加。ztree fileter方法是在每次展开时都会执行，所以根据不同的请求...
ztree获取当前选中节点子节点id集合的方法
09-03
主要介绍了ztree获取当前选中节点子节点id集合的方法,实例分析了ztree的方法transformToArray使用技巧,需要的朋友可以参考下
详解Angular结合zTree异步加载节点数据
08-28
本篇文章主要给大家分享了Angular结合zTree异步加载节点数据的难点以及方法，有这方面需求的朋友参考下吧。
Ztree树形动态加载数据
小码哥AI、互联网副业项目
01-26 6406
一、引入ztree样式和js 二、添加树形样式 id="menuContent" class="menuContent" style="display:none; position: absolute; z-index:9999"> id="treeDemo" class="ztree" style="margin-top:0; width:160px;height:520
前端框架 zTree 从数据库中动态加载树形菜单
06-14
前端框架 zTree 从数据库中动态加载树形菜单前端框架
使用 zTree 动态加载树形菜单
08-10
NULL 博文链接：https://xurichusheng.iteye.com/blog/2200545
jquery ztree 异步动态加载
07-30
jquery ztree 异步动态加载部署直接运行，大数据量，异步是很好的处理方式
解决ztree添加节点不显示问题
05-22
解决ztree添加节点不显示问题
zTree的使用
木元心的博客
03-06 3195
zTree的使用 文章目录zTree的使用zTree方法`init(obj, zSetting, zNodes) ``destory(treeId)``_z:{tools, view, event, data}``zTreeObj.addNodes(parentNode, index, newNodes, isSilent)``copyNode(targetNode, node, moveType, isSilent)``getSelectedNodes()``getNodes()``getNodeByPa
zTree动态加载
bahongying2053的博客
10-23 123
@{ Layout = null;} <!DOCTYPE html> <html><head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Cont...
zTree框架添加节点示例
热门推荐
bruce128的专栏
03-18 3万+
今天写web的代码卡在这里一个多小时，总结一下。     zTree的addNodes(parentNode, newNodes, isSilent)方法的参数说明太具迷惑性了。如图：     于是我认为这个地方用的是json串，可能是后台代码写太多了，思维定势吧。用JSON.stringify()方法把父节点对象和子节点对象序列化之后，再传入addNodes()方法，提示表达式格式有
ztree的json节点数据文件
11-27
通过将这些节点数据以JSON格式存储在文件中，我们可以轻松地读取和解析这些数据，并将它们动态地加载到zTree插件中。这使得我们可以方便地在页面中显示和操作树状结构的数据，例如展开和折叠节点、添加和删除节点等...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值