DWR util.js 详解

DWR util.js 详解
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列表设计的。你可能需要取得显示的文字，而不是当前选项的值。
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
6、DWRUtil.setValues()
setValues()和setValue()非常相似，除了输入的是包含name/value对的javascript对象。name是HTML元素的ID，value是你想要设置给相应的元素的值。
7、DWRUtil.addOptions 有5种调用方法：
1 ：Array: DWRUtil.addOptions(selectid, array) 。selectid为目标ID,array为每一项的text。
2 ：Array of objects (option text = option value):
DWRUtil.addOptions(selectid, data, prop) 用text和value的集合来为每一个数组元素创建一个选项，
pro参数指定text和value的值。
3：Array of objects (with differing option text and value):
DWRUtil.addOptions(selectid, array, valueprop, textprop) 用text和value的集合来为每一个数组元素创建一个选项，
valueprop确定value，textprop确定text。
4：Object: DWRUtil.addOptions(selectid, map, reverse) 为map中每一个属性(property)创建一个选项，
属性名作为选项的value，属性的value作为选项的text。这样做看起来是错的，但实际上这种做法的确是正确的。
如果reverse参数被设置为true，则属性的value还是被用做选项的value。
5：Map of objects: DWRUtil.addOptions(selectid, map, valueprop, textprop) 为map中的每一个对象创建一个选项，
valueprop指定选项的value，textprop指定选项的text。
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, map, valueprop, textprop) 用map中的每一个对象创建一个option。用对象的valueprop属性做为option的value，用对象的textprop属性做为option的文字。
ol 或 ul 列表: DWRUtil.addOptions(ulid, array) 用数组中的元素创建一堆li元素，他们的innerHTML是数组元素中的值。这种模式可以用来创建ul和ol列表。
8、DWRUtil.addRows and DWRUtil.removeAllRows
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, array, 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
9、DWRUtil.onReturn
当按下return键时，得到通知。
当表单中有input元素，触发return键会导致表单被提交。当使用Ajax时，这往往不是你想要的。而通常你需要的触发一些Javscript。
不幸的是不同的浏览器处理这个事件的方式不一样。所以DWRUtil.onReturn修复了这个差异。如果你需要一个同表单元素中按回车相同的特性，你可以用这样代码实现
你也可以使用onkeypress事件或者onkeydown事件，他们做同样的事情。
一般来说DWR不是一个Javascript类库，所以它应该试图满足这个需求。不管怎样，这是在使用Ajax过程中一个很有用函数。
【onSubmit】
这个函数的工作原理是onSubmit()事件只存在于form元素
10、DWRUtil.toDescriptiveString
DWRUtil.toDescriptiveString()函数比默认的toString()更好。第一个参数是要调试的对象，第二个参数是可选的，用来指定内容深入的层次：
0: 单行调试
1: 多行调试，但不深入到子对象。
2: 多行调试，深入到第二层子对象
以此类推。一般调试到第二级是最佳的。
还有第三个参数，定义初始缩进。这个函数不应该被用于调式程序之外，因为以后可能会有
11、DWRUtil.useLoadingMessage
设置一个Gmail风格的加载信息。所有演示页面
● dynamic text getahead.ltd.uk/dwr/examples/text
● selection lists getahead.ltd.uk/dwr/examples/lists
● live tables getahead.ltd.uk/dwr/examples/table
● live forms getahead.ltd.uk/dwr/examples/form
● dynamic validation getahead.ltd.uk/dwr/examples/validation
● address entry getahead.ltd.uk/dwr/examples/address
都使用了GMail风格的加载消息。
这个方法将来可能被废弃，因为这个实现实在太专断了。为什么是红色，为什么在右上角，等等。唯一的真正答案就是：抄袭GMail。这里的建议是以本页面中的代码为模板，根据你的需求自定义。
你必须在页面加载以后调用这个方法(例如，不要在onload()事件触发之前调用)，因为它要创建一个隐藏的div来容纳消息。
最简单的做法时在onload事件中调用DWRUtil.useLoadingMessage，像这样：
js 代码
1. function init() {
2. DWRUtil.useLoadingMessage();
3. }
可能有些情况下你是不能容易的编辑header和body标签(如果你在使用CMS，这很正常)，在这样的情况下你可以这样做：
js 代码
1. function init() {
2. DWRUtil.useLoadingMessage();
3. }
4.
5. if (window.addEventListener) {
6. window.addEventListener("load", init, false);
7. }
8. else if (window.attachEvent) {
9. window.attachEvent("onload", init);
10. }
11. else {
12. window.onload = init;
13. }
下面这些是这个函数的代码，它对于你要实现自己的加载消息很有用。这个函数的主要内容是动态创建一个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. This is fairly simple and makes it quite easy to implement your own "loading" message.
8.
9. function useLoadingMessage(message) {
10. var loadingMessage;
11. if (message) loadingMessage = message;
12. else loadingMessage = "Loading";
13.
14. DWREngine.setPreHook(function() {
15. var disabledZone = $('disabledZone');
16. if (!disabledZone) {
17. disabledZone = document.createElement('div');
18. disabledZone.setAttribute('id', 'disabledZone');
19. disabledZone.style.position = "absolute";
20. disabledZone.style.zIndex = "1000";
21. disabledZone.style.left = "0px";
22. disabledZone.style.top = "0px";
23. disabledZone.style.width = "100%";
24. disabledZone.style.height = "100%";
25. document.body.appendChild(disabledZone);
26. var messageZone = document.createElement('div');
27. messageZone.setAttribute('id', 'messageZone');
28. messageZone.style.position = "absolute";
29. messageZone.style.top = "0px";
30. messageZone.style.right = "0px";
31. messageZone.style.background = "red";
32. messageZone.style.color = "white";
33. messageZone.style.fontFamily = "Arial,Helvetica,sans-serif";
34. messageZone.style.padding = "4px";
35. disabledZone.appendChild(messageZone);
36. var text = document.createTextNode(loadingMessage);
37. messageZone.appendChild(text);
38. }
39. else {
40. $('messageZone').innerHTML = loadingMessage;
41. disabledZone.style.visibility = 'visible';
42. }
43. });
44.
45. DWREngine.setPostHook(function() {
46. $('disabledZone').style.visibility = 'hidden';
47. });
48. }
下面的做法能简单的使用有加载消息图片：
js 代码
1. function useLoadingImage(imageSrc) {
2. var loadingImage;
3. if (imageSrc) loadingImage = imageSrc;
4. else loadingImage = "ajax-loader.gif";
5. DWREngine.setPreHook(function() {
6. var disabledImageZone = $('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. var imageZone = 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. });
30. DWREngine.setPostHook(function() {
31. $('disabledImageZone').style.visibility = 'hidden';
32. });
33. }
然后你就可以这样使用:useLoadingImage("images/loader.gif");
12、修补浏览器事件
如果你创建了一个DOM元素，然后用addAttribute在这个元素上创建了一个事件，那么他们不能被正常的触发。你可以使用下面的脚本来遍历一个DOM树，并重新为他们绑定事件，这样他们就能正常的触发了。
把'click'改成你希望的事件。
js 代码
1. DWREngine._fixExplorerEvents = function(obj) {
2. for (var i = 0; i < obj.childNodes.length; i++) {
3. var childObj = obj.childNodes [i];
4. if (childObj.nodeValue == null) {
5. var onclickHandler = childObj.getAttribute('onclick');
6. if (onclickHandler != null) {
7. childObj.removeAttribute('onclick');
8. // If using prototype:
9. // Event.observe(childObj, 'click', new Function(onclickHandler));
10. // Otherwise (but watch out for memory leaks):
11. if (element.attachEvent) {
12. element.attachEvent("onclick", onclickHandler);
13. }
14. else {
15. element.addEventListener("click", onclickHandler, useCapture);
16. }
17. }
18. DWREngine._fixExplorerEvents(childObj);
19. }
20. }
21. }