util.js包含一些有用的函數(shù)function,用于在客戶端頁面調(diào)用.
主要功能如下：
代碼
1、$() 獲得頁面參數(shù)值
2、addOptions and removeAllOptions 初始化下拉框
3、addRows and removeAllRows 填充表格
4、getText 取得text屬性值
5、getValue 取得form表單值
6、getValues 取得form多個值
7、onReturn
8、selectRange
9、setValue
10、setValues
11、toDescriptiveString
12、useLoadingMessage
13、Submission box
代碼
1、$()函數(shù)
IE5.0 不支持
$ = document.getElementById
取得form表單值
var name = $("name");
代碼
a、如果你想在更新select 時，想保存原來的數(shù)據(jù)，即在原來的select中添加新的option：
var sel = DWRUtil.getValue(id);
DWRUtil.removeAllOptions(id);
DWRUtil.addOptions(id,...);
DWRUtil.setValue(id,sel);
demo:比如你想添加一個option：“--請選擇--”
DWRUtil.addOptions(id,["--請選擇--"]);
DWRUtil.addOptions()有5中方式：
代碼
@ Simple Array Example: 簡單數(shù)組
例如:
Array array = new Array[ 'Africa', 'America', 'Asia', 'Australasia', 'Europe' ]；
DWRUtil.addOptions("demo1",array);
代碼
@ Simple Object Array Example 簡單數(shù)組,元素為beans
這種情況下,你需要指定要顯示 beans 的 property 以及 對應(yīng)的 bean 值
例如:
function processCallback(provinces){
//provinces是一個數(shù)組，是遠(yuǎn)程bean的返回值List<String>
var arrayObject=new Array();
for(var i=0;i<provinces.length;i++)
{
arrayObject[i]={value:provinces[i],name:i};
}
dwr.util.addOptions("provinceSel",arrayObject,"name","value");
}
其中provinceSel指向select的id，name指向option中對應(yīng)key，value指向?qū)?yīng)下拉框中value.
代碼
@ Advanced Object Array Example 基本同上
DWRUtil.addOptions( "demo3",
[{ name:'Africa', id:'AF' },
{ name:'America', id:'AM' },
{ name:'Asia', id:'AS' },
{ name:'Australasia', id:'AU' },
{ name:'Europe', id:'EU' }
],'id','name');
代碼
@ Map Example 用制定的map來填充 options:
如果 server 返回 Map,呢么這樣處理即可：
DWRUtil.addOptions( "demo3",map);
其中 value 對應(yīng) map keys，text 對應(yīng) map values；
代碼
@ <ul> and <ol> list editing
DWRUtil.addOptions() 函數(shù)不但可以填出select,并可以填出<ul>和<ol>這樣的html元素
3、addRows and removeAllRows 填充表格
DWR 提供2個函數(shù)來操作 table；
----------------------------
DWRUtil.addRows(); 添加行
----------------------------
DWRUtil.removeAllRows(id); 刪除指定id的table
----------------------------
下面著重看一下 addRows() 函數(shù)：
DWRUtil.addRows(id, array, cellfuncs, [options]);
其中id 對應(yīng) table 的 id(更適合tbody，推薦使用 tbody)
array 是server端服務(wù)器的返回值，比如list，map等等
cellfuncs 及用返回值來填充表格
[options] 用來設(shè)置表格樣式，它有2個內(nèi)部函數(shù)來設(shè)置單元格樣式(rowCreator、cellCreator)。
比如: server端返回list，而list中存放的是下面這個 bean：
代碼
public class Person {
private String name;
private Integer id;
private String address;
public void set(){……}
public String get(){……}
}
下面用 DWRUtil.addRows();
代碼
function processCallback(data){
var cellfuncs = [
function(data){return data.id;},
function(data){return data.name;},
function(data){return data.address;},
function(data){
var idd = data.id;
var delButton = document.createElement("input");
delButton.setAttribute('type','button');
delButton.setAttribute('onclick', 'delPerson('+ idd +')');
delButton.setAttribute("id","delete");
delButton.setAttribute("value","delete");
return delButton;
},
function(data){
var idd = data.id;
var editButton = document.createElement("input");
editButton.setAttribute('type','button');
editButton.setAttribute('onclick', 'editPerson('+ idd +')');
editButton.setAttribute("id","edit");
editButton.setAttribute("value","edit");
return editButton;
}
];
DWRUtil.removeAllRows('body');
DWRUtil.addRows("body", data, cellfuncs,{
rowCreator:function(options) {
var row = document.createElement("tr");
var index = options.rowIndex * 50;
row.setAttribute("id",options.rowData.id);
row.style.collapse = "separate";
row.style.color = "rgb(" + index + ",0,0)";
return row;
},
cellCreator:function(options) {
var td = document.createElement("td");
var index = 255 - (options.rowIndex * 50);
//td.style.backgroundColor = "rgb(" + index + ",255,255)";
td.style.backgroundColor = "menu";
td.style.fontWeight = "bold";
td.style.align = "center";
return td;
}
});
// document.getElementById("table").style.display = "none";
}
4、getText 取得text屬性值
DWRUtil.getText(id): 用來獲得 option 中的文本
比如：
代碼
<select id="select">
<option value="1"> 蘋果 </option>
<option value="2" select> 香蕉 </option>
<option value="3"> 鴨梨 </option>
</select>
調(diào)用 DWRUtil.getText("select"); 將返回 "香蕉" 字段；
DWRUtil.getText(id)；僅僅是用來獲得 select 文本值，其他不適用。
5、DWRUtil.getValue(id): 用來獲得 form 表單值
有如下幾種情況：
代碼
Text area (id="textarea"): DWRUtil.getValue("textarea")將返回 Text area的值;
Selection list (id="select"): DWRUtil.getValue("select") 將返回 Selection list 的值;
Text input (id="text"): DWRUtil.getValue("text") 將返回 Text input 的值;
Password input (id="password"): DWRUtil.getValue("text") 將返回 Password input 的值;
Form button (id="formbutton"): DWRUtil.getValue("formbutton") 將返回 Form button 的值;
Fancy button (id="button"): DWRUtil.getValue("formbutton") 將返回 Fancy button 的值;
6、getValues 取得form多個值
批量獲得頁面表單的值,組合成數(shù)組的形式,返回 name/value;
例如: form():
代碼
<input type="textarea" id="textarea" value="1111"/>
<input type="text" id="text" value="2222"/>
<input type="password" id= "password" value="3333"/>
<select id="select">
<option value="1"> 蘋果 </option>
<option value="4444" select> 香蕉 </option>
<option value="3"> 鴨梨 </option>
</select>
<input type="button" id="button" value="5555"/>
那么: DWRUtil.getValues({textarea:null,select:null,text:null,password:null,button:null})
將返回 ^^^^^^^^^^^^^^^^{textarea:1111,select:4444,text:2222,password:3333,button:5555}
7、DWRUtil.onReturn 防止當(dāng)在文本框中輸入后，直接按回車就提交表單。
<input type="text" onkeypress="DWRUtil.onReturn(event, submitFunction)"/>
<input type="button" onclick="submitFunction()"/>
8、DWRUtil.selectRange(ele, start, end);
在一個input box里選一個范圍
代碼
DWRUtil.selectRange("sel-test", $("start").value, $("end").value);
比如:<input type="text" id="sel-test" value="012345678901234567890">
DWRUtil.selectRange("sel-test", 2, 15);
9、DWRUtil.setValue(id,value);
為指定的id元素,設(shè)置一個新值;
10、DWRUtil.setValues({
name: "fzfx88",
password: "1234567890"
}
); 同上,批量更新表單值.
/***********************************************************************/
11、DWRUtil.toDescriptiveString()
帶debug信息的toString，第一個為將要debug的對象，第二個參數(shù)為處理等級。等級如下：
0: Single line of debug 單行調(diào)試
1: Multi-line debug that does not dig into child objects 不分析子元素的多行調(diào)試
2: Multi-line debug that digs into the 2nd layer of child objects 最多分析到第二層子元素的多行調(diào)試
<input type="text" id="text">
DWRUtil。toDescriptiveString("text",0);
/******************************************************************************/
12、DWRUtil.useLoadingMessage();
當(dāng)發(fā)出ajax請求后,頁面顯示的提示等待信息;
代碼
function searchUser(){
var loadinfo = "loading....."
try{
regUser.queryAllUser(userList);
DWRUtil.useLoadingMessage(loadinfo);
}catch(e){
}
}
-----------------------------------------------------------------------------------------
2008-05-20 16:58功能函數(shù)：
$()
DWRUtil.getText(id)
DWRUtil.getValue(id)
DWRUtil.setValue(id, value)
DWRUtil.getValues()
DWRUtil.setValues()
DWRUtil.addOptions and DWRUtil.removeAllOptions
DWRUtil.addRows and DWRUtil.removeAllRows
DWRUtil.onReturn
DWRUtil.toDescriptiveString
DWRUtil.useLoadingMessage
修補(bǔ)瀏覽器事件
util.js包含了一些工具函數(shù)來幫助你用javascript數(shù)據(jù)(例如從服務(wù)器返回的數(shù)據(jù))來更新你的web頁面。
你可以在DWR以外使用它，因?yàn)樗灰蕾囉贒WR的其他部分。
4個基本的操作頁面的函數(shù)：getValue[s]()和setValue[s]()可以操作大部分HTML元素除了table，list和image。getText()可以操作select list。
要修改table可以用addRows()和removeAllRows()。要修改列表(select列表和ul,ol列表)可以用addOptions()和removeAllOptions()。
還有一些其他功能不是DWRUtil的一部分。但它們也很有用，它們可以用來解決一些小問題，但是它們不是對于所有任都通用的。
1、$()
$() 函數(shù)(它是合法的Javascript名字) 是從Protoype偷來的主意。大略上的講： $ = document.getElementById。 因?yàn)樵贏jax程序中，你會需要寫很多這樣的語句，所以使用 $() 會更簡潔。
通過指定的id來查找當(dāng)前HTML文檔中的元素，如果傳遞給它多個參數(shù)，它會返回找到的元素的數(shù)組。所有非String類型的參數(shù)會被原封不動的返回。這個函數(shù)的靈感來至于prototype庫，但是它可以在更多的瀏覽器上運(yùn)行。
從技術(shù)角度來講他在IE5.0中是不能使用的，因?yàn)樗褂昧薃rray.push，盡管如此通常它只是用來同engine.js一起工作。如果你不想要engine.js并且在IE5.0中使用，那么你最好為Array.push找個替代品。
2、DWRUtil.getText(id)
getText(id)和getValue(id)很相似。它是為select列表設(shè)計(jì)的。你可能需要取得顯示的文字，而不是當(dāng)前選項(xiàng)的值。
例子：getahead.ltd.uk/dwr/browser/util/gettext
3、DWRUtil.getValue(id)
DWRUtil.getValue(id)是 setValue()對應(yīng)的"讀版本"。它可以從HTML元素中取出其中的值，而你不用管這個元素是select列表還是一個div。
這個函數(shù)能操作大多數(shù)HTML元素包括select(獲取當(dāng)前選項(xiàng)的值而不是文字)、input元素(包括textarea)、div和span。
4、DWRUtil.setValue(id, value)
DWRUtil.setValue(id, value)根據(jù)第一個參數(shù)中指定的id找到相應(yīng)元素，并根據(jù)第二個參數(shù)改變其中的值。
這個函數(shù)能操作大多數(shù)HTML元素包括select(設(shè)置當(dāng)前選項(xiàng)的值而不是文字)、input元素(包括textarea)、div和span。
5、DWRUtil.getValues()
getValues()和getValue()非常相似，除了輸入的是包含name/value對的javascript對象。name是HTML元素的ID，value會被更改為這些ID對象元素的內(nèi)容。這個函數(shù)不會返回對象，它只更改傳遞給它的值。
【基于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是你想要設(shè)置給相應(yīng)的元素的值。
7、DWRUtil.addOptions and DWRUtil.removeAllOptions
【生成列表】
DWR的一個常遇到的任務(wù)就是根據(jù)選項(xiàng)填充選擇列表。下面的例子就是根據(jù)輸入填充列表。
下面將介紹 DWRUtil.addOptions() 的幾種是用方法。
如果你希望在你更新了select以后，它仍然保持運(yùn)來的選擇，你要像下面這樣做：
var sel = DWRUtil.getValue(id);
DWRUtil.removeAllOptions(id);
DWRUtil.addOptions(id, ...);
DWRUtil.setValue(id, sel);如果你想加入一個初始的"Please select..." 選項(xiàng)那么你可以直接加入下面的語句：
DWRUtil.addOptions(id, \["Please select ..."]);然后再下面緊接著加入你真正的選項(xiàng)數(shù)據(jù)。
【DWRUtil.addOptions有5種模式】
簡單數(shù)組: DWRUtil.addOptions(selectid, array) 會創(chuàng)建一堆option，每個option的文字和值都是數(shù)組元素中的值。
簡單對象數(shù)組 (指定text): DWRUtil.addOptions(selectid, data, prop) 用每個數(shù)組元素創(chuàng)造一個option，option的值和文字都是在prop中指定的對象的屬性。
高級對象數(shù)組 (指定text和value值): DWRUtil.addOptions(selectid, array, valueprop, textprop) 用每個數(shù)組元素創(chuàng)造一個option，option的值是對象的valueprop屬性，option的文字是對象的textprop屬性。
對象: DWRUtil.addOptions(selectid, map, reverse)用每個屬性創(chuàng)建一個option。對象屬性名用來作為option的值，對象屬性值用來作為屬性的文字，這聽上去有些不對。但是事實(shí)上卻是正確的方式。如果reverse參數(shù)被設(shè)置為true，那么對象屬性值用來作為選項(xiàng)的值。
對象的Map: DWRUtil.addOptions(selectid, map, valueprop, textprop) 用map中的每一個對象創(chuàng)建一個option。用對象的valueprop屬性做為option的value，用對象的textprop屬性做為 option的文字。
ol 或 ul 列表: DWRUtil.addOptions(ulid, array) 用數(shù)組中的元素創(chuàng)建一堆li元素，他們的innerHTML是數(shù)組元素中的值。這種模式可以用來創(chuàng)建ul和ol列表。
例子：getahead.ltd.uk/dwr/browser/lists
8、DWRUtil.addRows and DWRUtil.removeAllRows
【生成Table】
DWR通過這兩個函數(shù)來幫你操作table： DWRUtil.addRows() 和 DWRUtil.removeAllRows() 。這個函數(shù)的第一個參數(shù)都是table、tbody、thead、tfoot的id。一般來說最好使用tbody，因?yàn)檫@樣可以保持你的header和 footer行不變，并且可以防止Internet Explorer的bug。
【DWRUtil.removeAllRows()】
語法:
DWRUtil.removeAllRows(id);
描述:
通過id刪除table中所有行。
參數(shù):
id: table元素的id(最好是tbody元素的id)
【DWRUtil.addRows()】
語法:
DWRUtil.addRows(id, array, cellfuncs, [options]);
描述:
向指定id的table元素添加行。它使用數(shù)組中的每一個元素在table中創(chuàng)建一行。然后用cellfuncs數(shù)組中的沒有函數(shù)創(chuàng)建一個列。單元格是依次用cellfunc根據(jù)沒有數(shù)組中的元素創(chuàng)建出來的。
DWR1.1開始，addRows()也可以用對象做為數(shù)據(jù)。如果你用一個對象代替一個數(shù)組來創(chuàng)建單元格，這個對象會被傳遞給cell函數(shù)。
你可以寫一些像這樣的偽代碼：
for each member in array
for each function in cellfuncs
create cell from cellfunc(array[i])
參數(shù):
id: table元素的id(最好是tbody元素的id)
array: 數(shù)組(DWR1.1以后可以是對象)，做為更新表格數(shù)據(jù)。
cellfuncs: 函數(shù)數(shù)組，從傳遞過來的行數(shù)據(jù)中提取單元格數(shù)據(jù)。
options: 一個包含選項(xiàng)的對象(見下面)
高級選項(xiàng):
rowCreator: 一個用來創(chuàng)建行的函數(shù)(例如，你希望tr加個css). 默認(rèn)是返回一個document.createElement("tr")
cellCreator: 一個用來創(chuàng)建單元格的函數(shù)(例如，用th代替td). 默認(rèn)返回一個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
【動態(tài)編輯表格(Dynamically Editing a Table)】
例子：getahead.org/dwr/examples/table
9、DWRUtil.onReturn
當(dāng)按下return鍵時，得到通知。
當(dāng)表單中有input元素，觸發(fā)return鍵會導(dǎo)致表單被提交。當(dāng)使用Ajax時，這往往不是你想要的。而通常你需要的觸發(fā)一些Javscript。
不幸的是不同的瀏覽器處理這個事件的方式不一樣。所以DWRUtil.onReturn修復(fù)了這個差異。如果你需要一個同表單元素中按回車相同的特性，你可以用這樣代碼實(shí)現(xiàn)：
js 代碼
<input type="text" onkeypress="DWRUtil.onReturn(event, submitFunction)">
<input type="button" onclick="submitFunction()">
你也可以使用onkeypress事件或者onkeydown事件，他們做同樣的事情。
一般來說DWR不是一個Javascript類庫，所以它應(yīng)該試圖滿足這個需求。不管怎樣，這是在使用Ajax過程中一個很有用函數(shù)。
【onSubmit】
這個函數(shù)的工作原理是onSubmit()事件只存在于form元素上。
例子：getahead.ltd.uk/dwr/browser/util/onreturn
10、DWRUtil.toDescriptiveString
DWRUtil.toDescriptiveString()函數(shù)比默認(rèn)的toString()更好。第一個參數(shù)是要調(diào)試的對象，第二個參數(shù)是可選的，用來指定內(nèi)容深入的層次：
0: 單行調(diào)試
1: 多行調(diào)試，但不深入到子對象。
2: 多行調(diào)試，深入到第二層子對象
以此類推。一般調(diào)試到第二級是最佳的。
還有第三個參數(shù)，定義初始縮進(jìn)。這個函數(shù)不應(yīng)該被用于調(diào)式程序之外，因?yàn)橐院罂赡軙凶兓?/p>
11、DWRUtil.useLoadingMessage
設(shè)置一個Gmail風(fēng)格的加載信息。所有演示頁面
● 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
都使用了GMail風(fēng)格的加載消息。
這個方法將來可能被廢棄，因?yàn)檫@個實(shí)現(xiàn)實(shí)在太專斷了。為什么是紅色，為什么在右上角，等等。唯一的真正答案就是：抄襲GMail。這里的建議是以本頁面中的代碼為模板，根據(jù)你的需求自定義。
你必須在頁面加載以后調(diào)用這個方法(例如，不要在onload()事件觸發(fā)之前調(diào)用)，因?yàn)樗獎?chuàng)建一個隱藏的div來容納消息。
最簡單的做法時在onload事件中調(diào)用DWRUtil.useLoadingMessage，像這樣：
js 代碼
function init() {
DWRUtil.useLoadingMessage();
}
可能有些情況下你是不能容易的編輯header和body標(biāo)簽(如果你在使用CMS，這很正常)，在這樣的情況下你可以這樣做：
js 代碼
function init() {
DWRUtil.useLoadingMessage();
}
if (window.addEventListener) {
window.addEventListener("load", init, false);
}
else if (window.attachEvent) {
window.attachEvent("onload", init);
}
else {
window.onload = init;
}
下面這些是這個函數(shù)的代碼，它對于你要實(shí)現(xiàn)自己的加載消息很有用。這個函數(shù)的主要內(nèi)容是動態(tài)創(chuàng)建一個div(id是disabledZone)來容納消息。重要的代碼是當(dāng)遠(yuǎn)程調(diào)用時使它顯示和隱藏：
js 代碼
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';
});
}
下面的做法能簡單的使用有加載消息圖片：
js 代碼
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");
12、修補(bǔ)瀏覽器事件
如果你創(chuàng)建了一個DOM元素，然后用addAttribute在這個元素上創(chuàng)建了一個事件，那么他們不能被正常的觸發(fā)。你可以使用下面的腳本來遍歷一個DOM樹，并重新為他們綁定事件，這樣他們就能正常的觸發(fā)了。
把'click'改成你希望的事件。
js 代碼
DWREngine._fixExplorerEvents = function(obj) {
for (var i = 0; i < obj.childNodes.length; i++) {
var childObj = obj.childNodes [i];
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);
}
}
}
13.
DWRUtil.selectRange("sel-test", , )
現(xiàn)有輸入框 <input type=text id="sel-test" value="0123456789">, 則點(diǎn)擊按鈕時4567被選中: 0123456789
----------------------------------------------------------------------------------------------
2008-04-11 20:161、$() 獲得頁面參數(shù)值
2、addOptions and removeAllOptions 初始化下拉框
3、addRows and removeAllRows 填充表格
4、getText 取得text屬性值
5、getValue 取得form表單值
6、getValues 取得form多個值
7、onReturn
8、selectRange
9、setValue
10、setValues
11、toDescriptiveString
12、useLoadingMessage
13、Submission box
1、$() 獲得頁面參數(shù)值2、addOptions and removeAllOptions 初始化下拉框3、addRows and removeAllRows 填充表格4、getText 取得text屬性值5、getValue 取得form表單值6、getValues 取得form多個值7、onReturn 8、selectRange9、setValue10、setValues11、toDescriptiveString12、useLoadingMessage13、Submission box
*********************************************************************
//////////////////////http://blog.163.com/fzfx888//////////////////////////
*********************************************************************
Java代碼
1、$()函數(shù)
IE5.0 不支持
$ = document.getElementById
取得form表單值
var name = $("name");
1、$()函數(shù) IE5.0 不支持 $ = document.getElementById 取得form表單值 var name = $("name");
***********************************************************************************
///////////////////////////////////////////////////////////////////////////////////
***********************************************************************************
2、用于填充 select 下拉框 option
Java代碼
a、如果你想在更新select 時，想保存原來的數(shù)據(jù)，即在原來的select中添加新的option：
var sel = DWRUtil.getValue(id);
DWRUtil.removeAllOptions(id);
DWRUtil.addOptions(id,...);
DWRUtil.setValue(id,sel);
demo:比如你想添加一個option：“--請選擇--”
DWRUtil.addOptions(id,["--請選擇--"]);
DWRUtil.addOptions()有5中方式：
a、如果你想在更新select 時，想保存原來的數(shù)據(jù)，即在原來的select中添加新的option： var sel = DWRUtil.getValue(id); DWRUtil.removeAllOptions(id); DWRUtil.addOptions(id,...); DWRUtil.setValue(id,sel); demo:比如你想添加一個option：“--請選擇--” DWRUtil.addOptions(id,["--請選擇--"]); DWRUtil.addOptions()有5中方式：
Java代碼
@ Simple Array Example: 簡單數(shù)組
例如:
Array array = new Array[ 'Africa', 'America', 'Asia', 'Australasia', 'Europe' ]；
DWRUtil.addOptions("demo1",array);
@ Simple Array Example: 簡單數(shù)組 例如: Array array = new Array[ 'Africa', 'America', 'Asia', 'Australasia', 'Europe' ]； DWRUtil.addOptions("demo1",array);
Java代碼
@ Simple Object Array Example 簡單數(shù)組,元素為beans
這種情況下,你需要指定要顯示 beans 的 property 以及 對應(yīng)的 bean 值
例如:
public class Person {
private String name;
private Integer id;
pirvate String address;
public void set(){……}
public String get(){……}
}
DWRUtil.addOptions("demo2",array,'id','name');
其中id指向及bean的id屬性，在optiong中對應(yīng)value，name指向bean的name屬性，對應(yīng)下拉框中顯示的哪個值.
@ Simple Object Array Example 簡單數(shù)組,元素為beans 這種情況下,你需要指定要顯示 beans 的 property 以及 對應(yīng)的 bean 值 例如: public class Person { private String name; private Integer id; pirvate String address; public void set(){……} public String get(){……} } DWRUtil.addOptions("demo2",array,'id','name'); 其中id指向及bean的id屬性，在optiong中對應(yīng)value，name指向bean的name屬性，對應(yīng)下拉框中顯示的哪個值.
Java代碼
@ Advanced Object Array Example 基本同上
DWRUtil.addOptions( "demo3",
[{ name:'Africa', id:'AF' },
{ name:'America', id:'AM' },
{ name:'Asia', id:'AS' },
{ name:'Australasia', id:'AU' },
{ name:'Europe', id:'EU' }
],'id','name');
@ Advanced Object Array Example 基本同上 DWRUtil.addOptions( "demo3", [{ name:'Africa', id:'AF' }, { name:'America', id:'AM' }, { name:'Asia', id:'AS' }, { name:'Australasia', id:'AU' }, { name:'Europe', id:'EU' } ],'id','name');
Java代碼
@ Map Example 用制定的map來填充 options:
如果 server 返回 Map,呢么這樣處理即可：
DWRUtil.addOptions( "demo3",map);
其中 value 對應(yīng) map keys，text 對應(yīng) map values；
@ Map Example 用制定的map來填充 options: 如果 server 返回 Map,呢么這樣處理即可： DWRUtil.addOptions( "demo3",map); 其中 value 對應(yīng) map keys，text 對應(yīng) map values；
Java代碼
@ <ul> and <ol> list editing
DWRUtil.addOptions() 函數(shù)不但可以填出select,開可以填出<ul>和<ol>這樣的heml元素
@ <ul> and <ol> list editing DWRUtil.addOptions() 函數(shù)不但可以填出select,開可以填出<ul>和<ol>這樣的heml元素
***********************************************************************************
///////////////////////////////fzfx88@163.com//////////////////////////////////////
***********************************************************************************
3、addRows and removeAllRows 填充表格
DWR 提供2個函數(shù)來操作 table；
----------------------------
DWRUtil.addRows(); 添加行
----------------------------
DWRUtil.removeAllRows(id); 刪除指定id的table
----------------------------
下面著重看一下 addRows() 函數(shù)：
DWRUtil.addRows(id, array, cellfuncs, [options]);
其中id 對應(yīng) table 的 id(更適合tbodye，推薦使用 tbodye)
array 是server端服務(wù)器的返回值，比如list，map等等
cellfuncs 及用返回值來天春表格
[options] 用來設(shè)置表格樣式，它有2個內(nèi)部函數(shù)來設(shè)置單元格樣式(rowCreator、cellCreator)。
比如: server端返回list，而list中存放的是下面這個 bean：
Java代碼
public class Person {
private String name;
private Integer id;
pirvate String address;
public void set(){……}
public String get(){……}
}
public class Person { private String name; private Integer id; pirvate String address; public void set(){……} public String get(){……} }
下面用 DWRUtil.addRows();
/******************************************************************************/
/****************** ***********fzfx88@hotmail.com********************************/
/*********************************************************************************/
Java代碼
function userList(data){
//var delButton = "<input type='button'/>";
//var editButton = "<input type='button'/>";
var cellfuncs = [
function(data){return data.id;},
function(data){return data.userName;},
function(data){return data.userTrueName;},
function(data){return data.birthday;},
function(data){
var idd = data.id;
var delButton = document.createElement("<INPUT TYPE='button' onclick='delPerson("+ idd +")'>");
delButton.setAttribute("id","delete");
delButton.setAttribute("value","delete");
return delButton;
},
function(data){
var idd = data.id;
var editButton = document.createElement("<INPUT TYPE='button' onclick='editPerson("+ idd +")'>");
editButton.setAttribute("name","edit");
editButton.setAttribute("value","edit");
return editButton;
}
];
DWRUtil.removeAllRows('tabId');
DWRUtil.addRows('tabId', data,cellfuncs,{
rowCreator:function(options) {
var row = document.createElement("tr");
var index = options.rowIndex * 50;
row.setAttribute("id",options.rowData.id);
row.style.collapse = "separate";
row.style.color = "rgb(" + index + ",0,0)";
return row;
},
cellCreator:function(options) {
var td = document.createElement("td");
var index = 255 - (options.rowIndex * 50);
//td.style.backgroundColor = "rgb(" + index + ",255,255)";
td.style.backgroundColor = "menu";
td.style.fontWeight = "bold";
td.style.align = "center";
return td;
}
});
document.getElementById("bt").style.display = "none";
}
function userList(data){ //var delButton = "<input type='button'/>"; //var editButton = "<input type='button'/>"; var cellfuncs = [ function(data){return data.id;}, function(data){return data.userName;}, function(data){return data.userTrueName;}, function(data){return data.birthday;}, function(data){ var idd = data.id;var delButton = document.createElement("<INPUT TYPE='button' onclick='delPerson("+ idd +")'>"); delButton.setAttribute("id","delete"); delButton.setAttribute("value","delete"); return delButton; }, function(data){ var idd = data.id; var editButton = document.createElement("<INPUT TYPE='button' onclick='editPerson("+ idd +")'>"); editButton.setAttribute("name","edit"); editButton.setAttribute("value","edit"); return editButton; } ]; DWRUtil.removeAllRows('tabId'); DWRUtil.addRows('tabId', data,cellfuncs,{ rowCreator:function(options) { var row = document.createElement("tr"); var index = options.rowIndex * 50; row.setAttribute("id",options.rowData.id); row.style.collapse = "separate"; row.style.color = "rgb(" + index + ",0,0)"; return row; }, cellCreator:function(options) { var td = document.createElement("td"); var index = 255 - (options.rowIndex * 50); //td.style.backgroundColor = "rgb(" + index + ",255,255)"; td.style.backgroundColor = "menu"; td.style.fontWeight = "bold"; td.style.align = "center"; return td; } }); document.getElementById("bt").style.display = "none"; }
待續(xù)…………………………………………
/********************************************************************************/
/***********************QQ: 171505924 Gump **************************************/
/********************************************************************************/
4、getText 取得text屬性值
DWRUtil.getText(id): 用來獲得 option 中的文本
比如：
Java代碼
<select id="select">
<option value="1"> 蘋果 </option>
<option value="2" select> 香蕉 </option>
<option value="3"> 鴨梨 </option>
</select>
<select id="select"> <option value="1"> 蘋果 </option> <option value="2" select> 香蕉 </option> <option value="3"> 鴨梨 </option> </select>
調(diào)用 DWRUtil.getText("select"); 將返回 "香蕉" 字段；
DWRUtil.getText(id)；僅僅是用來獲得 select 文本值，其他不適用。
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
5、DWRUtil.getValue(id): 用來獲得 form 表單值
有如下幾種情況：
Java代碼
Text area (id="textarea"): DWRUtil.getValue("textarea")將返回 Text area的值;
Selection list (id="select"): DWRUtil.getValue("select") 將返回 Selection list 的值;
Text input (id="text"): DWRUtil.getValue("text") 將返回 Text input 的值;
Password input (id="password"): DWRUtil.getValue("text") 將返回 Password input 的值;
Form button (id="formbutton"): DWRUtil.getValue("formbutton") 將返回 Form button 的值;
Fancy button (id="button"): DWRUtil.getValue("formbutton") 將返回 Fancy button 的值;
Text area (id="textarea"): DWRUtil.getValue("textarea")將返回 Text area的值; Selection list (id="select"): DWRUtil.getValue("select") 將返回 Selection list 的值; Text input (id="text"): DWRUtil.getValue("text") 將返回 Text input 的值; Password input (id="password"): DWRUtil.getValue("text") 將返回 Password input 的值; Form button (id="formbutton"): DWRUtil.getValue("formbutton") 將返回 Form button 的值; Fancy button (id="button"): DWRUtil.getValue("formbutton") 將返回 Fancy button 的值;
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
6、getValues 取得form多個值
批量獲得頁面表單的值,組合成數(shù)組的形式,返回 name/value;
例如: form():
Java代碼
<input type="textarea" id="textarea" value="1111"/>
<input type="text" id="text" value="2222"/>
<input type="password" id= "password" value="3333"/>
<select id="select">
<option value="1"> 蘋果 </option>
<option value="4444" select> 香蕉 </option>
<option value="3"> 鴨梨 </option>
</select>
<input type="button" id="button" value="5555"/>
那么: DWRUtil.getValues({textarea:null,select:null,text:null,password:null,button:null})
將返回 ^^^^^^^^^^^^^^^^{textarea:1111,select:4444,text:2222,password:3333,button:5555}
<input type="textarea" id="textarea" value="1111"/> <input type="text" id="text" value="2222"/> <input type="password" id= "password" value="3333"/> <select id="select"> <option value="1"> 蘋果 </option> <option value="4444" select> 香蕉 </option> <option value="3"> 鴨梨 </option> </select> <input type="button" id="button" value="5555"/> 那么: DWRUtil.getValues({textarea:null,select:null,text:null,password:null,button:null}) 將返回 ^^^^^^^^^^^^^^^^{textarea:1111,select:4444,text:2222,password:3333,button:5555}
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
7、DWRUtil.onReturn 防止當(dāng)在文本框中輸入后，直接按回車就提交表單。
<input type="text" onkeypress="DWRUtil.onReturn(event, submitFunction)"/>
<input type="button" onclick="submitFunction()"/>
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
8、DWRUtil.selectRange(ele, start, end);
在一個input box里選一個范圍
Java代碼
DWRUtil.selectRange("sel-test", $("start").value, $("end").value);
比如:<input type="text" id="sel-test" value="012345678901234567890">
DWRUtil.selectRange("sel-test", 2, 15);
DWRUtil.selectRange("sel-test", $("start").value, $("end").value); 比如:<input type="text" id="sel-test" value="012345678901234567890"> DWRUtil.selectRange("sel-test", 2, 15);
結(jié)果 文本框中的值"2345678901234"將被選中'
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
9、DWRUtil.setValue(id,value);
為指定的id元素,設(shè)置一個新值;
/******************************************************************************/
10、DWRUtil.setValues({
name: "fzfx88",
password: "1234567890"
}
); 同上,批量更新表單值.
/******************************************************************************/
11、DWRUtil.toDescriptiveString()
帶debug信息的toString，第一個為將要debug的對象，第二個參數(shù)為處理等級。等級如下：
0: Single line of debug 單行調(diào)試
1: Multi-line debug that does not dig into child objects 不分析子元素的多行調(diào)試
2: Multi-line debug that digs into the 2nd layer of child objects 最多分析到第二層子元素的多行調(diào)試
<input type="text" id="text">
DWRUtil。toDescriptiveString("text",0);
/******************************************************************************/
12、DWRUtil.useLoadingMessage();
當(dāng)發(fā)出ajax請求后,頁面顯示的提示等待信息;
Java代碼
function searchUser(){
var loadinfo = "loading....."
try{
regUser.queryAllUser(userList);
DWRUtil.useLoadingMessage(loadinfo);
}catch(e){
}
}
posted on 2009-11-03 10:41
junly 閱讀(746)
評論(0) 編輯 收藏 所屬分類:
ajax/jquery/js