日期:2014-05-16  浏览次数:20458 次

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的值是对象