这两天帮老师做了树的增加、删除、修改的功能，查阅了不少资料，在这里分享下一些心得体会。
在这里我选用的是Spring MVC3.2.3 + Mybatis3.2.2 + zTree3.5.14
数据库用的是SQLServer 2008（老师让用SQLServer，郁闷.....）
数据库名：tree，目前就一张表：menuitem
表很简单目前就三个字段(mid int primary,pid int,name varchar)
初始一个值为(1,0,‘地块管理’)
<%@ 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负责前台到后台的数据的交换
下面是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='添加' οnfοcus='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(); });
就这么多了，最后附上整个项目
相关资源：SpringMVC jdbcTemplate easyUI ztree(增删改查)
