DWR学习札记(七)-完

八.util.js的功能：主要操作js对象DWRUtil来操作通过js调用java对象后返回的数据，填充到HTML页面等作用。
???
???**功能：util.js包含了一些工具函数来帮助你用javascript数据(例如从服务器返回的数据)来更新你的web页面
??????你可以在DWR以外使用它，因为它不依赖于DWR的其他部分。
??????
???**功能概要：getValue[s]()和setValue[s]()可以操作大部分HTML元素除了table，list和image。
??????getText()可以操作select和list。
??????要修改table可以用addRows()和removeAllRows()。
??????要修改列表(select列表和ul,ol列表)可以用addOptions()和removeAllOptions()。
??????
???(1)$()函数(它是合法的Javascript名字)?是从Protoype偷来的命名方式。
??????
??????**说明：$?相当与js中的?document.getElementById，即$()?<==>?document.getElementById(),
????????传入HTML标签的id值即可找到对应的DOM节点对象，
????????注意这和JQuery有点区别，JQuery是通过$("#id"),传入的值要加"#"才能找到对应id的HTML标签对象，
????????而DWR的$()则不需要，这与ProtoType库手法一样
??????
??????**注意：如果传递给它多个参数，它会返回找到的元素的数组。所有非String类型的参数会被原封不动的返回。
???
???(2)addOptions和removeAllOptions方法：DWR的一个常遇到的任务就是根据选项填充选择列表<select>
???
???????例子：如果你希望在你更新了select以后，它仍然保持原来的选择，可以像下面这样
????????
????????var?sel?=?DWRUtil.getValue(id);
????????DWRUtil.removeAllOptions(id);
????????DWRUtil.addOptions(id,?...);
????????DWRUtil.setValue(id,?sel);
????????//如果想加一个初始"Please?select..."?选项那么你可以直接加入下面的语句：
????????DWRUtil.addOptions(id,?\["Please?select?..."]);
????????
??????**DWRUtil.addOptions有6种模式:
????????
????????<1>数组：DWRUtil.addOptions(selectId,?array)会创建一堆option，每个option的文字和值都是数组元素中的值。
????????
????????<2>对象数组(指定text):
????????????DWRUtil.addOptions(selectId,data,prop)用每个数组元素创造一个option，
????????????option的值和文字都是在prop中指定的对象的属性。
????????
????????<3>对象数组(指定text和value值):
????????????DWRUtil.addOptions(selectId,array,valueprop,textprop)用每个数组元素创造一个option，
????????????option的值是对象的valueprop属性，option的文字是对象的textprop属性。
????????
????????<4>对象:?DWRUtil.addOptions(selectId,map,reverse)用每个属性创建一个option,
???????????对象属性名用来作为option的值，对象属性值用来作为option的文字，这听上去有些不对。
???????????但是事实上却是正确的方式。如果reverse参数被设置为true，那么对象属性值用来作为选项的值。
????????
????????<5>对象的Map:?DWRUtil.addOptions(selectId,map,valueprop,textprop)用map中的每一个对象创建一个option，
?????????????用对象的valueprop属性做为option的值，用对象的textprop属性做为option的文字。
?????????????
????????<6>ol?或?ul?列表:?
????????????DWRUtil.addOptions(ulId,array)用数组中的元素创建一堆li元素，
????????????他们的innerHTML是数组元素中的值。这种模式可以用来创建ul和ol列表。
???
???(3)addRows和removeAllRows方法(用得时候查看文档)：
????????????DWR通过这两个函数来帮操作<table>，函数的第一个参数可以是table、tbody、thead、tfoot的id。
????????????一般来说<table>最好使用tbody，因为这样可以保持你的header和footer行不变，
????????????并且可以防止Internet?Explorer的bug。
????????????
????????<1>DWRUtil.removeAllRows()方法：通过id删除table中所有行。id指的是table元素的id(最好是tbody元素的id)
??????????
??????????**格式：DWRUtil.removeAllRows(id);
??????????
????????<2>DWRUtil.addRows()方法：先看格式、参数，然后看功能说明
??????????
??????????**格式：DWRUtil.addRows(id,?array,?cellfuncs,?[options]);
??????????
??????????**参数说明：
????????????id:?table元素的id(最好是tbody元素的id)
????????????
????????????array:?数组(可以是对象)，做为更新表格的数据。?
????????????
????????????cellfuncs:?函数数组，从传递过来的行数据中提取单元格数据。
????????????
????????????options:?一个包含选项的对象(见下面)?
???????????????选项包括:?
???????????????
????????????????rowCreator:?一个用来创建行的函数(例如，你希望的tr和css).?
???????????????????默认是返回一个document.createElement("tr")?
???????????????????
????????????????cellCreator:?一个用来创建单元格的函数(例如，用th代替td).?
????????????????????默认返回一个document.createElement("td")
????????????????????
??????????**说明：向指定id的table元素添加行。它使用数组中的每一个元素在table中创建一行。
????????????然后用cellfuncs数组中的每个函数创建一个列。
????????????单元格是依次用cellfunc根据每个数组中的元素创建出来的。
???
???(4)getText方法：getText(id)和getValue(id)很相似。是为select列表设计的，你可能需要取得显示的文字，而不是当前选项的值。
???
???(5)getValue方法：DWRUtil.getValue(id)是setValue()对应的"读版本"。
????????它可以从HTML元素中取出其中的值，而你不用管这个元素是select列表还是一个div
?????
?????**使用范围：这个函数能操作大多数HTML元素包括select(取出当前选项的值而不是文字)、input元素(包括textarea)、div和span。
???
???(6)getValues方法：getValues()和getValue()非常相似，除了输入的是包含name/value对的javascript对象。
?????????name是HTML元素的ID，value会被更改为这些ID对象元素的内容。这个函数不会返回对象，它只更改传递给它的值。
?????????也可以传入一个HTML元素(一个DOM对象或者id字符串)，然后从它生成一个reply对象。
???
???(7)onReturn方法：可以通过调用DWRUtil.onReturn()方法，来调用Form中表单提交的方法。
?????
?????例子：?当点击普通文本框的时候会触发调用时间submitFunction()函数，这和按钮做同样的事就是提交表单。
???????<input?type="text"?onkeypress="DWRUtil.onReturn(event,submitFunction)"/>
???????<input?type="button"?onclick="submitFunction()"/>
???
???(8)selectRange方法(了解)：选择一个输入框中的一定范围的文字。?
???????????你可能为了实现类似"Google?suggest"类型的功能而需要选择输入框中的一定范围的文字，
???????????但是不同浏览器间选择的模型不一样。这DWRUtil函数可以帮你实现。
????????
?????**格式：DWRUtil.selectRange(ele,?start,?end)
???
???(9)setValue方法：DWRUtil.setValue(id,?value)根据第一个参数中指定的id找到相应元素，
????????并根据第二个参数改变其中的值。?
????????这个函数能操作大多数HTML元素包括select、input元素(包括textarea)、div和span。
???
???<10>setValues方法：setValues()和setValue()非常相似，除了输入的是包含name/value对的javascript对象。
??????????name是HTML元素的ID，value是你想要设置给相应的元素的值。
??????????例如：类似于传入对象{?name:"lijie",?age:"23"}这样包含有值对的对象，其中属性名为Id
???
???<11>toDescriptiveString方法(了解)：
????????DWRUtil.toDescriptiveString()函数比默认的toString()更好。
????????第一个参数是要调试的对象，第二个参数是可选的，用来指定内容深入的层次：
??????
??????**参数值：
????????0:?单行调试?
????????1:?多行调试，但不深入到子对象。?
????????2:?多行调试，深入到第二层子对象?
????????以此类推。一般调试到第二级是最佳的。?
????????还有第三个参数，定义初始缩进。这个函数不应该被用于调式程序之外，因为以后可能会有变化。
???
???<12>useLoadingMessage方法(了解)：
????????????这个方法将来可能被废弃，因为这个实现实在太专断了。
????????????你必须在页面加载以后调用这个方法(例如，不要在onload()事件触发之前调用)，
????????????因为它要创建一个隐藏的div来容纳消息。
????????????
??????**使用方式：可以自定义这个方法然后使用自己定义的这个方法。
?????????最简单的做法时在onload事件中调用DWRUtil.useLoadingMessage
?????????
??????例子：
????????A.调用
?????????<head>
??????????<script>
???????????function?init()?{
????????????DWRUtil.useLoadingMessage();?
???????????}?
??????????</script>
?????????</head>
?????????<body?onload="init();">
?????????</body>
????????
????????B.实现自己的useLoadingMessage方法：
????????????下面这些是这个函数的代码，它对于你要实现自己的加载消息很有用。
????????????这个函数的主要内容是动态创建一个div(id是disabledZone)来容纳消息。
????????????重要的代码是当远程调用时使它显示和隐藏：
????????????
?????????DWREngine.setPreHook(function()?{
??????????$('disabledZone').style.visibility?=?'visible';?}
?????????);?
?????????DWREngine.setPostHook(function()?{?
??????????$('disabledZone').style.visibility?=?'hidden';?}
?????????);?
?????????//This?is?fairly?simple?and?makes?it?quite?easy?to?implement?your?own?"loading"?message.
?????????function?useLoadingMessage(message)?{?
??????????var?loadingMessage;
??????????if?(message)?loadingMessage?=?message;?
??????????else?loadingMessage?=?"Loading";?
??????????DWREngine.setPreHook(function()?{
???????????var?disabledZone?=?$('disabledZone');?
???????????if?(!disabledZone)?{?
????????????disabledZone?=?document.createElement('div');
????????????disabledZone.setAttribute('id',?'disabledZone');
????????????disabledZone.style.position?=?"absolute";
????????????disabledZone.style.zIndex?=?"1000";?
????????????disabledZone.style.left?=?"0px";?
????????????disabledZone.style.top?=?"0px";?
????????????disabledZone.style.width?=?"100%";
????????????disabledZone.style.height?=?"100%";?
????????????document.body.appendChild(disabledZone);
????????????var?messageZone?=?document.createElement('div');
????????????messageZone.setAttribute('id',?'messageZone');?
????????????messageZone.style.position?=?"absolute";?
????????????messageZone.style.top?=?"0px";?
????????????messageZone.style.right?=?"0px";?
????????????messageZone.style.background?=?"red";?
????????????messageZone.style.color?=?"white";?
????????????messageZone.style.fontFamily?=?"Arial,Helvetica,sans-serif";?
????????????messageZone.style.padding?=?"4px";?
????????????disabledZone.appendChild(messageZone);?
????????????var?text?=?document.createTextNode(loadingMessage);?
????????????messageZone.appendChild(text);?
???????????}
???????????else?{?
????????????$('messageZone').innerHTML?=?loadingMessage;?
????????????disabledZone.style.visibility?=?'visible';?}?
???????????}
??????????);?
??????????DWREngine.setPostHook(function()?{?
???????????$('disabledZone').style.visibility?=?'hidden';?}
??????????);?
?????????}
?????????//下面的做法能简单的使用有加载消息图片：
?????????function?useLoadingImage(imageSrc)?{
??????????var?loadingImage;?
??????????if?(imageSrc)?loadingImage?=?imageSrc;?
??????????else?loadingImage?=?"ajax-loader.gif";?
??????????DWREngine.setPreHook(function()?{
???????????var?disabledImageZone?=?$('disabledImageZone');?
???????????if?(!disabledImageZone)?{?
????????????disabledImageZone?=?document.createElement('div');
????????????disabledImageZone.setAttribute('id',?'disabledImageZone');
????????????disabledImageZone.style.position?=?"absolute";
????????????disabledImageZone.style.zIndex?=?"1000";
????????????disabledImageZone.style.left?=?"0px";?
????????????disabledImageZone.style.top?=?"0px";?
????????????disabledImageZone.style.width?=?"100%";?
????????????disabledImageZone.style.height?=?"100%";
????????????var?imageZone?=?document.createElement('img');
????????????imageZone.setAttribute('id','imageZone');?
????????????imageZone.setAttribute('src',imageSrc);
????????????imageZone.style.position?=?"absolute";?
????????????imageZone.style.top?=?"0px";?
????????????imageZone.style.right?=?"0px";?
????????????disabledImageZone.appendChild(imageZone);?
????????????document.body.appendChild(disabledImageZone);?
???????????}?
???????????else?{?
????????????$('imageZone').src?=?imageSrc;?
????????????disabledImageZone.style.visibility?=?'visible';?
???????????}?
??????????});?
??????????DWREngine.setPostHook(function()?{
???????????$('disabledImageZone').style.visibility?=?'hidden';?
??????????});
?????????}
?????????//然后你就可以这样使用:useLoadingImage("images/loader.gif");
???
???<13>Submission?box功能(了解)：
?????????h1?非util.js中的功能?这里有一些功能不适合加入到DWRUtil中。
?????????它们在解决一些特殊问题上是很有用，但是他们还不够通用以适用任何场合
?????????
??????例子：修补浏览器事件，如果你创建了一个DOM元素，然后用addAttribute在这个元素上创建了一个事件，
?????????那么他们不能被正常的触发。你可以使用下面的脚本来遍历一个DOM树，并重新为他们绑定事件，
?????????这样他们就能正常的触发了。
?????????
????????//把'click'改成你希望的事件
????????DWREngine._fixExplorerEvents?=?function(obj)?{
?????????for?(var?i?=?0;?i?<?obj.childNodes.length;?i++)?{
??????????var?childObj?=?obj.childNodes?;?
??????????if?(childObj.nodeValue?==?null)?{?
???????????var?onclickHandler?=?childObj.getAttribute('onclick');
???????????if?(onclickHandler?!=?null)?{?childObj.removeAttribute('onclick');
????????????//?If?using?prototype:?
????????????//?Event.observe(childObj,?'click',?new?Function(onclickHandler));?
????????????//?Otherwise?(but?watch?out?for?memory?leaks):?
????????????if?(element.attachEvent)?{?
?????????????element.attachEvent("onclick",?onclickHandler);?
????????????}?
????????????else?{?
?????????????element.addEventListener("click",?onclickHandler,?useCapture);
????????????}?
???????????}?
???????????DWREngine._fixExplorerEvents(childObj);?
??????????}?
?????????}
????????}

本文来自CSDN博客：http://blog.csdn.net/lijie1051/archive/2009/12/18/5034992.aspx