Spring MVC + Mybatis + zTee 实现一个可增、删、改的无限级树-优快云博客

本文介绍了使用SpringMVC、Mybatis和zTree实现树状结构的增删改功能，包括数据库设计、前台加载树结构以及关键的JS脚本处理。

Spring MVC + Mybatis + zTee 实现一个可增、删、改的无限级树

这两天帮老师做了树的增加、删除、修改的功能，查阅了不少资料，在这里分享下一些心得体会。

在这里我选用的是Spring MVC3.2.3 + Mybatis3.2.2 + zTree3.5.14

一：数据库的设计

数据库用的是SQLServer 2008（老师让用SQLServer，郁闷.....）

数据库名：tree，目前就一张表：menuitem

表很简单目前就三个字段(mid int primary,pid int,name varchar)

初始一个值为(1,0,‘地块管理’)

二：最重要的前台加载tree

（一）tree.jsp 位于WEB-INF/jsp/tree.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>tree.jsp</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/zTreeStyle/zTreeStyle.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.ztree.exedit-3.5.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/tree.js"></script>
<style type="text/css">/*设置增加按钮的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>
<ul id="tree" class="ztree"></ul>
</body>
</html>

（二）最重要的 tree.js 位于js/tree.js

tree.js负责前台到后台的数据的交换

下面是tre.js的代码

var tree = {
	zTree : null,
	max : null,
	setting : {
		view : {
			selectedMulti : false,
			addHoverDom : function(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);
				var btn = $("#addBtn_"+treeNode.tId);
				if (btn) btn.bind("click", function(){
					var parameter = {
						mid:++tree.max,
						pid:treeNode.mid,
						name:"新节点 " + tree.max
					};
					tree.zTree.addNodes(treeNode, parameter);
					/**
					 * 处理添加节点
					 */
					$.post("menuitem/insert",parameter);
					return false;
				});
			},
			removeHoverDom : function(treeId, treeNode){
				$("#addBtn_"+treeNode.tId).unbind().remove();
			}
		},
		data : {
			simpleData : {
				enable : true,
				idKey : "mid",
				pIdKey : "pid"
			}
		},
		edit : {
			editNameSelectAll : true,
			enable :true,
			removeTitle : "删除",
			renameTitle : "修改",
			drag : {
				autoExpandTrigger : false,
				isMove : false,
				isCopy : false,
				prev : false,
				next : false,
				inner : false
			}
		},
		callback : {
			beforeRename : function(treeId, treeNode, newName, isCancel){
				if(newName.trim().length == 0){
					alert("名称不能为空或空格！");
					return false;
				}
				return window.confirm("确定将 " + treeNode.name + " 修改为 " + newName + " 吗？");
			},
			onRename : function(event, treeId, treeNode, isCancel){
				/**
				 * 处理更改名称
				 */
				var parameter = {
					mid : treeNode.mid,
					name : treeNode.name
				};
				$.post("menuitem/update", parameter);
			},
			beforeRemove : function(treeId, treeNode){
				return window.confirm("确定删除 " + treeNode.name + " 及其所有子节点吗？");
			},
			onRemove : function(event, treeId, treeNode){
				/**
				 * 处理删除节点信息
				 */
				var parameter = {
					mid : treeNode.mid
				};
				$.post("menuitem/deleteById", parameter);
				var nodes = tree.zTree.transformToArray(treeNode.children);
				$.each(nodes,function(index,node){
					var parameter = {
						mid : node.mid
					};
					$.post("menuitem/deleteById", parameter);
				});
			}
		}
	},
	loadTree : function() {
		$.post("menuitem/getAll", null, function(data) {
			tree.zTree = $.fn.zTree.init($("#tree"), tree.setting, data);
		});
		$.post("menuitem/getMax", null, function(data) {
			tree.max = data;
		});
	}
};
$(document).ready(function() {
	tree.loadTree();
});

就这么多了，最后附上整个项目