新手ztree结合springmvc 入门生成动态树

这个是异步加载数据 先看效果图

这里先看数据库

直接上代码

<%@ 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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
	<link rel="stylesheet" href="static/css/zTreeStyle/zTreeStyle.css" type="text/css">
	<script type="text/javascript" src="static/js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="static/js/jquery.ztree.core.js"></script>
	<script type="text/javascript" src="static/js/jquery.ztree.exedit.js"></script>
	<SCRIPT type="text/javascript">
		var setting = {
			view: {
				addHoverDom: addHoverDom,
				removeHoverDom: removeHoverDom,
				selectedMulti: false
			},
			async: {
				enable: true,
				url: "tree/getTreeDate",
				autoParam: ["id"]
			},
			edit: {
				enable: true,
				editNameSelectAll: true,
				showRemoveBtn: showRemoveBtn,
				showRenameBtn: showRenameBtn
			},
			data: {
				simpleData: {
					enable: true,
					idKey:"id",
					pIdKey:"pId",
					rootPId:0
				}
			},
			callback: { 
				onAsyncSuccess : function(event, treeId, treeNode, msg){ 
            },
				beforeDrag: beforeDrag,
				beforeEditName: beforeEditName,
				beforeRemove: beforeRemove,
				beforeRename: beforeRename,
				onClick: zTreeOnClick
			}
		};
		var  zNodes =[];//树节点,json格式,异步加载可设置为null或[]
		var zTreeObj;//树对象
		
		//拖拽之前
		function beforeDrag(treeId, treeNodes) {
			return false;
		}
		//编辑之前
		function beforeEditName(treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.selectNode(treeNode);
			setTimeout(function() {
				if (confirm("进入节点 -- " + treeNode.name + " 的编辑状态吗?")) {
					setTimeout(function() {
						zTree.editName(treeNode);
					}, 0);
				}
			}, 0);
			return false;
		}
		//删除之前
		function beforeRemove(treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.selectNode(treeNode);
			return confirm("确认删除 节点 -- " + treeNode.name + " 吗?");
		}
		
		//改名之前
		function beforeRename(treeId, treeNode, newName, isCancel) {
			if (newName.length == 0) {
				setTimeout(function() {
					var zTree = $.fn.zTree.getZTreeObj("treeDemo");
					zTree.cancelEditName();
					alert("节点名称不能为空.");
				}, 0);
				return false;
			}
			return true;
		}
		
		//显示删除按钮
		function showRemoveBtn(treeId, treeNode) {
			
			return !treeNode.isFirstNode;
		}
		//显示修改按钮
		function showRenameBtn(treeId, treeNode) {
			
			return true;
		}

		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='add node' onfocus='this.blur();'></span>";
			sObj.after(addStr);
			//增加按钮点击
			var btn = $("#addBtn_"+treeNode.tId);
			if (btn) btn.bind("click", function(){
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"我的文件夹" + (newCount++)});
				return false;
			});
		};
		//隐藏增加按钮
		function removeHoverDom(treeId, treeNode) {
			$("#addBtn_"+treeNode.tId).unbind().remove();
		};
		//节点点击
		function zTreeOnClick(event, treeId, treeNode) {
			//调用父类页面
			window.parent.fuzhi(treeNode.name);
			//
		    //alert(treeNode.tId + ", " + treeNode.name);
		};
		//初始化
		$(document).ready(function(){
			
			$.fn.zTree.init($("#treeDemo"), setting,zNodes);
		});
	</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>
</head>

<body>
	<div class="zTreeDemoBackground left">
		<ul id="treeDemo" class="ztree"></ul>
	</div>
</body>
</html>

后端代码

@RequestMapping("getTreeDate")
	@ResponseBody
	public List<Tree> getTreeDate(@RequestParam(defaultValue="0")int  id){
		
		List<Tree> list=service.getTree(id);
		
		
	/*	
		List<Map<String, Object>> list=new ArrayList<Map<String, Object>>();
		Map<String, Object> map=new HashMap<String, Object>();
		Map<String, Object> map1=new HashMap<String, Object>();
		
		map1.put("id", "1");
		map1.put("pId", "0");
		map1.put("name", "我的文件夹");
		map1.put("isParent", "true");
		
		map.put("id", "2");
		map.put("pId", "0");
		map.put("isParent", true);
		map.put("name", "我的文件夹1");
		
		list.add(map);
		
		list.add(map1);*/
		
		return list;
	}

上了代码估计都知道怎么做了不过这里来解释下几个地方:

这个 autoParame 是传值给后台的,这个值 时id 也可以时pId 没点击一次都会去查询 父节点下的子节点

根据这个id 来检索所有的子节点。

但是第一次检索怎么办?

这里有设置默认值。第一个父节点可以自己设置好。 我这里是0

这样检索就完成了。

其他的上面都有注释应该都能看懂。

这里没有涉及到权限这一块。只是简单的异步加载树。

如果有什么不懂的 也可以直接评论。我会回复的。刚接触使用这个ztree 请指点。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励