zTree复选框案例 封装版

一.配置树参数

//1.获取setting值
function getSetting(){
		var setting = {
			view: {
dblClickExpand: true,
				selectedMulti : true,//可以多选
				showLine: true
			},
			check: {
enable: true ,//显示复选框
chkStyle : "checkbox"
			},
			data: {
				key: {
title:"t"
				},
				simpleData: {
					enable: true,
					idKey: "id",
					pIdKey: "pId",
					rootPId: null
					}
				},
				callback: {
					onCheck: onCheck
				}
		  	};
		return setting;
}

二.初始化树(创建树)

//2.创建树
	function createTree(treeId,dL,dLSize){
		//获取树参数默认值
		var setting=getSetting();
		var zNodes=new Array();
		//设置根节点数据
		zNodes[0]={ id:'##',
pId:"-1", name:'物资类别', t:'物资类别',open:true};
		for(var i=0;i<dLSize;i++){//设置子节点数据
			zNodes[i+1]={
id:dL[i].classCode,
pId:dL[i].parentCode,
name:dL[i].className+"("+dL[i].classCode+")",
classId:dL[i].classId,
t:dL[i].className};
		}
		//1)创建zTree树
		$.fn.zTree.init($(treeId), setting, zNodes);
		//2)初始化已经被选中的物资类别
		checkMaterial();
	}

三.选中一开始被选中的(初始化一开始就选了的内容)

//3.初始化被选中的物资类别
	function checkMaterial(){
		var classCodes = $("#classCodes").val();//物资编码
		var datalist = classCodes.split("，");//将物资编码打散成数组
		//获取所有树节点
		var treeObj = $.fn.zTree.getZTreeObj("materialTree");
		if(datalist!='' &&datalist.length>0){
			var nodes=treeObj.getNodes();//获取所有子节点
			for(var i=0;i<datalist.length;i++){
				//通过id查找节点
				var node =
treeObj.getNodeByParam("classId",datalist[i],null);
				//选中该节点
				if(node!=null){//先判断节点是否为空
					//选中该节点
					treeObj.checkNode(node,true,true);
//获取该节点父节点
					var parent = node.getParentNode();
if(!parent.open){//如果父节点没有展开则展开父节点
	treeObj.expandNode(parent,true,true);
}
				}
			}
		}
	}

 

四.树的回调事件(保存选择的复选框内容)

//4.树的点击事件回调函数
function onCheck(event, treeId, treeNode){
	var classCodes = $("#classCodes").val();//物资编码
	var classNames = $("#classNames").val();//物资名字
	//alert("onCheck");
	//获取所有树节点
	var treeObj = $.fn.zTree.getZTreeObj("materialTree");
	if(treeNode.checked){//如果是选中节点
		if(treeNode.isParent){//如果选中的是父节点(有子节点的节点)
			//获取选中的父节点的所有子节点
			var childrenNodes = treeNode.children;
			for (var i = 0; i < childrenNodes.length; i++) {
				classCodes+="，"+childrenNodes[i].classId;
				classNames+="，"+childrenNodes[i].name;
}
		}else{//如果是子节点(无子节点的节点)
			classCodes += "，"+treeNode.classId;
			classNames += "，"+treeNode.name;
		}
	}else{//如果是取消选中
		if(treeNode.isParent){//如果取消的是父节点(有子节点的节点)
			//获取消的父节点的所有子节点
			var childrenNodes = treeNode.children;
			for (var i = 0; i < childrenNodes.length; i++) {
				var classCode="，"+childrenNodes[i].classId;
				var className="，"+childrenNodes[i].name;
				//删除取消的节点对应的数据
				classCodes=classCodes.replace(classCode, "");
				classNames=classNames.replace(className, "");
}
		}else{//如果是子节点(无子节点的节点)
			classCode = "，"+treeNode.classId;
			className = "，"+treeNode.name;
			//删除取消的节点对应的数据
			classCodes=classCodes.replace(classCode, "");
			classNames=classNames.replace(className, "");
		}
	}
	//保存选中的值(物资类别编码、物资类别名字)
	$("#classCodes").val(classCodes);
	$("#classNames").val(classNames);
}

五.保存所选内容

//5.保存所选物资类别
	function saveMaterial(inputName){
		//获取父页要修改input元素
		var $input=parent.$("input[name="+inputName+"]");
		//获取选中的物资类别名称
		var className=$("#classNames").val();
		var classCode=$("#classCodes").val();
		//截取掉多余的“，”
		var classNames=className.substring(1,className.length+1);
		//截取掉多余的“，”
		var classCodes=classCode.substring(1,classCode.length+1);
//修改所选的物资类别名字
$input.val(classNames);
//修改所选的物资类别编码
$input.attr("classCodes",classCodes);
$input.next().val(classCodes);
//关闭弹窗
parent.layer.closeAll();
	}

六.关闭弹窗

//6.关闭弹窗
	function closeMaterial(){
		parent.layer.closeAll();
	}