学习 周 总结(2013、12、29)二

原创 2013年12月29日 15:42:21

二、对于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' 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异步处理的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百度贴吧的例子,讲的很好,继续学习中~~

相关文章推荐

学习 周 总结(2013、12、29)一

-、mySQL数据库的连接,1.先写个DBUtil连接数据库工具类,注意这里没有关闭连接con的方法,效率会更高些;2.然后是DAO的抽象类,编写所需的方法;3.DaoImpl实现类,编写具体的方法;...

校园二手交易平台项目总结 ‎2013‎年‎12‎月‎23‎日,‏‎5:57:29

校园二手交易平台项目总结 组员:唐方舟、刘雪英、李文婷、葛梦娇 按安排,我们于2013年9月23日负责校园二手交易平台项目。2个月来,在组员的合作和支持下,项目进行的比较顺利。于2013年12月12号...

http://www.cnblogs.com/xudong-bupt/archive/2013/12/29/3483059.html

Linux C Socket编程原理及简单实例 部分转自:http://goodcandle.cnblogs.com/archive/2005/12/10/294652.aspx 1.  ...

连连看 算法 2013-12-29

连连看算法:判断两个点是否能经过最多两次转折连通 连通情况有: 1.两点相邻    直接返回true 2.两点不相邻    进行横向搜索和纵向搜索    a. 横向搜索        求出两点分别从左...

linux设备驱动归纳总结(三):7.异步通知fasync (2010-12-29 15:56)

CU首页 ┊ fh265>>博客 微博 相册 个人中心 好友 消息 [退出] ┊ 随便看看   博文 博主 相册  投票 活动 发博文 公告...
  • fh400
  • fh400
  • 2011年11月02日 17:12
  • 552

AIX学习之NMON工具详解(2013-07-29)

一、概述   监控,在检查系统问题或优化系统性能工作上是一个不可缺少的部分。通过操作系统监控工具监视操作系统资源的使用情况,间接地反映了各服务器程序的运行情况。根据运行结果分析可以帮助我们快速定...
  • saraul
  • saraul
  • 2013年12月22日 11:06
  • 3118

QT学习笔记(2016/12/29)

QT对话框 一、对话框简介    1.QT中使用QDialog类实现对话框。 2.parent指针:①为NULL则对话框会作为一个顶层窗口,否则作为其父组件的子对话框(默认出现位置为parent的  ...

2013-6-29-本周设计模式: Blocked Entity

本周NAV设计模式: Blocked Entity 设计模式在多年来一直在各种编程语言和业务领域中被提及。Microsoft NAV 开发者也在使用可重复的方案去解决ERP软件中共同的问题,甚...

chrome代码总结 --- 发文于2013-12-11

一. 启动:   1.WinMain:在chrome exe工程的chrome_exe_main.cc中,      MainDllLoader* loader = MakeMainDllLoad...

ie 5.5代码总结 --- 发文于2013-12-13

html->解析(词法,句法分析)为dom tree ->解析为Render Tree->遍历渲染树绘制每一个节点,遍历一个显示一个。 窗口初始化 1.生成CDocument:IHTM...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:学习 周 总结(2013、12、29)二
举报原因:
原因补充:

(最多只允许输入30个字)