- 浏览: 171435 次
- 性别:
- 来自: 福州
文章分类
最新评论
-
mncc:
太好了!!!Mark一下!不过貌似那个冒泡的还少个右下角吧? ...
Google Maps 图标地址收藏 -
ivorytower:
去年5月捡了命回来,现在不评论那些豆腐渣工程……
汶川地震留给我们什么?单单建什么地震纪念馆是没有用的 -
lgx2351:
wtusmchen 写道blog写的不错啊,以后多过来学习:) ...
js学习笔记2-函数 -
wtusmchen:
blog写的不错啊,以后多过来学习:)
js学习笔记2-函数
大家可能很常用一个查询的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),在以后随着不断的总结再陆续总结出来。
发表评论
-
在一个定时器里频繁发ajax请求
2011-04-11 10:07 1732在一个定时器里频繁发ajax请求,最好设置一个全局变量,当请求 ... -
前台开发总结
2011-01-12 10:35 7691、如果在频繁地发送ajax请求,最好在前面的请求发送完成返回 ... -
TD中长串英文字母不能自动换行而汉字却可以自动换行
2010-12-23 10:06 1913例如:aaaaaaaaaaaaaaaaaaaaaaaaaaaa ... -
Google Maps 图标地址收藏
2010-11-27 10:46 2778Google Maps 图标 - ... -
js乱码
2010-05-30 16:08 01)在同一个工程下没有问题,可是如果跨工程的话,且引入的js有 ... -
ajax请求提供接口的讨论
2009-12-26 15:33 1028要提供一个查询某点周边的最近设施的功能给同事,在gis端的实现 ... -
ie8与ie6取form的讨论
2009-12-16 10:49 1368多frames下,在ie6下通过frames[i]为取得某个f ... -
把一个jsp分为两个div布局记录
2009-12-15 16:41 5585一个jsp页面想分成左右两块分开显示两块内容。这种效果很不错, ... -
js取整数四舍五入
2009-11-21 22:08 3383http://blog.csdn.net/Feiin/arch ... -
读“javascript权威指南”笔记(更新中。。。)
2009-11-14 13:00 0第一章: 第二章: 第三章: 第四章: 第五章: 第 ... -
grid拖动列头改变列宽
2009-10-21 17:19 1562grid中,当某一单元格的内容很多时,要能够拖动grid标题行 ... -
js常用功能-drag功能总结
2009-09-18 13:50 1193在做web开发中,拖动一个元素是很常见的功能,特别是对于浮动层 ... -
常用功能-tip相关知识总结
2009-09-18 08:48 1198在应用开中很常用的功能是tip,比如鼠标放在某个需要说明的元素 ... -
js学习笔记4-事件和事件处理
2009-09-16 22:18 9841. 总述: 本章将讲三种完全不同的不兼容的事件处理模型 ... -
构造结果集实现类似grid显示
2009-09-16 20:24 868在做应用开发中,最经常的操作是到后台数据库去获取数据,在前台用 ... -
grid里用右键来实现功能菜单
2009-09-15 20:22 1178在自定义grid中,如果一个grid的列很多,窗口无法显示这么 ... -
js学习笔记3-构造函数、类和原型
2009-09-06 16:18 26563. 构造函数、类和原型总述:对象是我们很熟悉的,常在程序中用 ... -
js学习笔记2-函数
2009-09-02 23:01 13782. 函数 2.1函数直接量函数直接量是用作表达式,而不是用作 ... -
下拉提示文本框
2009-08-24 18:46 1679文本框在当用户输入时,常常需要把相近的信息提示给用户,以方便用 ... -
js学习笔记1-对象和数组
2009-08-19 23:03 8411. 对象和数组 总述对象 ...
相关推荐
Echarts参数属性学习Gird演示案例:在同一个DOM中,使用gird同时创建折线图和柱图,可高效的利用数据,同时对API的开发和对接有事半功倍的效果。
mfc 写的GIRD 源码,有两个例题,一个是基于对话框的;一个是Doc/View
ext2.0动态加载grid的例子,内附完整源码!
selenium gird 资源part2
selenium gird 简介selenium gird 简介
exejs gird filter java action整合资料
selenium gird资源selenium gird资源part1
gird_layout.zip
一个很优秀的前台GIRD组件,速度快,体积小。最重要的,这个是免费的。:)
ext Gird 有滚动条功能 附带滚动条 重写原本EXT
Gird_Eye模块的Linux上位机,用qt开发,里面涉及到Linux串口通信编程
很多时候,我们需要显示在grid中的数据不是短短的几条或者几十条,而是成千上万条。如果让大量的数据一股脑全都显示在一个页面中,可以想象会造成什么样的用户体验。
分页和远程排序的设置是通俗易懂的,另外一些常用的自定义的参数我会在这篇贴子中说明一下。新论坛的界面(在建设中)就是一个分页和远程排序的好例子,而本文的代码均来自那个例子。 新方法和属性 利用...
在您的浏览器上创建Bootstrap Gird系统 在浏览器上创建Bootstrap Gird系统,轻松调整大小和拖放功能 支持语言:English
电子表格,用VC实现的,表格具有常用功能,用起来十分方便,有一点点像MS_OFFICE的风格
oracle11g+gird+asm+RAC 配置data guard
源码实现了ligerui中grid行颜色控制,列隐藏保存。
打印预览控件,包含VB源程序.打印预览控件Printer first Gird,包含VB源程序
可以通过下拉列表框选择每页的分页条数 主要用于动态选择分页表格每页显示记录的条数
CSS网格布局是一个二维的基于网格的布局系统, 其目的在于完全改变我们设计基于网络的用户界面的方式。CSS一直用来布局我们的网页, 但是他从来没有做过很好的工作, 最开始我们使用表格,然后 float , position 和 ...