隨筆-124 評論-49 文章-56 trackbacks-0

util.js包含一些有用的函數function,用于在客戶端頁面調用.

主要功能如下：

代碼

1、$() 獲得頁面參數值
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、$()函數
   IE5.0 不支持
   $ = document.getElementById
   取得form表單值
   var name = $("name");

代碼

a、如果你想在更新select 時，想保存原來的數據，即在原來的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: 簡單數組
     例如:
     Array array = new Array[ 'Africa', 'America', 'Asia', 'Australasia', 'Europe' ]；
     DWRUtil.addOptions("demo1",array);

代碼

@ Simple Object Array Example 簡單數組,元素為beans
       這種情況下,你需要指定要顯示 beans 的 property 以及對應的 bean 值
       例如:

代碼

@ 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 對應 map keys，text 對應 map values；

代碼

@ <ul> and <ol> list editing

        DWRUtil.addOptions() 函數不但可以填出select,并可以填出<ul>和<ol>這樣的html元素

3、addRows and removeAllRows 填充表格

DWR 提供2個函數來操作 table；

----------------------------

DWRUtil.addRows(); 添加行

----------------------------

DWRUtil.removeAllRows(id); 刪除指定id的table

----------------------------

下面著重看一下 addRows() 函數：

DWRUtil.addRows(id, array, cellfuncs, [options]);

其中id 對應 table 的 id(更適合tbody，推薦使用 tbody)

array 是server端服務器的返回值，比如list，map等等

cellfuncs 及用返回值來填充表格

[options] 用來設置表格樣式，它有2個內部函數來設置單元格樣式(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();

代碼

DWRUtil.getText(id): 用來獲得 option 中的文本

比如：

代碼

調用 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多個值

批量獲得頁面表單的值,組合成數組的形式,返回 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 防止當在文本框中輸入后，直接按回車就提交表單。

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元素,設置一個新值;

10、DWRUtil.setValues({

name: "fzfx88",

password: "1234567890"

}

); 同上,批量更新表單值.

/***********************************************************************/

11、DWRUtil.toDescriptiveString()

帶debug信息的toString，第一個為將要debug的對象，第二個參數為處理等級。等級如下：

0: Single line of debug 單行調試

1: Multi-line debug that does not dig into child objects 不分析子元素的多行調試

2: Multi-line debug that digs into the 2nd layer of child objects 最多分析到第二層子元素的多行調試

DWRUtil。toDescriptiveString("text",0);

/******************************************************************************/

12、DWRUtil.useLoadingMessage();

當發出ajax請求后,頁面顯示的提示等待信息;

代碼

    function searchUser(){
var loadinfo = "loading....."
try{
     regUser.queryAllUser(userList);
     DWRUtil.useLoadingMessage(loadinfo);
}catch(e){

}
    }

-----------------------------------------------------------------------------------------
2008-05-20 16:58功能函數：

$()
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
修補瀏覽器事件
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, map, valueprop, 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, 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 (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 代碼
<input type="text" onkeypress="DWRUtil.onReturn(event, submitFunction)">
<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 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風格的加載消息。

這個方法將來可能被廢棄，因為這個實現實在太專斷了。為什么是紅色，為什么在右上角，等等。唯一的真正答案就是：抄襲GMail。這里的建議是以本頁面中的代碼為模板，根據你的需求自定義。

你必須在頁面加載以后調用這個方法(例如，不要在onload()事件觸發之前調用)，因為它要創建一個隱藏的div來容納消息。

最簡單的做法時在onload事件中調用DWRUtil.useLoadingMessage，像這樣：

js 代碼
function init() {
DWRUtil.useLoadingMessage();
}

可能有些情況下你是不能容易的編輯header和body標簽(如果你在使用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;
}

下面這些是這個函數的代碼，它對于你要實現自己的加載消息很有用。這個函數的主要內容是動態創建一個div(id是disabledZone)來容納消息。重要的代碼是當遠程調用時使它顯示和隱藏：

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、修補瀏覽器事件
如果你創建了一個DOM元素，然后用addAttribute在這個元素上創建了一個事件，那么他們不能被正常的觸發。你可以使用下面的腳本來遍歷一個DOM樹，并重新為他們綁定事件，這樣他們就能正常的觸發了。

把'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", , )

現有輸入框 <input type=text id="sel-test" value="0123456789">, 則點擊按鈕時4567被選中: 0123456789

----------------------------------------------------------------------------------------------

2008-04-11 20:161、$() 獲得頁面參數值
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、$() 獲得頁面參數值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、$()函數
IE5.0 不支持
$ = document.getElementById
取得form表單值
var name = $("name");
1、$()函數 IE5.0 不支持 $ = document.getElementById 取得form表單值 var name = $("name");

***********************************************************************************
///////////////////////////////////////////////////////////////////////////////////
***********************************************************************************
2、用于填充 select 下拉框 option

Java代碼
a、如果你想在更新select 時，想保存原來的數據，即在原來的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 時，想保存原來的數據，即在原來的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: 簡單數組
    例如:
    Array array = new Array[ 'Africa', 'America', 'Asia', 'Australasia', 'Europe' ]；
    DWRUtil.addOptions("demo1",array);
@ Simple Array Example: 簡單數組      例如:      Array array = new Array[ 'Africa', 'America', 'Asia', 'Australasia', 'Europe' ]；      DWRUtil.addOptions("demo1",array);

Java代碼
@ Simple Object Array Example 簡單數組,元素為beans
      這種情況下,你需要指定要顯示 beans 的 property 以及對應的 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中對應value，name指向bean的name屬性，對應下拉框中顯示的哪個值.
@ Simple Object Array Example 簡單數組,元素為beans      這種情況下,你需要指定要顯示 beans 的 property 以及對應的 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中對應value，name指向bean的name屬性，對應下拉框中顯示的哪個值.

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 對應 map keys，text 對應 map values；
@ Map Example 用制定的map來填充 options:       如果 server 返回 Map,呢么這樣處理即可：       DWRUtil.addOptions( "demo3",map);       其中 value 對應 map keys，text 對應 map values；

Java代碼
@ <ul> and <ol> list editing

       DWRUtil.addOptions() 函數不但可以填出select,開可以填出<ul>和<ol>這樣的heml元素
@ <ul> and <ol> list editing            DWRUtil.addOptions() 函數不但可以填出select,開可以填出<ul>和<ol>這樣的heml元素

***********************************************************************************
///////////////////////////////fzfx88@163.com//////////////////////////////////////
***********************************************************************************
3、addRows and removeAllRows 填充表格
DWR 提供2個函數來操作 table；
----------------------------
DWRUtil.addRows(); 添加行
----------------------------
DWRUtil.removeAllRows(id); 刪除指定id的table
----------------------------
下面著重看一下 addRows() 函數：

DWRUtil.addRows(id, array, cellfuncs, [options]);
其中id 對應 table 的 id(更適合tbodye，推薦使用 tbodye)
array 是server端服務器的返回值，比如list，map等等
cellfuncs 及用返回值來天春表格
[options] 用來設置表格樣式，它有2個內部函數來設置單元格樣式(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";     }

待續…………………………………………
/********************************************************************************/
/***********************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>

調用 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多個值
批量獲得頁面表單的值,組合成數組的形式,返回 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 防止當在文本框中輸入后，直接按回車就提交表單。

/******************************************************************************/
/******************************************************************************/
/******************************************************************************/

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);
結果文本框中的值"2345678901234"將被選中'

/******************************************************************************/
/******************************************************************************/
/******************************************************************************/

9、DWRUtil.setValue(id,value);
為指定的id元素,設置一個新值;
/******************************************************************************/
10、DWRUtil.setValues({
name: "fzfx88",
password: "1234567890"
}
); 同上,批量更新表單值.
/******************************************************************************/

11、DWRUtil.toDescriptiveString()

帶debug信息的toString，第一個為將要debug的對象，第二個參數為處理等級。等級如下：

0: Single line of debug 單行調試
1: Multi-line debug that does not dig into child objects 不分析子元素的多行調試
2: Multi-line debug that digs into the 2nd layer of child objects 最多分析到第二層子元素的多行調試

<input type="text" id="text">
DWRUtil。toDescriptiveString("text",0);
/******************************************************************************/

12、DWRUtil.useLoadingMessage();
當發出ajax請求后,頁面顯示的提示等待信息;

Java代碼
   function searchUser(){
var loadinfo = "loading....."
try{
    regUser.queryAllUser(userList);
    DWRUtil.useLoadingMessage(loadinfo);
}catch(e){

}
}

posted on 2009-11-03 10:41 junly 閱讀(752) 評論(0) 編輯收藏所屬分類: ajax/jquery/js

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: Useing Jquery With JSF js巧用qq接口得到當前IP jquery radio取值，checkbox取值，select取值，radio選中，checkbox選中，select選中 jQuery-強大的jQuery選擇器 (詳解)[轉] 給Dreamweaver安裝jQuery插件jQuery_API.mxp ajax 書簽 LavaLamp mean 事件顯示聲明 javascript語法_函數_對象_數組 javascript DOM