学习 周 总结(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实现类,编写具体的方法;...
  • ertongzixingche
  • ertongzixingche
  • 2013年12月29日 15:01
  • 595

Mybatis学习总结二

1.传递pojo对象 Mybatis使用ognl表达式解析对象字段的值,如下例子: select * from user where id=#{id} and username lik...
  • u012730299
  • u012730299
  • 2016年05月20日 11:27
  • 423

阶段学习总结

阶段学习总结 从开始学习java到现在已经过了40多天过去了,同时也学习了java中非常重要的一部分就是面向对象的相关知识,面向对象也是java中较难的一部分,因为它是一种抽象的思想,在这一个阶段的...
  • LS1910831673
  • LS1910831673
  • 2016年12月05日 18:59
  • 468

周学习总结

周学习总结目录:第一个ACMer周,第一次没日没夜地刷水题,不知道为什么,睡眠明显减少了,倒不是晚上睡不着,而是早晨很早就起床,说白了,好像是没有安全感,不谦虚地说:稍微有一点危机感。学校的网络中心招...
  • xiaobo68688
  • xiaobo68688
  • 2010年05月20日 10:24
  • 493

开始自己的周记,学习总结

0608-0613 本周主要在公司重装了产品,将case测完了,才发现最开始发给intern的文档是多么的重要。 学习内容主要是Python,Python的两大优势:一是学习起来不难,二是解释性脚本语...
  • qq_18989901
  • qq_18989901
  • 2015年06月13日 22:11
  • 954

Android 开发学习小结(二)

一、activity的主要作用 1.用户和应用程序的交互接口类似于网站的展示层 2.一个Activity可以放多个控件,可以理解成一个控件的容器 二、创建一个Activity的要点 1.一个Ac...
  • cdy102688
  • cdy102688
  • 2015年02月26日 21:40
  • 248

Android 开发总结二

1.关于设备尺寸不同、分辨率不同等引起的界面变形问题: 问题:最近测试的时候发现在不同尺寸、不同分辨率的平板上,设计的Android界面显示效果不同,有些还完全变形了。 原因:经过检查程序,发现这...
  • changlei_shennan
  • changlei_shennan
  • 2015年03月25日 14:43
  • 345

spring学习总结(二)

spring IoC容器(控制反转) 1.使用依赖注入(DI)管理应用程序组件2.容器 BeanFactory容器(为依赖注入DI提供支持) ApplicationContext 容器3.Bea...
  • qq_28198893
  • qq_28198893
  • 2017年11月28日 14:20
  • 39

Javaweb学习总结(二)

servlet的生命周期: Servlet运行在Servlet容器中,其生命周期由容器来管理。 每一个自定义的Servlet都必须实现Servlet的接口,Servlet接口中定义了五个方法...
  • LL596214569
  • LL596214569
  • 2017年08月21日 14:35
  • 133

一周的总结—只有意识的自己的差距才能进步

由于上一个周总结没有写,在这里补充一下吧,这个周主要是在简保组做外协,主要的任务是检查检证物,这是一个很繁重的活,由于这个项目在测试期间工作没有落实好,以至于现在返工。这也给我了一个警告,以后再做类似...
  • frankzcy
  • frankzcy
  • 2010年04月25日 22:11
  • 485
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:学习 周 总结(2013、12、29)二
举报原因:
原因补充:

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