`

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

ztree父节点展开、折叠 
阅读更多

当前实例也是官网上对应的父节点展开、折叠实例，个人测试学习，这里做备忘。

1、页面布局：

<body>
<div class="content_wrap">
	<div class="zTreeDemoBackground left">
		<ul id="treeDemo" class="ztree"></ul>
	</div>
	
	<a href="javascript:void(0);" id="expandAll">全部展开</a>&nbsp;&nbsp;&nbsp;&nbsp;
	<a href="javascript:void(0);" id="collapseAll">全部折叠</a>
	<br /><br />
	
	<a href="javascript:void(0);" id="expand">单个节点展开（其下有子节点的父节点不展开）</a>&nbsp;&nbsp;&nbsp;&nbsp;
	<a href="javascript:void(0);" id="collapse">单个节点折叠</a>&nbsp;&nbsp;&nbsp;&nbsp;
	<a href="javascript:void(0);" id="toggle">单个节点展开/折叠</a>
	<br /><br />
	
	<a href="javascript:void(0);" id="expandSon">全部节点展开（其下的所有子节点都展开）</a>&nbsp;&nbsp;&nbsp;&nbsp;
	<a href="javascript:void(0);" id="collapseSon">全部节点折叠</a>&nbsp;&nbsp;&nbsp;&nbsp;
	<a href="javascript:void(0);" id="toggleSon">全部节点展开/折叠</a>
</div>
</body>

 

2、JS：

<script type="text/javascript">
var setting = {
	data: {
		simpleData: {
			enable: true,//开启简单模式
			idKey:"id",
			pIdKey:"pId",
			rootPId:0
		}
	},
	callback:{
		beforeClick:beforeClick,//点击之前调用的方法
		//用于捕获父节点折叠之前的事件回调函数，并且根据返回值确定是否允许折叠操作
		beforeCollapse:beforeCollapse,
		//用于捕获父节点展开之前的事件回调函数，并且根据返回值确定是否允许展开操作
		beforeExpand:beforeExpand
	},
	view:{
		selectedMulti:true//允许同时选中多个父节点
	}
	
};
var zNodes=[
    		{"id":1,"pId":0,"name":"河北",open:false,isParent:true},
    		{"id":2,"pId":1,"name":"石家庄",open:false},
    		{"id":21,"pId":2,"name":"化皮镇"},
    		{"id":22,"pId":2,"name":"承安镇"},
    		{"id":23,"pId":2,"name":"正莫镇"},

    		{"id":3,"pId":1,"name":"邯郸"},
    		{"id":4,"pId":1,"name":"保定"},
    		{"id":5,"pId":1,"name":"沧州"},

    		{"id":6,"pId":0,"name":"河南",open:false,isParent:true},
    		{"id":7,"pId":6,"name":"郑州"},
    		{"id":8,"pId":6,"name":"开封"},
    		{"id":9,"pId":6,"name":"洛阳"},
    		{"id":10,"pId":6,"name":"南阳"},

    		{"id":11,"pId":0,"name":"山东",open:false,isParent:true},
    		{"id":12,"pId":11,"name":"济南"},
    		{"id":13,"pId":11,"name":"济宁"},
    		{"id":14,"pId":11,"name":"淄博"},
    		{"id":15,"pId":11,"name":"德州"},

    		{"id":16,"pId":0,"name":"山西",open:false,isParent:true},
    		{"id":17,"pId":16,"name":"太原"},
    		{"id":18,"pId":16,"name":"大同"},
    		{"id":19,"pId":16,"name":"朔州"},
    		{"id":20,"pId":16,"name":"阳泉"}
    		];
/**
*@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:节点被点击之后的选中操作类型 1-普通选中 2-追加选中 0-取消选中
*@return true/false true： 选中当前节点 false：不选中
*/
function beforeClick(treeId,treeNode,clickFlag){
	if(!treeNode.isParent){
		alert("当前节点不是父级节点!");
		return false;
	}else{
		return true;
	}
}

/**
*点击展开的父节点时触发的事件：判断当前节点是否处于折叠状态，若是则不予处理，否则进行折叠
*@param treeId:对应zTree的treeId
*@param treeNode:要折叠的父节点JSON数据对象
*@return true/false:true-进行折叠， false-不折叠
*/
function beforeCollapse(treeId,treeNode){
	//alert(treeNode.collapse);
	//alert(treeNode.collapse !== false);
	return (treeNode.collapse !== false);//treeNode.collapse alert出来是undefined
}

/**
*点击折叠的父节点时触发的事件：判断当前节点是否处于展开状态，则进行折叠，否则不予处理
*@param treeId:对应zTree的treeId
*@param treeNode:要展开的父节点JSON数据对象
*@return true/false:true-进行展开， false-不展开
*/
function beforeExpand(treeId,treeNode){
//alert(treeNode.expand);
//alert(treeNode.expand !== false);
return (treeNode.expand!== false);//treeNode.expand alert出来是undefined
}
/**
*根据类型展开或折叠节点
*@param event:标准的JS Event对象
**/
function expandOrCollapseNodes(event){
	var zTree = $.fn.zTree.getZTreeObj("treeDemo");//获取树对象
	var type = event.data.type;//获取类型
	var nodes = zTree.getSelectedNodes();//获取选中的节点
	if(type.indexOf("All")<0 && nodes.length==0){//说明不是展开或折叠全部，且没有选中节点
		alert("请先选择一个父节点!");
		return false;
	}
	
	switch(type){
	case "expandAll"://展开全部
		zTree.expandAll(true);//expandAll：展开/折叠全部节点 true：展开全部节点 false：折叠全部节点
		break;
	case "collapseAll"://折叠全部
		zTree.expandAll(false);
		break;
	case "expand"://展开单个父节点（不包括下面的子节点，即使子字节还有子节点）
		//expandNode()：展开/折叠 指定的节点 
		//treeNode:需要展开/折叠的节点数据 
		//enpandFlag:true/false,true-展开节点 false-折叠节点 ,省略此参数则根据对此节点的展开状态进行toggle切换
		//sonSign:true/false,是否对其子孙节点进行expandFlag相同的操作，true-影响此节点及其子孙节点 false-只影响此节点，省略此参数等同于false
		//focus:true/false,true:展开或折叠之后，选定节点聚焦 false：展开或折叠之后，选定节点不聚焦
		//callbackFlag:true/false,true表示执行此方法时出发回调函数 false则不触发
		for(var i=0;i<nodes.length;i++){
			zTree.expandNode(nodes[i],true,false,false,false);
		}
		break;
	case "collapse"://折叠单个父节点（不折叠下面的子节点）
		for(var i=0;i<nodes.length;i++){
			zTree.expandNode(nodes[i],false,false,false,false);
		}
		break;
	case "toggle"://展开/折叠单个父节点（不包括子节点）
		for(var i=0;i<nodes.length;i++){
			zTree.expandNode(nodes[i],null,false,false,false);
		}
		break;
	case "expandSon"://展开选定父节点下的所有子节点
		for(var i=0;i<nodes.length;i++){
			zTree.expandNode(nodes[i],true,true,false,false);
		}
		break;
	case "collapseSon"://折叠选定父节点下的所有子节点
		for(var i=0;i<nodes.length;i++){
			zTree.expandNode(nodes[i],false,true,false,false);
		}
		break;
	case "toggleSon"://展开/折叠选定父节点下的所有子节点
		for(var i=0;i<nodes.length;i++){
			zTree.expandNode(nodes[i],null,true,false,false);
		}
		break;
	}
}
		
$(document).ready(function(){
	$.fn.zTree.init($("#treeDemo"), setting,zNodes);
	$("#expandAll").bind("click",{type:"expandAll"},expandOrCollapseNodes);
	$("#collapseAll").bind("click",{type:"collapseAll"},expandOrCollapseNodes);
	
	$("#expand").bind("click",{type:"expand"},expandOrCollapseNodes);
	$("#collapse").bind("click",{type:"collapse"},expandOrCollapseNodes);
	$("#toggle").bind("click",{type:"toggle"},expandOrCollapseNodes);

	$("#expandSon").bind("click",{type:"expandSon"},expandOrCollapseNodes);
	$("#collapseSon").bind("click",{type:"collapseSon"},expandOrCollapseNodes);
	$("#toggleSon").bind("click",{type:"toggleSon"},expandOrCollapseNodes);
});
</script>

 

 3、个人总结：

a、对父节点的展开折叠操作主要是两个方法：expandAll和expandNode。

b、expandAll用来展开/折叠所有节点，其参数设置为true时全部展开，false全部折叠。

c、expandNode用来展开/折叠指定的节点，通过各个参数来设置：

param1：treeNode:需要展开/折叠的节点数据
param2：enpandFlag:true/false,true-展开节点 false-折叠节点 ,省略此参数则根据对此节点的展开状态进行toggle切换
param3：sonSign:true/false,是否对其子孙节点进行expandFlag相同的操作，true-影响此节点及其子孙节点 false-只影响此节点，省略此参数等同于false
param4：focus:true/false,true:展开或折叠之后，选定节点聚焦 false：展开或折叠之后，选定节点不聚焦
param5：callbackFlag:true/false,true表示执行此方法时出发回调函数 false则不触发

 

 

分享到：
| Z-tree实例（三）——callback与重新加载、 ...
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics