gird分页时form与url参数的探讨

最新推荐文章于 2021-06-15 23:48:56 发布

withLove2351

最新推荐文章于 2021-06-15 23:48:56 发布

阅读量177

点赞数

分类专栏： javascript&ajax&dhtml 文章标签： JSP prototype

javascript&ajax&dhtml 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

大家可能很常用一个查询的jsp页面，这个jsp页面很常见的布局是上面一个form，放置一些查询条件；下面一个grid的form,放置查询结果gird。
这里主要征对的是grid分页时所涉及到的相应的form与参数的探讨。
当gird分页时，要把这个document的所有（包括查询条件的form和显示grid的form）的元素作为参数进行传递，同时取出grid这个form的url值，放在一个obj里。如下：

function getFormInfo(event){
	var formInfo = {url:"",pars:""};
	for (var i=0,formNum = document.forms.length;i<formNum;i++){
		if(document.forms[i].contains(Event.element(event))){
			formInfo.url = document.forms[i].action;
		}
		formInfo.pars += "&&" + encodeURI(Form.serialize(document.forms[i])); 
	}
	return formInfo;
}

1、在上述代码中通过调用form.contains(srcElement)来得到点击元素的form，从而得到这个form的url。
2、上述代码通过遍历document的所有的form，通过encodeURI(Form.serialize(document.forms[i]))把form的元素编码后作为参数传递。

3、上述代码最后返回的是一个obj，这个obj存放了gird from的url和这个jsp页面所包含的所有编码后的参数。

参数传递完，后台获取到了参数就可以根据得到的参数值进行查询分页了：）

如果有较为复杂的需求：
第一种情况：比如需要点击grid的某个单元格的值，open出一个页面，在open出的页面(我们暂把它叫作第二个页面，opner的页面我们叫它第一个页面)里显示具体的grid列表。如在第一个页面的gird的单元格为故障次数为5的值，点击这个5后，要能open出一个显示具体的5条记录的gird的页面。如果要在open出的页面的gird要正确的分页，必须得到opner的页面（第一个页面）的查询条件的那个form的参数值。
上述代码getFormInfo()方法显示不能满足要求，因为它是只在自己所处的页面的document去取元素的值，并没有考虑它所opener的页面的document。所以我们需要把第一个页面的查询form的元素考虑上去。

第二种情况：还有一种情况是，我们“点击这个5后，要能open出一个显示具体的5条记录的gird的页面”，用了encodeURI(Form.serialize(forms[0]))的方法把我们所需要的form的所有元素作为参数传递了。但是点击5后需要传的参数是equip_type_no（设备类型）这个参数，可能query这个form里也有equip_type_no这个元素，而我们单独要传的equip_type_no参数是在grid的某个单元格得到的，它写在encodeURI(Form.serialize(forms[0]))的后面，这时候后台只取前面的equip_type_no参数的值，而忽略了后面的我们真正关心的equip_type_no的参数值。

要解决多个参数名相同而取我们关心的那个值对，可以先删除search字符串里所有的值对名为equip_type_no的值，然后再追加(append)我们的要传的参数值。

解决上面两个问题的代码如下：

首先可以在打开的页面（第二个页面）里写个隐藏域，值包含要传递到后台的那个openr的form的index值和要append的参数值对：

<input type="hidden" size="200" name="APPENDPARSOBJ" value="{openerForm:0,appendPars:'BRANCH_CENTER_NO=<%=request.getParameter("BRANCH_CENTER_NO")%>&EQUIP_TYPE_NO=<%=request.getParameter("EQUIP_TYPE_NO")%>&MODEL=<%=request.getParameter("MODEL")%>'}"></input>

注意以上代码：

1、这个hidden的value是一个对象的值，第一个参数openerForm是指openr的jsp要传的是index为什么的form的元素参数；第二个参数appendPars是指要追加的值对。在后台得到这个hidden后用eval()来得到对象的值。

2、上述的hidden不能放在form里面，为什么呢？因为我们所有的form通过form.serialize()来传递了，这个hidden的值是个obj写法的字符串，如果通过form.serialize()来传递后，后台解析后取得的值可能会出错。所以，因为我们可以用$("")来到它的值，不需要用form.serialize()来传递。所以，不需要放在form内。

然后：

function getFormInfo(event){
	var formInfo = {url:"",pars:""};
	for (var i=0,formNum = document.forms.length;i<formNum;i++){
		if(document.forms[i].contains(Event.element(event))){
			formInfo.url = document.forms[i].action;
		}
		formInfo.pars += "&&" + encodeURI(Form.serialize(document.forms[i])); 
	}
	//以下为新增补充
	if($("APPENDPARSOBJ")){
		var appendParsOjb = eval('(' + $("APPENDPARSOBJ").value + ')'); 
		if(!isNaN(appendParsOjb.openerForm)){
			if(self.opener){
				var formi = parseInt(appendParsOjb.openerForm);
				formInfo.pars += "&&" + encodeURI(Form.serialize(self.opener.document.forms[formi]));
			}
		}
		if(appendParsOjb.appendPars!=""){
			var delArray = urlParamMgr.setNameToArray(appendParsOjb.appendPars);
			for(var i=0;i<delArray.length;i++){
				formInfo.pars = urlParamMgr.delSpecialArgs(delArray[i],formInfo.pars);
			}
			formInfo.pars += "&&" + appendParsOjb.appendPars;
		}
	}
	return formInfo;
}

其中，UrlParamMgr类的代码如下（可以认真理解）：

	/*************************************************************************************/
	/*
	/*					url参数管理类
	/*
	/*************************************************************************************/
function UrlParamMgr(){}
UrlParamMgr.prototype = {
	//返回请求的URL的search的值对
	getArgs:function(){
		var args = new Object();
		var query = location.search.substring(1);
		var pairs = query.split("&");
		for(var i=0;i<pairs.length;i++){
			var pos = pairs[i].indexOf("=");
			if(pos==-1) continue;
			var argname = pairs[i].substring(0,pos);
			var value = pairs[i].substring(pos+1);
			value = decodeURIComponent(value);
			args[argname] = value;
		}
		return args;
	},
	//把给定的值对给删除掉，传入要删除掉的值对名，返回删除掉后的search值
	delSpecialArgs:function(delName,orgQuery){
		var result;
		var query = orgQuery||location.search.substring(1);
		var pairs = query.split("&");
		var nameArray = new Array();
		while(urlParamMgr.getSearchName(pairs).join("&").indexOf(delName)!=-1){
			for(var i=0;i<pairs.length;i++){
				var pos = pairs[i].indexOf("=");
				if(pos==-1) continue;
				var argname = pairs[i].substring(0,pos);
				if(delName==argname){
					pairs.splice(i,1);
				}
			}
		}
		result = pairs.join("&");
		return result;
	},
	//把search的name放在一个数组里
	setNameToArray:function(orgQuery){
		var result = new Array();
		var query = orgQuery||location.search.substring(1);
		var pairs = query.split("&");
		for(var i=0;i<pairs.length;i++){
			var pos = pairs[i].indexOf("=");
			if(pos==-1) continue;
			var argname = pairs[i].substring(0,pos);
			result.push(argname);
		}
		return result;
	},
	//传入search数组，得到这个数组的所有name
	getSearchName:function(searchArray){
		var result = new Array();
		if(!arrayUserCommMgr.isArray(searchArray)){
			_alert("请确认传入的是数组！");
			return;
		}
		for(var i=0;i<searchArray.length;i++){
			var pos = searchArray[i].indexOf("=");
			if(pos==-1) continue;
			var argname = searchArray[i].substring(0,pos);
			result.push(argname);
		}
		return result;
	}
}
var urlParamMgr = new UrlParamMgr();

以上代码主要要明白的是：

1、用array.push(value)往数组中追加元素值。

2、array.splice()后返回的数组值会发生变化，所以在delSpecialArgs()方法的while循环条件里需要把pairs的search的name值取出来：

urlParamMgr.getSearchName(pairs).join("&").indexOf(delName)!=-1

同时注意，为什么是只取Name值，原来没有只取值对的name值，而把整个值对的值都取出来才去判断是否indexOf(delName)为-1，如下（原来的代码）：

pairs.join("&").indexOf(delName)!=-1

谁知进入了死循环，因为刚才有一个值对的value为这个delName（挺特殊的），而不是值对的name为delName，所以进入了死循环。

3、getArgs()在实际应用中很常用，比如一个js要取一个url的某个值对的值时，很常用。

另外，ArrayUserCommMgr类的代码也给出：

function ArrayUserCommMgr(){
	
}
ArrayUserCommMgr.prototype={
	delOneArrayEle:function(arrayObj,delEle){
		for(var i=0;i<arrayObj.length;i++){
			if(arrayObj[i]==delEle) arrayObj.splice(i,1);
		}
		return arrayObj;
	},
	judgeDoubleEle:function(arrayObj,delEle){
		var isDouble=false;
		for(var i=0;i<arrayObj.length;i++){
			if(arrayObj[i]==delEle) {
				isDouble = true;
				break;
			}
		}
		return isDouble;
	},
	//多维数组，得到乘法表
	getMultiplicationTable:function(){
		var table = new Array(10);               // 10 rows of the table
		for(var i = 0; i < table.length; i++)
		    table[i] = new Array(10);            // Each row has 10 columns
		for(var row = 0; row < table.length; row++) {
		    for(col = 0; col < table[row].length; col++) {
		        table[row][col] = row*col;
		    }
		}
	},
	isArray:function(a){
		var result = false;
		if((a instanceof Array)||
			(a && typeof a == "object" && "length" in a)){
			result = true;
		}
		return result;
	}
}
var arrayUserCommMgr = new ArrayUserCommMgr();

上述ArrayUserCommMgr类代码虽然很简单，但是比如isArray()就很常用，如你写一个函数对传入的参数一定要是数组有严格的要求的话，就可以使用，它会使你写出的代码更严谨更优美。

至此，上述话题大概讲述完了，关于js的一些公共的类（基于prototype），在以后随着不断的总结再陆续总结出来。