util.js包含了一些工具函數來幫助你用javascript數據(例如從服務器返回的數據)來更新你的web頁面。
你可以在DWR以外使用它，因爲它不依賴於DWR的其他部分。你可以下載整個DWR或者單獨下載.
4個基本的操作頁面的函數：getValue[s]()和setValue[s]()可以操作大部分HTML元素除了table，list和image。getText()可以操作select list。
要修改table可以用addRows()和removeAllRows()。要修改列表(select列表和ul,ol列表)可以用addOptions()和removeAllOptions()。
還有一些其他功能不是DWRUtil的一部分。但它們也很有用，它們可以用來解決一些小問題，但是它們不是對於所有任都通用的。
$()
addOptions and removeAllOptions
addRows and removeAllRows
getText
getValue
getValues
onReturn
selectRange
setValue
setValues
toDescriptiveString
useLoadingMessage
Submission box
生成列表
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列表。
生成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, 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")
DWRUtil.getText(id)
getText(id)和getValue(id)很相似。出了它是爲select列表設計的。你可能需要取得顯示的文字，而不是當前選項的值。
DWRUtil.getValue(id)
DWRUtil.getValue(id)是 setValue()對應的"讀版本"。它可以從HTML元素中取出其中的值，而你不用管這個元素是select列表還是一個div。
這個函數能操作大多數HTML元素包括select(去處當前選項的值而不是文字)、input元素(包括textarea)、div和span。
DWRUtil.getValues()
getValues()和getValue()非常相似，除了輸入的是包含name/value對的javascript對象。name是HTML元素的ID，value會被更改爲這些ID對象元素的內容。這個函數不會返回對象，它只更改傳遞給它的值。
基於Form的getValues()
從DWR1.1開始getValues()可以傳入一個HTML元素(一個DOM對象或者id字符串)，然後從它生成一個reply對象。
DWRUtil.onReturn
當按下return鍵時，得到通知。
當表單中有input元素，觸發return鍵會導致表單被提交。當使用Ajax時，這往往不是你想要的。而通常你需要的觸發一些Javscript。
不幸的是不同的瀏覽器處理這個事件的方式不一樣。所以DWRUtil.onReturn修復了這個差異。如果你需要一個同表單元素中按回車相同的特性，你可以用這樣代碼實現：
<input type="text" οnkeypress="DWRUtil.onReturn(event, submitFunction)"/>
<input type="button" οnclick="submitFunction()"/>你也可以使用onkeypress事件或者onkeydown事件，他們做同樣的事情。
一般來說DWR不是一個Javascript類庫，所以它應該試圖滿足這個需求。不管怎樣，這是在使用Ajax過程中一個很有用函數。
onSubmit
這個函數的工作原理是onSubmit()事件只存在於<FORM ...>元素上。
DWRUtil.selectRange
選擇一個輸入框中的一定範圍的文字。
你可能爲了實現類似"Google suggest"類型的功能而需要選擇輸入框中的一定範圍的文字，但是不同瀏覽器間選擇的模型不一樣。這DWRUtil函數可以幫你實現。
DWRUtil.setValue(id, value)
DWRUtil.setValue(id, value)根據第一個參數中指定的id找到相應元素，並根據第二個參數改變其中的值。
這個函數能操作大多數HTML元素包括select(去處當前選項的值而不是文字)、input元素(包括textarea)、div和span。
DWRUtil.setValues()
setValues()和setValue()非常相似，除了輸入的是包含name/value對的javascript對象。name是HTML元素的ID，value是你想要設置給相應的元素的值。
DWRUtil.toDescriptiveString
DWRUtil.toDescriptiveString()函數比默認的toString()更好。第一個參數是要調試的對象，第二個參數是可選的，用來指定內容深入的層次：
0: 單行調試
1: 多行調試，但不深入到子對象。
2: 多行調試，深入到第二層子對象
以此類推。一般調試到第二級是最佳的。
還有第三個參數，定義初始縮進。這個函數不應該被用於調式程序之外，因爲以後可能會有變化。
DWRUtil.useLoadingMessage
設置一個Gmail風格的加載信息。所有演示頁面(dynamic text, selection lists, live tables, live forms, dynamic validation 和 address entry)都使用了GMail風格的加載消息。
這個方法將來可能被廢棄，因爲這個實現實在太專斷了。爲什麼是紅色，爲什麼在右上角，等等。唯一的真正答案就是：抄襲GMail。這裏的建議是以本頁面中的代碼爲模板，根據你的需求自定義。
你必須在頁面加載以後調用這個方法(例如，不要在onload()事件觸發之前調用)，因爲它要創建一個隱藏的div來容納消息。
最簡單的做法時在onload事件中調用DWRUtil.useLoadingMessage，像這樣：
<head>
<script>
function init() {
DWRUtil.useLoadingMessage();
}
</script>
...
</head>
<body οnlοad="init();">
...可能有些情況下你是不能容易的編輯header和body標籤(如果你在使用CMS，這很正常)，在這樣的情況下你可以這樣做：
<script>
function init() {
DWRUtil.useLoadingMessage();
}
if (window.addEventListener) {
window.addEventListener("load", init, false);
}
else if (window.attachEvent) {
window.attachEvent("onload", init);
}
else {
window.onload = init;
}
</script>下面這些是這個函數的代碼，它對於你要實現自己的加載消息很有用。這個函數的主要內容是動態創建一個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");
本文來自CSDN博客：http://blog.csdn.net/impeller/archive/2008/04/09/2271207.aspx