学习 周 总结（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 为根节点的id
	data : {
		simpleData : {
			enable : true,
			idKey : "id",
			pIdKey : "pId",
			rootPId : 0
		},
		// 显示节点名称时对应的json数据里面的属性
		key : {
			name : "name"
		}
	},

	view : {
		addHoverDom : addHoverDom,
		removeHoverDom : removeHoverDom,
		selectedMulti : false
	},
	// 可以修改zTree
	edit : {
		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' οnfοcus='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异步处理的url
function getTempUrl(treeId, treeNode) {
	return urlStr;
}

var key;

// 加载树信息方法
function inntTreeNodes() {
	zTreeObj = $.fn.zTree.init($("#permission_tree"), setting, zNodes);// 实例化后直接返回树对象
}

// 对树结构进行增删改的异步处理ajax//返回节点在数据库的id
function 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百度贴吧的例子，讲的很好，继续学习中~~