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