`

Z-tree实例(五)——复选框

阅读更多

官网实例,个人研究测试,以备用。

1、页面布局:

<BODY>
<div class="content_wrap">
	<div class="zTreeDemoBackground left">
		<ul id="treeDemo" class="ztree"></ul>
	</div>
	<p>父子关联关系:<br/>
	被勾选时:
	<input type="checkbox" id="py" checked />关联父
	<input type="checkbox" id="sy" checked />关联子<br/>
	
	取消勾选时:
	<input type="checkbox" id="pn" checked />关联父
	<input type="checkbox" id="sn"  checked />关联子

	<br/><br/>

	<input type="checkbox" onclick="enableOrDisNodes(1);">禁止/解禁选中节点</input><br />
	<input type="checkbox" onclick="enableOrDisNodes(2);">勾选/取消勾选选中的节点</input><br />
	<input type="checkbox" onclick="getCheckNodes();">获取勾选/未勾选的节点数量</input><br />
	<input type="checkbox" onclick="getSelectedCheckNodes(this);">获取选定节点中勾选/未勾选的节点数量</input><br />
	</div>
</div>
</BODY>
2、 用到JS:
<SCRIPT type="text/javascript">
var setting = {
	check: {
		enable: true,//设置zTree的节点上是否显示checkbox/radio框,默认值: false
		chkboxType: { "Y": "ps", "N": "ps" }
	},
	data: {
		simpleData: {
			enable: true//使用简单模式
		}
	},
	key:{
	checked:"checked"//zTree 节点数据中保存check状态的属性名称。默认值:"checked"
	},
	view:{
		selectedMulti:true//允许选多个
	}
};

var zNodes=[
//checked:节点的checkBox/radio的勾选状态,默认为false
//nocheck:设置节点是否隐藏checkbox/radio,true 表示此节点不显示 checkbox / radio,不影响勾选的关联关系,不影响父节点的半选状态。false 表示节点具有正常的勾选功能
//chkDisabled:设置节点的 checkbox / radio 是否禁用,默认值false
{"id":1,"pId":0,"name":"河北",open:true,checked:true},//checked:true,默认勾选
{"id":2,"pId":1,"name":"石家庄",open:true,checked:false},//checked:false,默认不勾选
{"id":21,"pId":2,"name":"化皮镇",nocheck:true},//nocheck:true,不显示checkbox
{"id":22,"pId":2,"name":"承安镇",nocheck:false},//nocheck:false,显示checkbox
{"id":23,"pId":2,"name":"正莫镇",chkDisabled:true},//禁用checkbox

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

{"id":6,"pId":0,"name":"河南",open:true,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":"阳泉"}
]
/**
*设置勾选checkbox对于父子节点的关联关系
*/
function setCheck() {
	var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
	py = $("#py").attr("checked")? "p":"",
	sy = $("#sy").attr("checked")? "s":"",
	pn = $("#pn").attr("checked")? "p":"",
	sn = $("#sn").attr("checked")? "s":"",
	type = { "Y":py + sy, "N":pn + sn};
	zTree.setting.check.chkboxType = type;
}

/*
setChkDisabled():禁用或解禁某个节点的checkbox/radio
@param treeNode:需要禁用或解禁checkbox/radio的节点数据
@param disabled:禁用/解禁 true:禁用 false:解禁省略此参数,等同于disabled=false,即解禁,不影响treeNOde.nochecked=true的节点(checkbox/radio不显示的节点)
@param inheritParent:全部父节点是否进行同样的操作,true表示影响父节点 false表示不影响
@param inheritChildren 全部子节点是否进行同样的操作,true表示影响子节点 false表示不影响
*/

/*
checkNode():勾选或取消勾选单个节点
@param treeNode:需要勾选或取消勾选的节点数据
@param checked:true/false,勾选/取消勾选,省略此参数,则根据对此节点的勾选状态进行 toggle 切换不影响 treeNode.nochecked = true 的节点。
@param checkTypeFlag:true/false,是否按照setting.check.chkboxType属性进行父子节点的勾选联动操作,true进行联动,false 只修改此节点勾选状态,无任何勾选联动操作
@param callbackFlag:true/false,是否触发回调函数,true 表示执行此方法时触发beforeCheck&onCheck事件回调函数,false:不触发回调函数
*/

/**
*禁止或解禁选中节点
*@param flag:1-禁用/解禁 2-勾选/取消勾选
*/
function enableOrDisNodes(flag){
	var treeObj = $.fn.zTree.getZTreeObj("treeDemo");//获取树对象
	var nodes = treeObj.getSelectedNodes();//获取选中的节点(这个选中并不是勾选复选框,而是点击节点,选中时节点有背景色,可以按住ctrl同时选多个)
	var status=null;//状态
	if(nodes.length>0){//说明有节点选中
		if(flag==1){//禁用/解禁
			for (var i=0; i<nodes.length; i++) {
				status = nodes[i].chkDisabled;//获取禁用状态
				status=(!status);//取反,若当前节点禁用则解禁,若不禁用则禁用
				treeObj.setChkDisabled(nodes[i], status,true,true);
			}
		}else{//勾选/取消勾选
			for (var i=0; i<nodes.length; i++) {
				status = nodes[i].checked;//获取勾选状态
				status=(!status);//取反,若当前节点被勾选,则取消勾选,否则勾选
				treeObj.checkNode(nodes[i],status,true);
				//treeObj.checkNode(nodes[i],'',true);//忽略第二个参数,自动采用toggle进行切换
			}	
		}
	}else{
		alert("请先选中节点!");
		return false;
	}
}
/**
*点击时获取勾选/未勾选的节点数量
*/
function getCheckNodes(obj){
	var treeObj = $.fn.zTree.getZTreeObj("treeDemo");//获取树对象
	var checkNodes=null;
	var count = 0;
	var count2 = 0;
	//getCheckedNodes:获取当前树中输入框被勾选或未勾选的节点集合,true:被勾选的集合 false:未勾选的集合
	checkNodes= treeObj.getCheckedNodes(true);//勾选的数量
	count = checkNodes.length;
	count2= (treeObj.getCheckedNodes(false)).length;//未勾选的数量
	alert("整棵树中被勾选的节点有"+count+"个\n"+"没被勾选的节点有"+count2+"个");
	return false;
}

/**
*点击时获取选定节点的勾选/未勾选节点数量
*chkboxType:勾选checkbox对于父子节点的关联关系,默认值:{ "Y": "ps", "N": "ps" }
*Y属性定义 checkbox 被勾选后的情况;N属性定义 checkbox 取消勾选后的情况;
*"p" 表示操作会影响父级节点;"s" 表示操作会影响子级节点。请注意大小写,不要改变
*/
function getSelectedCheckNodes(obj){
	var treeObj = $.fn.zTree.getZTreeObj("treeDemo");//获取树对象
	var nodes = treeObj.getSelectedNodes();//选定节点
	var checked=null;
	var count = 0;
	if(nodes.length>0){
		for(var i=0;i<nodes.length;i++){
			checked=nodes[i].checked;//获取勾选属性
			if(checked==true){//选中节点
				count++;//自增1
			}
		}
		alert("选中节点:"+nodes.length+"个\n"+
			  "被勾选:"+count+"个\n"+
			  "没被勾选:"+(nodes.length-count)+"个");
		return false;
		
	}else{
		alert("请先选中节点!");
		$(obj)[0].checked=false;//取消勾选状态
		return false;
	}
}

$(document).ready(function(){
	$.fn.zTree.init($("#treeDemo"), setting, zNodes);
	setCheck();
	$("#py").bind("change", setCheck);
	$("#sy").bind("change", setCheck);
	$("#pn").bind("change", setCheck);
	$("#sn").bind("change", setCheck);
});
</SCRIPT>
3、 说明:

发现ztree当中使用checkbox并非form表单中的<input type='checkbox'/>而是用样式来定义的:

<span treenode_check="" class="button chk checkbox_false_full" id="treeDemo_19_check"></span>

样式class中的button使用有复选框的背景图片:zTreeStandard.png。正因如此,在获取选中节点时获取的并不是勾选了复选框的节点,而是点击文字有背景色的节点,它可以按住ctrl同时选多个。

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics