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();  
   /**************************************************************************************/ 
   /****************** 胡国清***********fzfx88@hotmail.com********************************/ 
   /**************************************************************************************/ 

   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 in

上一个：一个简单的ASP+AJAX留言本源码下载
下一个：Ajax 无刷新在注册用户名时的应用的代码