zTree-jQuery树插件使用小记

zTree-jQuery树插件使用小记

1、首先，zTree中文api网址http://www.treejs.cn/v3/api.php 点击打开链接

2、使用zTree需要引入的js:
jquery-1.9.1.min.js (jQuery核心基础库)
jquery.ztree.core.js (zTree核心基础库)
jquery.ztree.excheck.js (多选功能)
jquery.ztree.exedit.js (编辑功能)

3、使用zTree的后台json数据格式:

[

{

"A":"a",

"B":2,

"C":[

{"A":"a","B":2}

]

},

{

"A":"a",

"B":2,

"C":[

{"A":"a","B":2}

]

}

]

4、jsp页面

<ul id="menu" class="ztree" >
</ul>

<a id="addParent" title="增加父节点" >增加父节点</a>
<a id="addLeaf" title="增加叶子节点" >增加子节点</a>

<ul>标签负责zTree的树形展示

<a>标签负责添加节点

5、zTree的简单参数配置

/**
 * ztree的参数配置
 */
var setting = {
	check : {
		//复选框
		enable : true,
		//勾选框类型
		chkStyle : "checkbox",
	},
	edit : {
		//设置ztree是否处于编辑状态
		enable : true,
		//是否显示删除按钮
		showRemoveBtn : true,
		//是否显示编辑按钮
		showRenameBtn : true,
		//鼠标移到按钮上显示的提示信息
		removeTitle: "删除节点",
		renameTitle: "更新节点",
	},
	data : {
		simpleData : {
			enable : true
		}
	},
	callback : {
		//节点点击
		onClick : zTreeOnClick,
		//checkbox点击
		onCheck : zTreeOnCheck,
		//增加父节点
		addLeaf : addLeaf,
		//增加子节点
		addParent : addParent,
		//移除事件
		beforeRemove : beforeRemove,
		//修改事件
		onRename : onRename,
	},
}

6、zTree增删改回调方法的实现:

节点点击和复选框选中回调方法,把对象的id和level存入cookie.

function zTreeOnClick(event, treeId, treeNode) {
};
function zTreeOnCheck(event, treeId, treeNode) {
	$.cookie("id", treeNode.id);
	$.cookie("level",treeNode.level);
};

知识点:cookie的生命周期:

setMaxAge();cookie的过期时间,如果不设置过期时间,则表示这个cookie生命周期为浏览器会话时间,只要关闭浏览器窗口,cookie就消失了.

添加操作:添加父节点和子节点.

/**
 * 添加父节点
 */
function addParent() {
	var name = $("#name").val();
	var url = $("#url").val();
	var icon = $("#icon").val();
	window.location.href = "/timeSheet/menu/addParentNode?name=" + name
			+ "&url=" + url + "&icon=" + icon;
}
/**
 * 添加子节点
 */
function addLeaf() {
	var name = $("#name").val();
	var url = $("#url").val();
	var icon = $("#icon").val();
	var parentId = $.cookie("id");
	var level = $.cookie("level");
	if(parentId != null && level != null){
		window.location.href = "/timeSheet/menu/addNodeByParent?name=" + name
		+ "&url=" + url + "&icon=" + icon + "&parentId=" + parentId+"&level="+level;
	}else{
		alert("请先选择一个节点");
	}
}

删除操作:删除一级和二级目录.

/**
 * 删除节点
 */
function beforeRemove(treeId,treeNode){
	var nodeId = treeNode.id;
	var level = treeNode.level;
	if(level == 0){//一级菜单
		var oneLevel = confirm("你确定要删除该节点以及该节点下的所有节点吗?");
		if(oneLevel){
			$.post('/timeSheet/menu/delNode?nodeId='+nodeId,function(data){
			});
		}else{
			return false;
		}
	}else{//二级菜单
		var twoLevel = confirm("你确定要删除该节点吗?");
		if(twoLevel){
			$.post('/timeSheet/menu/delNode?nodeId='+nodeId,function(data){
			});
		}else{
			return false;
		}
	}
}

更新操作:更新节点名称.

/**
 * 更新节点
 */
function onRename(event,treeId,treeNode){
	var nodeId = treeNode.id;
	var nodeName = treeNode.name;
	$.post("/timeSheet/menu/updateNode?nodeId="+nodeId+"&name="+nodeName,function(){
		//取消节点的选中状态
		ztree = $.fn.zTree.getZTreeObj("menu");
		ztree.cancelSelectedNode();
		alert("更新节点名称成功!");
	});
}

7、页面加载,初始化zTree.

$(function() {
	$.ajax({
		url : webContex + 'menu/all',
		dataType : "json",
		type : "post",
		success : function(data) {
			treeNode = data;
			$.fn.zTree.init($("#menu"), setting, data).expandAll(true);
			$("#addLeaf").bind("click", addLeaf);
			$("#addParent").bind("click", addParent);
		}
	});
});

$.fn.zTree.init($("#menu"), setting, data).expandAll(true);绑定zTree,树形结构默认展开.
$("#addLeaf").bind("click", addLeaf);绑定添加父节点事件.
$("#addParent").bind("click", addParent);绑定添加子节点事件.