Z-tree实例（三）——callback与重新加载、追加

wjiaoling136

浏览: 958069 次
性别:
来自: 北京

最近访客更多访客>>

747017186

chajinglong

1017401036

温开水

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

z-tree

官网上的“用 zTree 方法异步加载节点数据”例子不好使，我就自己研究了一下，这里做个记录。

1、页面布局（需要引入的JS文件，css文件就省了）：

<body>
<div class="content_wrap">
	<div class="zTreeDemoBackground left">
		<ul id="treeDemo" class="ztree"></ul>
	</div>
	<a href="javascript:void(0);" id="refreshNOde">重新加载</a>&nbsp;&nbsp;&nbsp;&nbsp;
	<a href="javascript:void(0);" id="refreshNodeSilent">悄悄地重新加载</a>
	<br />
	<br />
	
	<a href="javascript:void(0);" id="addNode">追加</a>&nbsp;&nbsp;&nbsp;&nbsp;
	<a href="javascript:void(0);" id="addNodeSilent">悄悄地追加</a>
</div>
</body>

2、JS：

<script type="text/javascript">
var setting = {
		async: {
		enable: true,
		url:"area!async.action",
		type:"post",
		autoParam:["id=id"],
		//otherParam:{"otherParam":""},
		contentType:"application/x-www-form-urlencoded",
		dataType:"text",
		dataFilter: filter
	},
	view: {
		selectedMulti: true//允许同时选中多个节点
	},
	data: {
		simpleData: {
			enable: true,//开启简单模式
			idKey:"id",
			pIdKey:"pId",
			rootPId:0
		}
	},
 	callback:{
 		//beforeClick：用于捕获单击节点之前的事件回调函数，并且根据返回值确定是否允许单击操作，默认值为null
 		beforeClick: beforeClick,
 		//beforeAsync:用于捕获异步加载之前的事件回调函数，zTree 根据返回值确定是否允许进行异步加载，默认值为null
 		beforeAsync:beforeAsync,
 		//用于捕获异步加载出现异常错误的事件回调函数
 		onAsyncError:onAsyncError,
 		//用于捕获异步加载正常结束的事件回调函数
 		onAsyncSuccess:onAsyncSuccess
 		//用于捕获节点被点击的事件回调函数
 		//onClick:onclick//(注意大小写，若onClick写成了onclick那么点击时将没有任何反应)
 	}
};

/**
*@param treeId:对应zTree的treeId,便于用户操控
*@param parentNode:进行异步加载的父节点 JSON 数据对象
*@param childNodes:异步加载获取到的数据转换后的 Array(JSON) / JSON / String 数据对象
*/
function filter(treeId, parentNode, childNodes) {
	if (!childNodes) return null;
	for (var i=0, l=childNodes.length; i<l; i++) {
		childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
	}
	return childNodes;
}

/**
*点击节点时判断当前节点是否为根节点，若不是根节点，弹出提示并退出
*@param treeId:对应zTree的 treeId
*@param treeNode:被单击的节点 JSON 数据对象
*@param clickFlag:节点被点击后的选中操作类型
*@return 返回值是 true/false如果返回 false，zTree 将不会选中节点，也无法触发 onClick 事件回调函数
**/
function beforeClick(treeId,treeNode,clickFlag){
	//若不是父级节点（isParent与treeNodes中的设置无关，只要当前节点有子级即便不设置isParent=true，treeNode.isParent也会是true）
	if(!treeNode.isParent){
		alert("当前是子节点，不能操作!")
		return false;
	}
	return true;
}

/**
*点击节点进行加载时判断是否为根节点，若不是根节点，则不进行加载
*@param treeId:对应zTree的treeId
*@param treeNode:进行异步加载的父节点 JSON 数据对象针对根进行异步加载时，treeNode = null
*@return true/false,如果返回 false，zTree将不进行异步加载，也无法触发 onAsyncSuccess/onAsyncError 事件回调函数
*/
function beforeAsync(treeId,treeNode){
	if(!treeNode.isParent){//不是父节点
		alert("当前节点不是父节点，无需加载！");
		return false;
	}else{
		alert("当前节点是父节点，可以加载！");
		return true;
	}
}

/**
*当异步加载出现问题时，调用该方法alert出异常信息
*@param event:标准的JS event对象
*@param treeId:对应zTree的treeId
*@param treeNode:进行异步加载的父节点 JSON 数据对象针对根进行异步加载时，treeNode = null
*@param XMLHttpRequest:标准的XMLHttpRequest对象
*@param status:请求状态：success，error
*@param errorThrown:只有当异常发生时才会被传递
**/
function onAsyncError(event,treeId,treeNode,XMLHttpRequest,status,errorThrown){
	alert("加载失败，失败原因："+XMLHttpRequest);
}

/**
*异步加载正常结束时调用该方法
*@param event:标准的JS event对象
*@param treeId:对应zTree的treeId
*@param treeNode:进行异步加载的父节点 JSON 数据对象针对根进行异步加载时，treeNode = null
*@pram msg:异步获取的节点数据字符串，主要便于用户调试使用。实际数据类型会受 setting.async.dataType 的设置影响
*/
function onAsyncSuccess(event,treeId,treeNode,msg){
	alert(msg);
}

/**
*点击节点时调用该方法
*@param event:标准的JS Event对象
*@param treeId:对应zTree的 treeId
*@param treeNode:被单击的节点 JSON 数据对象
*@param clickFlag:节点被点击后的选中操作类型
**/
function onclick(event,treeId,treeNode,clickFlag){
	alert("id:"+treeNode.id+" name:"+treeNode.name+" clickFlag:"+clickFlag);
}

/**
*刷新节点
*@param event:标准的JS Event对象
*/
function refreshNode(event){
	var zTree = $.fn.zTree.getZTreeObj("treeDemo");//获取tree对象
	var type = event.data.type;//类型
	var silent = event.data.silent;
	var nodes = zTree.getSelectedNodes();//获取选中的节点对象
	if(nodes.length==0){//说明没有选中节点
		alert("请选择一个父节点！");
		return false;
	}
	//逐个处理选中节点
	for(var i=0;i<nodes.length;i++){
		zTree.reAsyncChildNodes(nodes[i], type, silent);//异步加载选定节点的子节点
		if (!silent){//
			//选中指定节点：
			//treeeNode表示需要被选中的节点 
			//addFlag=true,表示追加选中，会出现多点同时被选中的情况
			//addFlag = false 表示单独选中，原先被选中的节点会被取消选中状态
			zTree.selectNode(nodes[i],true);
		}
	}
}

/**
*强行异步加载父节点的子节点,已经加载过的父节点可反复使用此方法重新加载,需要通过ztree对象使用该方法
*@param parentNode：指定需要异步加载的父节点 JSON数据
（1、parentNode = null 时，相当于从根节点 Root 进行异步加载
  2、parentNode.isParent = false 时，不进行异步加载）
*@param reloadType：eloadType = "refresh" 表示清空后重新加载。reloadType != "refresh" 时，表示追加子节点处理。
*@param isSilent:设定异步加载后是否自动展开父节点。isSilent = true 时，不展开父节点，其他值或缺省状态都自动展开
*/
function reAsyncChildNodes(parentNode, reloadType, isSilent){
}

$(document).ready(function(){
	var treeNodes =${treeStr};
	if(treeNodes!=null && treeNodes!=''){
		$.fn.zTree.init($("#treeDemo"), setting,treeNodes);
		//绑定事件
		$("#refreshNOde").bind("click", {type:"refresh", silent:false}, refreshNode);
		$("#refreshNodeSilent").bind("click", {type:"refresh", silent:true}, refreshNode);
		$("#addNode").bind("click", {type:"add", silent:false}, refreshNode);
		$("#addNodeSilent").bind("click", {type:"add", silent:true}, refreshNode);
	}
});

</script>

3、个人记录：

a、悄悄地重新加载跟异步加载的区别：异步加载点击父节点时会出现一个不停转动的“正在加载”的图标，悄悄加载时不会出现图标，且打开子节点就像子节点最开始就已经加载出来了似的。

b、重新加载和悄悄地重新加载：点重新加载时，自动加载选中父节点下的子节点且全部展开。悄悄地重新加载，就是自动加载选中父节点下的子节点且不展开。

c、追加与悄悄地追加：追加与悄悄地追加，效果与重新加载两个是相同的，所不同的是：点击重新加载时会自动重新加载子节点，点击追加时会先判断选定父节点下是否有子节点，若没有则自动加载子节点，若有则将加载出来的子节点追加在父节点之后，依次类推。总而言之：每点击依次追加就会从后台重新请求依次并将加载出来的子节点追加在父节点之后。

分享到：

Z-tree实例（四）——父节点展开、折叠 | 小积累（二）

2015-05-08 17:25
浏览 12728
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Z-tree实例（三）——callback与重新加载、追加

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Z-tree实例（三）——callback与重新加载、追加

评论

发表评论

相关推荐

Z-tree实例（六）——连接线、图标、字体样式

Z-tree实例（五）——复选框

Z-tree实例（四）——父节点展开、折叠

z-tree实例（二）——异步加载

Z-tree实例（一）——简单实例

最近访客更多访客>>