DWR util.js 学习笔记 整理

util.js包含一些有用的函数function,用于在客户端页面调用，它可以和dwr分开，独立营用于你的系统中。

主要功能如下：
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");
***************************************************************************************
//////////////////////////////////////////////////////////////////////////////////////
****************************************************************************************
2、用于填充 select 下拉框 option
  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 值
      例如:
       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属性，对应下拉框中显示的哪个值.

     @ 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>这样的heml元素

***************************************************************************************
//////////////////////////////////////////////////////////////////////////////////////
****************************************************************************************
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：
        public class person {
     private string name;
     private integer id;
     pirvate string address;
     public void set(){……}
     public string get(){……}
       }

    下面用  dwrutil.addrows(); 
   /**************************************************************************************/
   /****************** 胡国清***********[e-mail]********************************/
   /**************************************************************************************/

   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";
     }
     待续…………………………………………
   /**************************************************************************************/
   /**************************************************************************************/
   /**************************************************************************************/
   4、gettext  取得text属性值

      dwrutil.gettext(id): 用来获得 option 中的文本
      比如：
       <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 表单值

      有如下几种情况：
          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 防止当在文本框中输入后，直接按回车就提交表单。

     <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); 结果 文本框中的值"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请求后,页面显示的提示等待信息;

    function searchuser(){
    var loadinfo = "loading....."
    try{
        reguser.queryalluser(userlist);
        dwrutil.useloadingmessage(loadinfo);        
    }catch(e){

    }
    }

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