DWRUtil提供的方法

DWR是ajax的一種框架,配置簡單且提供了不少封裝好的方法用於dom操做,除非很是複雜的功能咱們須要使用原生態的javascript來實現。

下面給一個很經常使用的小例子(獲取全部的省的名稱並填充到option標籤中):javascript

js代碼:java

function getProvince()
{ajax

var data={「河南」,」河北」,」…」}
if (typeof window['DWRUtil'] == 'undefined')
{
  window.DWRUtil = dwr.util;
}
DWRUtil.removeAllOptions("provinceselect")
DWRUtil.addOptions("provinceselect",data);
}數組

說明:provinceselect是selectid;框架

下面列舉一下DWRUtil中提供的方法:dom

$();函數

功能:至關於document.getElementById(id);debug

參數: id或name屬性值;調試

例:對象

<input type=」text」 name=」txt_test」></input>

<script>

       Var ele=$(txt_test);

       Var str=DWRUtil.toDescriptiveString(ele,1)

       DWRUtil.debug(str);

</script>

DWRUtil.getValue();

功能:得到指定元素value值

參數: id或name屬性值;

注意:該函數只能用於有value屬性的元素

例:

<input type=」text」 name=」txt_test」></input>

<script>

       var val=DWRUtil.getValue(「txt_test」);

       DWRUtil.debug(val);

</script>

DWRUtil.getValues();

功能:得到一組指定元素的value值;

參數:id或name構成的數組對象

例:

<input type=」text」 name=」txt_name」 value=」wiley」></input>

<input type=」text」 name=」txt_pswd」 value=」wiley」></input>

<script>

       Var arr_=DWRUtil.getValues({「txt_name」:null,」txt_pswd」:null});

       Var str=DWRUtil.toDescriptiveString(arr,1)

       DWRUtil.debug(str);

</script>

DWRUtil.setValue();

功能:設置指定元素的value值

參數: id或name屬性值

<input type=」text」 name=」txt_test」 value=」」></input>

<script>

       DWRUtil.setValue(「txt_test」,」wiley」);

</script>

DWRUtil.setValues();

功能:設置一組指定元素的值

參數: id或name構成的數組對象

例:

<input type=」text」 name=」txt_name」 value=」」></input>

<input type=」text」 name=」txt_pswd」 value=」」></input>

<script>

       DWRUtil.setValues({「txt_name」:」wiley」,」txt_pswd」:」wiley」});

</script>

DWRUtil.getText();

功能:得到select元素的文本值

參數: id或name屬性值

例:

<select name=」sel_test」>

       <option value=」 wiley-cn.com」 selected>wiley中國</option>

</select>

<script>

       Var txt=DWRUtil.getText (「sel_test」);

       Var val=DWRUtil.getValue(「sel_test」);

       DWRUtil.debug(「Text:」+txt+」\tValue:」+val);

</script>

DWRUtil.addRows();

功能:指定表格添加行

格式:DWRUtil.addRows(id,items, functions);

參數:

第一個參數:table或tbody的id屬性值

第二個參數:數組或鏈表(可能用詞不是很適合)

第三個參數:函數鏈表

例1:

<table>

       <tr>

              <td>主題</td>

       <tr>

       <tbody id=」tby_test」>

</tbody>

</table>

<script>

       Var arr_={「wiley’s blog」,」wiley中國」};

       DWRUtil.addRows(「tby_test」,arr_,[function(arr_){return arr_}]);

</script>

例2:

<table>

       <tr>

              <td>名稱</td>

              <td>網址</td>

       <tr>

       <tbody id=」tby_test」>

</tbody>

</table>

<script>

       Var items=[{「name」:」wiley中國」,」add」:」wiley-cn.com」}];

       DWRUtil.addRows(「tby_test」,items,[function(item){return item.name}, function(item){return item.add}]);

</script>

DWRUtil.romoveAllRows();

功能:刪除指定表格行

參數:table或tbody的id屬性值

<table>

       <tr>

              <td>名稱</td>

              <td>網址</td>

       <tr>

       <tbody id=」tby_test」>

</tbody>

</table>

<script>

       DWRUtil.romoveAllRows(「tby_test」);//每次添加前將原有數據行刪除,防止數據重疊

       Var items=[{「name」:」wiley中國」,」add」:」wiley-cn.com」}];

       DWRUtil.addRows(「tby_test」,items,[function(item){return item.name}, function(item){return item.add}]);

</script>

DWRUtil.addOptions();

功能:添加select元素的option子元素

格式:DWRUtil.addOption(id,items)或DWRUtil.addOption(id,items,valueProp,textProp);

參數:

第一個參數:select的id或name屬性值

第二個參數:數組或鏈表(填充數據)

第3、四個參數:鏈表節點的屬性,第三個填充value值,第四個填充text值

例:

<select name=」sel_test」>

</select>

<script>

       Var arr_={「wiley」,」wiley中國」};

       DWRUtil.addRows(「sel_test」,arr_);//此時value與text值相同

       DWRUtil.romoveAllOptions(「sel_test」);

       Var items=[{「name」:」wiley中國」,」add」:」wiley-cn.com」}];

       DWRUtil.addRows(「sel_test」,」add」,」name」);//此時value與text不相同

</script>

DWRUtil.romoveAllOptions();

功能:刪除指定select元素的option子元素

參數:select元素的id或name屬性值

例:前面例子有用到

DWRUtil.debug();

功能:等價於alert()

例:前面例子有用到

DWRUtil.toDescriptiveString();

功能:將對象序列化成字符串,主要用於調試

相關文章
相關標籤/搜索