DWR util.js 整理(DWR 处理各种form表单Select/option,table等,List,Bean

转载 2012年03月29日 16:50:59
DWR  util.js 学习笔记
/********************/

/********************/
util.js包含一些有用的函数function,用于在客户端页面调用.
主要功能如下:
Java代码  收藏代码
  1. 1、$() 获得页面参数值  
  2. 2、addOptions and removeAllOptions 初始化下拉框  
  3. 3、addRows and removeAllRows  填充表格  
  4. 4、getText  取得text属性值  
  5. 5、getValue 取得form表单值  
  6. 6、getValues 取得form多个值  
  7. 7、onReturn    
  8. 8、selectRange  
  9. 9、setValue  
  10. 10、setValues  
  11. 11、toDescriptiveString  
  12. 12、useLoadingMessage  
  13. 13、Submission box  


*********************************************************************
//////////////////////http://blog.163.com/fzfx888//////////////////////////
*********************************************************************
Java代码  收藏代码
  1. 1、$()函数  
  2.   IE5.0 不支持  
  3.   $ = document.getElementById  
  4.   取得form表单值  
  5.   var name = $("name");  

***********************************************************************************
///////////////////////////////////////////////////////////////////////////////////
***********************************************************************************
2、用于填充 select 下拉框 option
Java代码  收藏代码
  1. a、如果你想在更新select 时,想保存原来的数据,即在原来的select中添加新的option:  
  2.     var sel = DWRUtil.getValue(id);  
  3.     DWRUtil.removeAllOptions(id);  
  4.     DWRUtil.addOptions(id,...);  
  5.     DWRUtil.setValue(id,sel);  
  6.     demo:比如你想添加一个option:“--请选择--”  
  7. DWRUtil.addOptions(id,["--请选择--"]);   
  8.   
  9.    DWRUtil.addOptions()有5中方式:  
   
 
Java代码  收藏代码
  1. @ Simple Array Example: 简单数组  
  2.     例如:  
  3.     Array array = new Array[ 'Africa''America''Asia''Australasia''Europe' ];  
  4.     DWRUtil.addOptions("demo1",array);  

   
Java代码  收藏代码
  1. @ Simple Object Array Example 简单数组,元素为beans  
  2.       这种情况下,你需要指定要显示 beans 的 property 以及 对应的 bean 值  
  3.       例如:  
  4.        public class Person {  
  5.      private String name;  
  6.      private Integer id;  
  7.      pirvate String address;  
  8.      public void set(){……}  
  9.      public String get(){……}  
  10.        }  
  11.        DWRUtil.addOptions("demo2",array,'id','name');  
  12.        其中id指向及bean的id属性,在optiong中对应value,name指向bean的name属性,对应下拉框中显示的哪个值.  

    
Java代码  收藏代码
  1. @ Advanced Object Array Example 基本同上  
  2.     DWRUtil.addOptions( "demo3",   
  3.                 [{ name:'Africa', id:'AF' },  
  4.                  { name:'America', id:'AM' },  
  5.                  { name:'Asia', id:'AS' },  
  6.                  { name:'Australasia', id:'AU' },  
  7.                  { name:'Europe', id:'EU' }  
  8.         ],'id','name');  
    
    
Java代码  收藏代码
  1. @ Map Example 用制定的map来填充 options:  
  2.        如果 server 返回 Map,呢么这样处理即可:  
  3.        DWRUtil.addOptions( "demo3",map);  
  4.        其中 value 对应 map keys,text 对应 map values;  

    
Java代码  收藏代码
  1. @ <ul> and <ol> list editing  
  2.        
  3.        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代码  收藏代码
  1.       public class Person {  
  2. private String name;  
  3. private Integer id;  
  4. pirvate String address;  
  5. public void set(){……}  
  6. public String get(){……}  
  7.      }  
        
    下面用  DWRUtil.addRows();
/******************************************************************************/
/****************** ***********fzfx88@hotmail.com********************************/
/*********************************************************************************/

Java代码  收藏代码
  1.    function userList(data){  
  2.     //var delButton = "<input type='button'/>";  
  3.     //var editButton = "<input type='button'/>";  
  4.     var cellfuncs = [  
  5.         function(data){return data.id;},  
  6.         function(data){return data.userName;},  
  7.         function(data){return data.userTrueName;},  
  8.         function(data){return data.birthday;},  
  9.         function(data){  
  10.         var idd = data.id;  
  11. var delButton = document.createElement("<INPUT TYPE='button' onclick='delPerson("+ idd +")'>");  
  12.             delButton.setAttribute("id","delete");  
  13.             delButton.setAttribute("value","delete");  
  14.             return delButton;  
  15.         },  
  16.         function(data){  
  17.             var idd = data.id;  
  18.             var editButton = document.createElement("<INPUT TYPE='button' onclick='editPerson("+ idd +")'>");  
  19.             editButton.setAttribute("name","edit");  
  20.             editButton.setAttribute("value","edit");              
  21.             return editButton;  
  22.         }  
  23.     ];  
  24.     DWRUtil.removeAllRows('tabId');   
  25.     DWRUtil.addRows('tabId', data,cellfuncs,{  
  26.     rowCreator:function(options) {  
  27.         var row = document.createElement("tr");  
  28.         var index = options.rowIndex * 50;  
  29.         row.setAttribute("id",options.rowData.id);  
  30.         row.style.collapse = "separate";  
  31.         row.style.color = "rgb(" + index + ",0,0)";  
  32.         return row;  
  33.     },  
  34.     cellCreator:function(options) {  
  35.         var td = document.createElement("td");  
  36.         var index = 255 - (options.rowIndex * 50);  
  37.         //td.style.backgroundColor = "rgb(" + index + ",255,255)";  
  38.         td.style.backgroundColor = "menu";  
  39.         td.style.fontWeight = "bold";  
  40.         td.style.align = "center";  
  41.         return td;  
  42.     }         
  43.     });  
  44.     document.getElementById("bt").style.display = "none";  
  45.      }  

     待续…………………………………………
/********************************************************************************/
/***********************QQ: 171505924 Gump **************************************/
/********************************************************************************/
   4、getText  取得text属性值
     
      DWRUtil.getText(id): 用来获得 option 中的文本
      比如:
Java代码  收藏代码
  1.       <select id="select">  
  2. <option  value="1"> 苹果 </option>  
  3. <option  value="2" select> 香蕉 </option>  
  4. <option  value="3"> 鸭梨 </option>  
  5.       </select>  

      调用 DWRUtil.getText("select"); 将返回 "香蕉" 字段;
      DWRUtil.getText(id);仅仅是用来获得 select 文本值,其他不适用。
   /******************************************************************************/
   /******************************************************************************/
   /******************************************************************************/

   5、DWRUtil.getValue(id): 用来获得 form 表单值
     
      有如下几种情况:
Java代码  收藏代码
  1.        Text area (id="textarea"): DWRUtil.getValue("textarea")将返回 Text area的值;  
  2. Selection list (id="select"): DWRUtil.getValue("select") 将返回 Selection list 的值;  
  3. Text input (id="text"): DWRUtil.getValue("text") 将返回 Text input 的值;  
  4. Password input (id="password"): DWRUtil.getValue("text") 将返回 Password input 的值;  
  5. Form button (id="formbutton"): DWRUtil.getValue("formbutton") 将返回 Form button 的值;  
  6. Fancy button (id="button"): DWRUtil.getValue("formbutton") 将返回 Fancy button 的值;  

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

   6、getValues 取得form多个值
      批量获得页面表单的值,组合成数组的形式,返回 name/value;

      例如: form():
Java代码  收藏代码
  1.      <input type="textarea" id="textarea" value="1111"/>  
  2.       <input type="text" id="text" value="2222"/>  
  3.       <input type="password" id= "password" value="3333"/>  
  4.       <select id="select">  
  5. <option  value="1"> 苹果 </option>  
  6. <option  value="4444" select> 香蕉 </option>  
  7. <option  value="3"> 鸭梨 </option>  
  8.       </select>  
  9.       <input type="button" id="button" value="5555"/>  
  10.        
  11.      那么: DWRUtil.getValues({textarea:null,select:null,text:null,password:null,button:null})  
  12.      将返回  ^^^^^^^^^^^^^^^^{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里选一个范围
Java代码  收藏代码
  1. DWRUtil.selectRange("sel-test", $("start").value, $("end").value);  
  2.   
  3. 比如:<input type="text" id="sel-test" value="012345678901234567890">  
  4.   
  5. DWRUtil.selectRange("sel-test"215);  
结果 文本框中的值"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代码  收藏代码
  1.    function searchUser(){  
  2. var loadinfo = "loading....."  
  3. try{  
  4.     regUser.queryAllUser(userList);  
  5.     DWRUtil.useLoadingMessage(loadinfo);          
  6. }catch(e){  
  7.   
  8. }  
  9.    }  


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

相关文章推荐

DWR_SELECT

/*** 改变业务类型时的事件*//*function changBussiness(){    var bId = document.getElementById(businessCode).val...

DWR中的异常处理以及util.js的初步用例

完整版见https://jadyer.github.io/
  • jadyer
  • jadyer
  • 2012-06-11 10:34
  • 1333

dwr util.js中的功能

util.js包含了一些工具函数来帮助你用javascript数据(例如从服务器返回的数据)来更新你的web页面。   你可以在DWR以外使用它,因为它不依赖于DWR的其他部分。你可以下载整个DW...

DWR中的util.js

$("id") 大概等价于document.getElementById("id") 如果返回结果唯一的话返回该元素的值,不唯一则返回一个数组 .另外,如果单独使用util.js的话,可能在IE5以下...

DWR util.js工具包的使用

目录列表: $()DWRUtil.getText(id)DWRUtil.getValue(id)DWRUtil.setValue(id, value)DWRUtil.getValues()DWRUt...

DWR之其他概念:engine.js与util.js

DWR之其他概念:engine.js文件 ---------- 在范例程序中,我们引入了文件engine.js。该文件是DWR客户端的核心。这是一段javascript代码,用于把来自于动态生成的...
  • fhd001
  • fhd001
  • 2011-12-19 19:15
  • 1749

用dwr封装表单项提交表单

首先,配置dwr环境,网上很多资料都说得很详细,这里就不写了。  dwr封装form表单项,需要用到dwr定义的一个js方法:DWRUtil.getValues(yourform),这个方法可以返回...

dwr-2.0-util.js

  • 2012-10-12 07:59
  • 46KB
  • 下载

dwr-1.1.1-util.js

  • 2012-10-12 07:57
  • 26KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)