关于父窗口与子窗口传值的Demo

摘要：

本Demo案例为父窗口打开具有分页功能的子窗口并选择需要的值为id和id对应的值传给父窗口并以二维数组进行暂时存储，等选好之后，二维数组再把其中的元素以字符串形式分开存储在对应的input中。

在父窗口中的设置：

1、在HTML中，设置按钮及存放传值的INPUT

<div class="mT10">
	<input type="text" name="sjrxm2" readonly="readonly" class="input tableTextOver" size="35" id="sjrxm2" val"${sjrxm2}">
	<input type="hidden" name="sjrid2" id="sjrid2" readonly="readonly" value="${sjrid2}">   //这个为隐藏存储id的字符串集合
	<input type="button" value="选择学员" class="btn02" οnclick="findxyxx()">
	<input type="button" value="清除" class="btn02" οnclick="clearVal('sjrxm2','sjrid2');">  //清空存储值的方法，在这里并不解释
</div>

2、打开选择子窗口的js

function findxyxx(){
	commonJs.openWindow({url:"${ctx}/usercenter/information/information/recipient2.jhtml",width:800,height:700,title:"选择收信学员"});    //commonJs该插件为特效打开子窗口，也可以用window.open方法。
	initStr(0);           //该方法为二次打开子窗口时的二维数组初始化
}

3、设置父子窗口中调用传值方法（本案例中是可以选择学生或者职工的，由于两者差异不大，因此只用选择学生来写）

	<script>
	$(function (){     //在代码中type字段用来区别学生与职工，0为学生，0以外为职工。
		(                                            //二维数组的存在方式为：var str=[[id1],[value1]],[[id2],[value2]],[[id3],[value3]]
																				 
			function (){
				var xslist=[]; //学生
				var zglist=[]; //职工
				
				function indexOf(type,id){//根据id，找到数组对应索引，并返回。找不到则返回-1
					if(type==0){
						for(var i=0;i<xslist.length;i++){
							if(xslist[i][0]==id){   
								return i;
							}
						}
						return -1;
					}else{
						for(var i=0;i<zglist.length;i++){
							if(zglist[i][0]==id){
								return i;
							}
						}
						return -1;
					}
				}
				
				initStr=function(type){         //初始化xslist和zglist数组，用于二次打开子窗口时
					if(type==0){
						var idstr=new Array();     //取到之前存放的数据
						var id=$("#sjrid2").val();    
						var namestr=new Array();
						var name=$("#sjrxm2").val();
						
						if(id!=""&&id!=null){
							idstr=id.split(",");     //把字符串转换为数组
							namestr=name.split(",");
						}else{
							return false;
						}
						
						if(idstr.length>0){
							for(var i=0;i<idstr.length;i++){
								var Str=[idstr[i],namestr[i]];    //先把id和name组合为一维数组str
								xslist.push(Str);                 //把一维数组str放到一维数组xslist，即xslist成为二维数据
							}
						}		
					}else{
						var idstr=new Array();
						var id=$("#sjrid").val();
						var namestr=new Array();
						var name=$("#sjrxm").val();
						
						if(id!=""&&id!=null){
							idstr=id.split(",");
							namestr=name.split(",");
						}else{
							return false;
						}
						
						if(idstr.length>0){
							for(var i=0;i<idstr.length;i++){
								var Str=[idstr[i],namestr[i]];
								zglist.push(Str);
							}
						}	
					}
				}
				
				setTips=function(type,id,value){   //把传来的数据添加到二维数组中
					if(indexOf(type,id)!=(-1)){    //先判断传来的数据是否已存在
						return false;
					}
					var str=new Array();
					str=[id,value];
					if(type==0){
						var old=xslist.length;
						xslist.push(str);
						if(old>=xslist.length){    //根据xslist的长度判断添加是否成功
							return false;
						}else{
							return true;
						}
					}else{
						var old=zglist.length;						
						zglist.push(str);
						if(old>=zglist.length){
							return false;
						}else{
							return true;
						}
					}
				}
				
				delTip=function(type,id,value){    //删除对应元素
					var index=indexOf(type,id);    //找到数组索引
					var str=new Array();
					str=[id,value];
					
					if(index>-1){      
						if(type==0){
							var old=xslist.length;
							xslist.splice(index,1);    //用splice方法进行删除二维数据中的某一行数据。
							if(old>xslist.length){
								return false;
							}else{
								return true;
							}						
						}else{
							var old=zglist.length;
							zglist.splice(index, 1);
							if(old>zglist.length){
								return false;
							}else{
								return true;
							}
						}
					}
				}
				
				dealTips=function(type){       //当选完之后触发，进行二维数据分类并存入具体的Input中保存
					if(type==0){
						var number=xslist.length;
						if(number>0){
							var strid=new Array();     //存放id合集的数组
							var strname=new Array();    //存放name合集的数组
							for(var i=0;i<number;i++){
								strid.push(xslist[i][0]);
								strname.push(xslist[i][1]);
							}
							$("#sjrxm2").val(strname.toString());   //放到具体的Input中
							$("#sjrid2").val(strid.toString());	
						}
						xslist=[];
					}else{
						var number=zglist.length;
						if(number>0){
							var strid=new Array();
							var strname=new Array();
							for(var i=0;i<number;i++){
								strid.push(zglist[i][0]);
								strname.push(zglist[i][1]);
							}
							$("#sjrxm").val(strname.toString());
							$("#sjrid").val(strid.toString());
						}
						zglist=[];
					}
				}
			}
		)()
	});
	</script>	

在子窗口中的设置

1、设置复选框点击事件

<input type="checkbox" name="jid" id="record${item.id}" value="${item.id}" onClick="selectAllot(${item.id});"/>
<input type="hidden" id="recordName${item.id}" name="jxm" value="${item.xm}">

<input type="button" name="button2" οnclick="c();"	class="btn02 mT15" value="提交" />   

2、点击事件对应的js方法

	//选择人员
	function selectAllot(id){
		var name = $("#recordName"+id).val();
		var obj = $("#record"+id);
		var checked = obj.attr("checked");

		if(checked=="checked"){//勾选   
			if(parent.setTips(0,id,name)==false){ //调用父窗口的setTips方法
				obj.attr("checked",false);        //如何setTips失败，则被选中的状态为false,即不能选
			}
		}else{//取消选择
			parent.delTip(0,id,name);			   		
		}
	}

3、对选玩进行提交事件进行绑定

		function c(){   
			parent.dealTips(0);  //调用父窗口的dealTios方法，参数0为选择学生
			myclose();           //关闭子窗口
		}
		
		function myclose(){
			var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
			parent.layer.close(index); //再执行关闭   
		}

4、当二次选择的时候，初始化已经选好的项

	<script>
	//初始化
		function initSelected(){
			var allotIdList = parent.$("#sjrid2").val();  //获取父窗口中id为sjrid2的元素的值
			if(allotIdList!=""){
				var arr=new Array();
				arr=allotIdList.split(",");
				for(var i=0;i<arr.length;i++){
					var id="#record"+arr[i];    //根据id找到对应的复选框并加上被选中状态
					$(id).attr("checked",true);
				}
			}			
		}
		initSelected();    //加载时运行
	</script>