学习 周 总结（2013、12、29）二

二、对于jquery插件ztree的学习，实现了通过ajax，实现树的动态加载，节点添加、编辑、删除和单个拖动的功能。

直接贴代码：

js代码部分，文件名myjs.js:

var zNodes; // 树节点，json格式，异步加载可设置为null或[]var zTreeObj; // 树对象var className = 'dark';var urlStr = './servlet/CategoryFindAllAction'; // zTree树加载异步处理的url地址var urlStrOption = '';// 对于树节点的增删改和移动操作ajax异步处理的url地址var params = '';// ajax异步处理需要传入到服务端的数据// 树结构载入时的属性var setting = {async : {enable : true,url : getTempUrl},callback : {// 回调函数，在这里可做一些回调处理onAsyncSuccess : zTreeOnAsyncSuccess,beforeEditName : beforeEditName,beforeRemove : beforeRemove,beforeRename : beforeRename,onRename : onRename,onRemove : onRemove,beforeDrag : beforeDrag,onDrop : onDrop},// 获取数据时节点Id和父id对应json的属性名,rootPId 为根节点的iddata : {simpleData : {enable : true,idKey : "id",pIdKey : "pId",rootPId : 0},// 显示节点名称时对应的json数据里面的属性key : {name : "name"}},view : {addHoverDom : addHoverDom,removeHoverDom : removeHoverDom,selectedMulti : false},// 可以修改zTreeedit : {enable : true,editNameSelectAll : true,showRenameBtn : true,// 允许拖拽drag : {autoExpandTrigger : true,prev : true,inner : true,next : true}}};// 拖拽功能实现函数function beforeDrag(treeId, treeNodes) {// curDragNodes = treeNodes;return true;}function onDrop(event, treeId, treeNodes, targetNode, moveType) {// 操作数据库，保存拖拽信息//alert("移动节点--" + treeNodes[0].name + "成功！");//alert("移动节点--" + targetNode.tId + "成功！");urlStrOption = './servlet/CategoryDragOneAction';var params = "Category.name=" + treeNodes[0].name + "&Category.id="+ treeNodes[0].id + "&Category.parent_id=" +targetNode.tId;zTreeOption(urlStrOption, params);}// 修改节点之前触发的函数function beforeEditName(treeId, treeNode) {className = (className === "dark" ? "" : "dark");var zTree = $.fn.zTree.getZTreeObj("permission_tree");zTree.selectNode(treeNode);return confirm("确认进入 节点-- " + treeNode.name + " 的编辑状态吗？");}// 删除节点之前触发的函数function beforeRemove(treeId, treeNode) {className = (className === "dark" ? "" : "dark");var zTree = $.fn.zTree.getZTreeObj("permission_tree");zTree.selectNode(treeNode);return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");}// 用于捕获删除节点之后的事件回调函数。// 如果用户设置了 beforeRemove 回调函数，并返回 false，将无法触发 onRemove 事件回调函数。function onRemove(e, treeId, treeNode) {// 操作数据库，删除相应节点并返回到本页面alert("删除节点--" + treeNode.name + "成功！");urlStrOption = './servlet/CategoryDeleteOneAction';var params = "Category.name=" + treeNode.name + "&Category.id="+ treeNode.id + "&Category.parent_id=" + treeNode.pId;zTreeOption(urlStrOption, params);}// 用于捕获节点编辑名称结束（Input 失去焦点 或 按下 Enter// 键）之后，更新节点名称数据之前的事件回调函数，并且根据返回值确定是否允许更改名称的操作function beforeRename(treeId, treeNode, newName) {className = (className === "dark" ? "" : "dark");var zTree = $.fn.zTree.getZTreeObj("permission_tree");if (newName.length == 0) {alert("节点名称不能为空.");return false;} else {if (confirm("确认保存 节点 -- " + newName + " 吗？")) {alert("保存成功");return true;} else {;zTree.selectNode(treeNode);return false;}}}function onRename(e, treeId, treeNode) {// 操作数据库，进行节点重命名urlStrOption = './servlet/CategoryUpdateAction';var params = "Category.name=" + treeNode.name + "&Category.id="+ treeNode.id + "&Category.parent_id=" + treeNode.pId;zTreeOption(urlStrOption, params);}// 异步调用时，返回查询所有节点信息的 请求 路径function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {zNodes = treeNode;};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() {urlStrOption = './servlet/CategoryInsertAction';var params = "Category.name=" + ("new node" + (newCount++))+ "&Category.parent_id=" + treeNode.id;zTreeOption(urlStrOption, params);var zTree = $.fn.zTree.getZTreeObj("permission_tree");zTree.addNodes(treeNode, {id : (100 + newCount),pId : treeNode.id,name : "new node" + (newCount++)});return false;});};function removeHoverDom(treeId, treeNode) {$("#addBtn_" + treeNode.tId).unbind().remove();};// 处理zTree异步处理的urlfunction getTempUrl(treeId, treeNode) {return urlStr;}var key;// 加载树信息方法function inntTreeNodes() {zTreeObj = $.fn.zTree.init($("#permission_tree"), setting, zNodes);// 实例化后直接返回树对象}// 对树结构进行增删改的异步处理ajax//返回节点在数据库的idfunction zTreeOption(doUrl, backParams) {var tempdata;$.ajax({async : false,url : doUrl,// 请求地址type : 'post',dataType : 'json',data : backParams,// 发送给服务器的参数error : function() {// 请求失败处理函数// alert('请求失败');},success : function(data) { // 请求成功后处理函数。tempdata = data;}});return tempdata;}// 提前加载页面树信息$(document).ready(inntTreeNodes);

然后是jsp代码，文件名categorytree.jsp:

<%@ page language="java" import="java.util.*" 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"><html><head><base href="<%=basePath%>"><title>ztreeContent page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><link href="js/plugins/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="js/plugins/jquery-1.6.1.js"></script><script type="text/javascript" src="js/plugins/ztree/js/jquery.ztree.all-3.5.js"></script><script type="text/javascript" src="js/app/category/js/myjs.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></head><body><ul id="permission_tree" class="ztree"style="width:230px; overflow:auto;"></ul><br></body><script language="javascript"></script></html>

最后，，，相关资源下载：

a：jquery下载，http://jquery.com/  或者百度jquery官网

b：ztree下载，http://www.ztree.me/v3/main.php#_zTreeInfo 或百度ztree官网，

最好把api和demo都下下来

c：然后我还参考了ztree百度贴吧的例子，讲的很好，继续学习中~~