DWR util.js工具包的使用

原文

目录列表：

  1. $()
  2. DWRUtil.getText(id)
  3. DWRUtil.getValue(id)
  4. DWRUtil.setValue(id,value)
  5. DWRUtil.getValues()
  6. DWRUtil.setValues()
  7. DWRUtil.addOptions and DWRUtil.removeAllOptions
  8. DWRUtil.addRows and DWRUtil.removeAllRows
  9. DWRUtil.onReturn
  10. DWRUtil.toDescriptiveString
  11. DWRUtil.useLoadingMessage
  12. 修补浏览器事件

util.js包含了一些工具函数来帮助你用javascript数据(例如从服务器返回的数据)来更新你的web页面。

你可以在DWR以外使用它，因为它不依赖于DWR的其他部分。

4个基本的操作页面的函数：getValue[s]()和setValue[s]()可以操作大部分HTML元素除了table，list和image。getText()可以操作select list。

要修改table可以用addRows()和removeAllRows()。要修改列表(select列表和ul,ol列表)可以用addOptions()和removeAllOptions()。

还有一些其他功能不是DWRUtil的一部分。但它们也很有用，它们可以用来解决一些小问题，但是它们不是对于所有任都通用的。

1、$()
 $() 函数(它是合法的Javascript名字) 是从Protoype偷来的主意。大略上的讲： $ = document.getElementById。 因为在Ajax程序中，你会需要写很多这样的语句，所以使用 $() 会更简洁。
通过指定的id来查找当前HTML文档中的元素，如果传递给它多个参数，它会返回找到的元素的数组。所有非String类型的参数会被原封不动的返回。这个函数的灵感来至于prototype库，但是它可以在更多的浏览器上运行。
从技术角度来讲他在IE5.0中是不能使用的，因为它使用了Array.push，尽管如此通常它只是用来同engine.js一起工作。如果你不想要engine.js并且在IE5.0中使用，那么你最好为Array.push找个替代品。

2、DWRUtil.getText(id)
getText(id)和getValue(id)很相似。它是为select列表设计的。你可能需要取得显示的文字，而不是当前选项的值。
例子：getahead.ltd.uk/dwr/browser/util/gettext

3、DWRUtil.getValue(id)
DWRUtil.getValue(id)是 setValue()对应的"读版本"。它可以从HTML元素中取出其中的值，而你不用管这个元素是select列表还是一个div。
这个函数能操作大多数HTML元素包括select(获取当前选项的值而不是文字)、input元素(包括textarea)、div和span。

4、DWRUtil.setValue(id,value)
 DWRUtil.setValue(id,value)根据第一个参数中指定的id找到相应元素，并根据第二个参数改变其中的值。
这个函数能操作大多数HTML元素包括select(设置当前选项的值而不是文字)、input元素(包括textarea)、div和span。

5、DWRUtil.getValues()
getValues()和getValue()非常相似，除了输入的是包含name/value对的javascript对象。name是HTML元素的ID，value会被更改为这些ID对象元素的内容。这个函数不会返回对象，它只更改传递给它的值。

【基于Form的getValues()】
从DWR1.1开始getValues()可以传入一个HTML元素(一个DOM对象或者id字符串)，然后从它生成一个reply对象。例子：getahead.ltd.uk/dwr/browser/util/getvalues

6、DWRUtil.setValues()
setValues()和setValue()非常相似，除了输入的是包含name/value对的javascript对象。name是HTML元素的ID，value是你想要设置给相应的元素的值。

7、DWRUtil.addOptions and DWRUtil.removeAllOptions
【生成列表】

DWR的一个常遇到的任务就是根据选项填充选择列表。下面的例子就是根据输入填充列表。

下面将介绍 DWRUtil.addOptions() 的几种是用方法。

如果你希望在你更新了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有5种模式】

简单数组: DWRUtil.addOptions(selectid,array) 会创建一堆option，每个option的文字和值都是数组元素中的值。

简单对象数组 (指定text): DWRUtil.addOptions(selectid,data,prop) 用每个数组元素创造一个option，option的值和文字都是在prop中指定的对象的属性。

高级对象数组 (指定text和value值): DWRUtil.addOptions(selectid,array,valueprop,textprop) 用每个数组元素创造一个option，option的值是对象的valueprop属性，option的文字是对象的textprop属性。

对象: DWRUtil.addOptions(selectid,map,reverse)用每个属性创建一个option。对象属性名用来作为option的值，对象属性值用来作为属性的文字，这听上去有些不对。但是事实上却是正确的方式。如果reverse参数被设置为true，那么对象属性值用来作为选项的值。

对象的Map: DWRUtil.addOptions(selectid,textprop) 用map中的每一个对象创建一个option。用对象的valueprop属性做为option的value，用对象的textprop属性做为option的文字。

ol 或 ul 列表: DWRUtil.addOptions(ulid,array) 用数组中的元素创建一堆li元素，他们的innerHTML是数组元素中的值。这种模式可以用来创建ul和ol列表。

例子：getahead.ltd.uk/dwr/browser/lists

8、DWRUtil.addRows and DWRUtil.removeAllRows
【生成Table】

DWR通过这两个函数来帮你操作table： DWRUtil.addRows() 和 DWRUtil.removeAllRows() 。这个函数的第一个参数都是table、tbody、thead、tfoot的id。一般来说最好使用tbody，因为这样可以保持你的header和footer行不变，并且可以防止Internet Explorer的bug。

【DWRUtil.removeAllRows()】
语法:
DWRUtil.removeAllRows(id);
描述:
通过id删除table中所有行。
参数:
id: table元素的id(最好是tbody元素的id)

【DWRUtil.addRows()】
语法:
DWRUtil.addRows(id,cellfuncs,[options]);
描述:
向指定id的table元素添加行。它使用数组中的每一个元素在table中创建一行。然后用cellfuncs数组中的没有函数创建一个列。单元格是依次用cellfunc根据没有数组中的元素创建出来的。

DWR1.1开始，addRows()也可以用对象做为数据。如果你用一个对象代替一个数组来创建单元格，这个对象会被传递给cell函数。

你可以写一些像这样的伪代码：

for each member in array
for each function in cellfuncs
create cell from cellfunc(array[i])

参数:
id: table元素的id(最好是tbody元素的id)
array: 数组(DWR1.1以后可以是对象)，做为更新表格数据。
cellfuncs: 函数数组，从传递过来的行数据中提取单元格数据。
options: 一个包含选项的对象(见下面)
高级选项:
rowCreator: 一个用来创建行的函数(例如，你希望tr加个css). 默认是返回一个document.createElement("tr")
cellCreator: 一个用来创建单元格的函数(例如，用th代替td). 默认返回一个document.createElement("td")

rowData: the element value from the array (the same for all cells in a row)
rowIndex: the key (if map) or index (if array) from the collection
rowNum: The row number counting from 0 in this section (so if you are using tbody,it counts rows in the tbody and not the whole table)
data: The 'computed' data value for the cell (cellCreators only)
cellNum: The cell number that we are altering counting from 0 (cellCreators only

例子：getahead.ltd.uk/dwr/browser/tables

【动态编辑表格(Dynamically Editing a Table)】

例子：getahead.org/dwr/examples/table

9、DWRUtil.onReturn
当按下return键时，得到通知。

当表单中有input元素，触发return键会导致表单被提交。当使用Ajax时，这往往不是你想要的。而通常你需要的触发一些Javscript。

不幸的是不同的浏览器处理这个事件的方式不一样。所以DWRUtil.onReturn修复了这个差异。如果你需要一个同表单元素中按回车相同的特性，你可以用这样代码实现：

js 代码
  1. <input type="text"onkeypress="DWRUtil.onReturn(event,submitFunction)">
  2. <input type="button"onclick="submitFunction()">

你也可以使用onkeypress事件或者onkeydown事件，他们做同样的事情。

一般来说DWR不是一个Javascript类库，所以它应该试图满足这个需求。不管怎样，这是在使用Ajax过程中一个很有用函数。

【onSubmit】
这个函数的工作原理是onSubmit()事件只存在于form元素上。

例子：getahead.ltd.uk/dwr/browser/util/onreturn

10、DWRUtil.toDescriptiveString
DWRUtil.toDescriptiveString()函数比默认的toString()更好。第一个参数是要调试的对象，第二个参数是可选的，用来指定内容深入的层次：

0: 单行调试
1: 多行调试，但不深入到子对象。
2: 多行调试，深入到第二层子对象
以此类推。一般调试到第二级是最佳的。
还有第三个参数，定义初始缩进。这个函数不应该被用于调式程序之外，因为以后可能会有变化。

11、DWRUtil.useLoadingMessage
设置一个Gmail风格的加载信息。所有演示页面
● dynamic textgetahead.ltd.uk/dwr/examples/text
● selection listsgetahead.ltd.uk/dwr/examples/lists
● live tablesgetahead.ltd.uk/dwr/examples/table
● live formsgetahead.ltd.uk/dwr/examples/form
● dynamic validationgetahead.ltd.uk/dwr/examples/validation
● address entrygetahead.ltd.uk/dwr/examples/address
都使用了GMail风格的加载消息。

这个方法将来可能被废弃，因为这个实现实在太专断了。为什么是红色，为什么在右上角，等等。唯一的真正答案就是：抄袭GMail。这里的建议是以本页面中的代码为模板，根据你的需求自定义。

你必须在页面加载以后调用这个方法(例如，不要在onload()事件触发之前调用)，因为它要创建一个隐藏的div来容纳消息。

最简单的做法时在onload事件中调用DWRUtil.useLoadingMessage，像这样：

js 代码
  1. functioninit(){
  2. DWRUtil.useLoadingMessage();
  3. }

可能有些情况下你是不能容易的编辑header和body标签(如果你在使用CMS，这很正常)，在这样的情况下你可以这样做：

js 代码
  1. functioninit(){
  2. DWRUtil.useLoadingMessage();
  3. }
  5. if(window.addEventListener){
  6. window.addEventListener("load",init,false);
  7. elseif(window.attachEvent){
  8. window.attachEvent("onload",init);
  9. }
  10. else{
  11. window.onload=init;
  12. }

下面这些是这个函数的代码，它对于你要实现自己的加载消息很有用。这个函数的主要内容是动态创建一个div(id是disabledZone)来容纳消息。重要的代码是当远程调用时使它显示和隐藏：

js 代码
  1. DWrengine.setPreHook(function(){
  2. $('disabledZone').style.visibility='visible';
  3. });
  4. DWrengine.setPostHook(function(){
  5. $('disabledZone').style.visibility='hidden';
  6. });
  7. Thisisfairlysimpleandmakesitquiteeasytoimplementyourown"loading"message.
  9. functionuseLoadingMessage(message){
  10. varloadingMessage;
  11. if(message)loadingMessage=message;
  12. elseloadingMessage="Loading";
  14. DWrengine.setPreHook(vardisabledZone=$('disabledZone');
  15. if(!disabledZone){
  16. disabledZone=document.createElement('div');
  17. disabledZone.setAttribute('id','disabledZone');
  18. disabledZone.style.position="absolute";
  19. disabledZone.style.zIndex="1000";
  20. disabledZone.style.left="0px";
  21. disabledZone.style.top="0px";
  22. disabledZone.style.width="100%";
  23. disabledZone.style.height="100%";
  24. document.body.appendChild(disabledZone);
  25. varmessageZone=document.createElement('div');
  26. messageZone.setAttribute('id','messageZone');
  27. messageZone.style.position="absolute";
  28. messageZone.style.top="0px";
  29. messageZone.style.right="0px";
  30. messageZone.style.background="red";
  31. messageZone.style.color="white";
  32. messageZone.style.fontFamily="Arial,Helvetica,sans-serif";
  33. messageZone.style.padding="4px";
  34. disabledZone.appendChild(messageZone);
  35. vartext=document.createTextNode(loadingMessage);
  36. messageZone.appendChild(text);
  37. }
  38. else{
  39. $('messageZone').innerHTML=loadingMessage;
  40. disabledZone.style.visibility='visible';
  41. function(){
  42. $('disabledZone').style.visibility='hidden';
  43. }

下面的做法能简单的使用有加载消息图片：

js 代码
  1. functionuseLoadingImage(imageSrc){
  2. varloadingImage;
  3. if(imageSrc)loadingImage=imageSrc;
  4. elseloadingImage="ajax-loader.gif";
  5. function(){
  6. vardisabledImageZone=$('disabledImageZone');
  7. if(!disabledImageZone){
  8. disabledImageZone=document.createElement('div');
  9. disabledImageZone.setAttribute('id','disabledImageZone');
  10. disabledImageZone.style.position="absolute";
  11. disabledImageZone.style.zIndex="1000";
  12. disabledImageZone.style.left="0px";
  13. disabledImageZone.style.top="0px";
  14. disabledImageZone.style.width="100%";
  15. disabledImageZone.style.height="100%";
  16. varimageZone=document.createElement('img');
  17. imageZone.setAttribute('id','imageZone');
  18. imageZone.setAttribute('src',imageSrc);
  19. imageZone.style.position="absolute";
  20. imageZone.style.top="0px";
  21. imageZone.style.right="0px";
  22. disabledImageZone.appendChild(imageZone);
  23. document.body.appendChild(disabledImageZone);
  24. }
  25. else{
  26. $('imageZone').src=imageSrc;
  27. disabledImageZone.style.visibility='visible';
  28. });
  29. function(){
  30. $('disabledImageZone').style.visibility='hidden';
  31. });
  32. }

然后你就可以这样使用:useLoadingImage("images/loader.gif");


12、修补浏览器事件
如果你创建了一个DOM元素，然后用addAttribute在这个元素上创建了一个事件，那么他们不能被正常的触发。你可以使用下面的脚本来遍历一个DOM树，并重新为他们绑定事件，这样他们就能正常的触发了。

把'click'改成你希望的事件。

js 代码
  1. DWrengine._fixExplorerEvents=function(obj){
  2. for(vari=0;i<obj.childNodes.length;i++){
  3. varchildobj=obj.childNodes[i];
  4. if(childobj.nodeValue==null){
  5. varonclickHandler=childobj.getAttribute('onclick');
  6. if(onclickHandler!= childobj.removeAttribute('onclick');
  7. //Ifusingprototype:
  8. //Event.observe(childobj,'click',newFunction(onclickHandler));
  9. //Otherwise(butwatchoutformemoryleaks):
  10. if(element.attachEvent){
  11. element.attachEvent("onclick",onclickHandler);
  12. }
  13. else{
  14. element.addEventListener("click",onclickHandler,useCapture);
  15. }
  16. DWrengine._fixExplorerEvents(childobj);
  17. }
  18. }

DWR util.js工具包的使用的更多相关文章

  1. html5使用canvas实现弹幕功能示例

    这篇文章主要介绍了html5使用canvas实现弹幕功能示例的相关资料,需要的朋友可以参考下

  2. 前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)

    这篇文章主要介绍了前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

  3. H5 canvas实现贪吃蛇小游戏

    本篇文章主要介绍了H5 canvas实现贪吃蛇小游戏，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

  4. ios – parse.com用于键,预期字符串的无效类型,但是得到了数组

    我尝试将我的数据保存到parse.com.我已经预先在parse.com上创建了一个名为’SomeClass’的类.它有一个名为’mySpecialColumn’的列,其数据类型为String.这是我尝试使用以下代码保存数据的代码：如果我运行这个我得到：错误：密钥mySpecialColumn的无效类型,预期字符串,但得到数组这就是我在parse.com上的核心外观：有谁知道我为什么会收到这个错误？

  5. ios – NSArray indexOfObject返回nil

    任何想法为什么我不能得到一个我确定在数组中存在的对象的索引？相反,我没有……

  6. ios – 上下文类型’NSFastEnumeration’不能与数组文字一起使用

    斯威夫特3,你会这样做吗？解决方法正如您所发现的,您不能使用as-casting将数组文字的类型指定为NSFastEnumeration.您需要找到一个符合NSFastEnumeration的正确类,在您的情况下它是NSArray.通常写这样的东西：

  7. ios – 搜索数组swift中的对象

    我正在尝试使用UISearchController创建搜索功能.但是,我似乎无法使其与我的团队对象一起工作.我首先创建了一个包含id,name和shortname的TeamObject.然后我从一个url中检索teamData,并将TeamObjects添加到一个填充到tableView中的数组中.这个tableView包含一个searchController,它假设过滤数据,但没有任何反应.阵列

  8. ios – 获取资产目录文件夹中所有图像的数组

    在iOS中,是否可以获取资产目录文件夹中的图像数组？我不确定为什么会对此进行投票.我真的不知道从哪里开始.我的另一种方法是创建文件夹中所有文件的plist,但它似乎是多余的.我无法添加任何代码,因为我会添加什么？

  9. ios – 来自调试器的消息：由于内存问题而终止

    我的应用程序使用Geojson文件.我使用MapBoxSDK将MGLpolyline添加到地图中.但问题是我的文件太大,以至于应用程序崩溃并收到错误：来自调试器的消息：由于内存问题而终止.我在第一次循环时面对66234个对象.我试图将数组块化为新数组,但没有成功.请帮我解决问题.这是我在地图上绘制的代码,这里是我的testprojectongithubuseXcode8.1如果有任何不同的第三方可

  10. ios – Swift – 使用字典数组从字典访问数据时出错

    我有一个非常简单的例子,说明我想做什么基本上,我有一个字典,其值包含[String：String]字典数组.我把数据填入其中,但当我去访问数据时,我收到此错误：Cannotsubscriptavalueoftype‘[([String:String])]?’withanindexoftype‘Int’请让我知道我做错了什么.解决方法您的常量数组是可选的.订阅字典总是返回一个可选项.你必须打开它.更

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github，点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件；对于前后端分离的开发模式，ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装，XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js，更小的压缩版本，可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装，VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js，更小的压缩版本，可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多，其中一个是利用CORS，而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的，最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止，相当于仅仅完成了预检，还没发送真正的请求呢。

  5. form提交时，ajax上传文件并更新到&lt;input&gt;中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案：1.加cache:false2.url加随机数正常代码：网上高人解读：cache的作用就是第一次请求完毕之后，如果再次去请求，可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下，内容编码类型满足大多数情况。在这里，我们主要谈谈contentType=false.在使用ajax上传文件时：在其中先封装了一个formData对象，然后使用post方法将文件传给服务器。说到这，我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗？这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的，因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来，以后不用到处找了。语法：$.ajaxFileUploadoptions参数说明：1、url上传处理程序地址。2，fileElementId需要上传的文件域的ID，即的ID。3，secureuri是否启用安全提交，默认为false。4，dataType服务器返回的数据类型。6，error

  9. AJAX-Cache：一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段，在频繁的异步请求业务中，我们往往需要利用“缓存”提升界面响应速度，减少网络资源占用。AJAX-Cache是一款jQuery缓存插件，可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的，我该如何解决呢？必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位，那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部