DWR中Util.js常用方法收集

DWR中Util.js常用方法收集

1、  取元素操作符: $() / byId()

等同于document.getElementById() ,注意，不能代替documents.getElementsByName()[0]，

除了IE6可以。

例如：

$('in') = document.getElementById('in')

如果你这样写：

<input type="text" name=”test3” value="test3 ok!"/>

alert ($(“test3”));

则会抛出一个null的异常！

2、  取值: getValue()  /  getValues()  /  getText()

getValue可以取出form中各元素的值，其中参数是个元素的id值（checkbox和radio除外）

其中：

text ，button，file，hidden，password（明文）：取得直接是value

select：如果是多选的话，会全部返回，并以逗号分隔

textarea，div，p，span，href，option（不是取的value），h1等：取的是起始结束标签之间的值

checkbox，radio（使用的参数是id）：选中返回true，不选返回false

checkbox，radio（使用的参数是name）：返回选中的值，多值以逗号分隔

注意：checkbox，radio同时又id和name时，优先使用的是id

 

getText()和getVale()基本一样，只有个别元素取的数据不同，select元素中使用getText取得是select的text属性而不是value。

 

getValues()和getValue()类似，都是取元素的值，但使用的方法上却大不相同。

getValues()接收的参数是id-value的键值对或者form元素

例如：          

var user={userName:null,userPassword:null};

DWRUtil.getValues(user);

           或者

var user = DWRUtil.getValues({userName:null,userPassword:null});

值不一定是null，但我尝试了一下，即使定义了初始值，貌似也没有作用，提交的时候仍然会使用表单元素的值。

它将对应的元素id和值放入user中，user是一个类似map的结构，在dwr.xml可以将其定义成bean类型（比较简单，用的比较多），例如

<convert converter="bean" match="logic.UserBean"/>

然后，在这个bean中定义userName，和userPassword两个字段，在使用调用后台方法时就可以使用对应的get方法了。

另一种使用方法是

var user = DWRUtil.getValues(“myform”);

这边的myform是表单的id名，返回的user是表单中所有元素（好像image什么的没用）的id-value对，下面用法就和上边那种一样了。

 

3、  赋值 setValue() / setValues()

Set和get使用的方法比较类似。例如：

DWRUtil.setValue("x","<H1>test ok</H1>");

其中x是表单元素id，后面是要赋的值。

官方文档上说明了一个参数：

DWRUtil.setValue("x","<H1>test ok</H1>",{ escapeHtml:false });

只带了赋的值带有html标签，如果没有加入{ escapeHtml:false }这个参数，则认为赋予的值中间的标签只是字符串，不当作html看待。

SetValue() 大致上的使用方法可以参照getvalue()，注意的是，如果是用select（多选的情况），checkbox，radio，想要赋多值的情况，使用的方法是：

DWRUtil.setValue("test2",["1","2"]);

其中test2是表单元素名，1，2分别是其中的两个选项的值，radio赋多个值，会选择最后一个。例如：

setValues()可以一次性赋多个值，使用JavaScript对象作为参数，例如：

DWRUtil.setValues({userName:"test1",userPassword:"test2"});、

 

4、  对select的操作 adoptions() / removeAllOtions()

addoptions()是指给select、li增加下拉框的元素。有几种方式：

select、li通用：DWRUtil.addOptions(id,array);直接增加多个元素，name-value值相等，例如：

DWRUtil.addOptions("ultest",["test1","test2"]);

select、li通用：DWRUtil.addOptions(id,array,name);对于select来说，name-value值相等，例如：

DWRUtil.addOptions("seltest",[{name1:"test1",name2:"test2"}],"name1");

select单独：DWRUtil.addOptions(id,array,value,name);这种方式可以指定name和value的值：例如

DWRUtil.addOptions("seltest",[{name1:"test1",name2:"test2"}],"name1","name2");

li单独：可以定义显示的格式，首先定义一个格式函数：

function formatter(entry) { return "data=" + entry; }

然后使用DWRUtil.addOptions(id,array,format)格式，注意后面可以加入{ escapeHtml:false }转义html字符，例如：

DWRUtil.addOptions("ultest",["test1","test2"],formatter);

Select单独：DWRUtil.addOptions(id,map,[reverse])，其中数据存储为map模式，这种模式可以方便的调用后台的数据。其中reverse指的是name-value对反转，默认为false，即map的key为option的value，map 的value为option的text。

例如：

JS代码：

         function click_addoption(){

                    adduserAction.addoption(function(data){

                             DWRUtil.addOptions("seltest",data);

                    });

             }

Java代码：

public Map<String,String> addoption(){

           Map<String,String> map = new Hashtable<String,String>();

           map.put("test1", "1");

           map.put("test2", "2");

           map.put("test3", "3");

           return map;

}

 

removeAllOtions()没有什么好讲的，直接清除所有的option元素。例如：

DWRUtil.removeAllOptions("seltest");

 

5、  onReturn()

官方文档的解释是为了避免不同触发事件之间的差异性，引入了onReturn函数。

这是官方的例子：

<input type="text"

    οnkeypress="DWRUtil.onReturn(event, submitFunction)"/>

<input type="button" οnclick="submitFunction()"/>

这里在text中按键将会得到点击按钮同样的效果。

其实官方没讲清楚，看下源代码：

/**

 * Enables you to react to return being pressed in an input

 * @see http://getahead.org/dwr/browser/util/selectrange

 */

dwr.util.onReturn = function(event, action) {

  if (!event) event = window.event;

  if (event && event.keyCode && event.keyCode == 13) action();

};

就是说加了onReturn后，如果在input元素中按回车（13）的话，就会触发后面的函数，而其他的不会，节省了重复代码的编写量。这个在提交的情况用的多些。

 

6、  selectRange（）

选中input域中的字串，第一个字符是0，选中的范围为(start) – (end-1)

例如：

    <input id="range" value="12345678"/>

    DWRUtil.selectRange("range",2,5)

345会被选中。

7、  addRows() / removeAllRows()

对表格的操作函数。

addRows的函数格式为DWRUtil.addRows(id, array, cellfuncs, [options]);

其中id指的是域的id号，array指的是数据数组，cellfuncs值得是每一列的生产函数，options可以定义行、列的生成样式以及html字符过滤。

例如下面的例子：

        function addrow(){

            var data = ["1","2","3","4"];

            var count = 1;

                    DWRUtil.addRows("tabletest",data,[function(data){return count++} , function(data){return data}] , {

                             rowCreator:function(){  // 自定义tr样式

                                       var row = document.createElement("tr");

                                       //row.style.XXX = XXX

                                       return row;

                             },

                             cellCreator:function(){  // 自定义td样式

                                       var cell = document.createElement("td");

                                       cell.className = "tab_td2";

                                       //cell.style.XXX = XXX

                                       return cell;

                             }

                    });

        }

         注意的是，array数组可以使普通的字符串数组，也可以是map数组等等。

removeAllRows()就比较简单了，直接删除所有的行。参数是table 的id号。

还要注意一点，官方建议使用tbody的id号而不是直接使用table的id号。

 

8、  toDescriptiveString 

官方的debug函数，格式很简单：DWRUtil. toDescriptiveString (id，level)

Id指的是元素id，变量id等等，level指输出的信息的多少，从0到3依次增多。

例如：

alert(DWRUtil. toDescriptiveString(ultest,1));

 

9、  useLoadingMessage

提交时、载入时会在右上角显示“载入中”等字样，完全仿照Gmail中的载入。使用方法例如：

DWRUtil.useLoadingMessage("请稍等");

据官方文档说，useLoadingMessage在使用时可能有限制，不过测试过ie6、firefox、chrome、opera后还是比较正常的。

简单的改造后官方给出了载入图片的函数：

function useLoadingImage(imageSrc) {

  var loadingImage;

  if (imageSrc) loadingImage = imageSrc;

  else loadingImage = "ajax-loader.gif";

  dwr.engine.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';

    }

  });

  dwr.engine.setPostHook(function() {

    $('disabledImageZone').style.visibility = 'hidden';

  });

}

不过我测试的版本dwr2中还没有加入。