`
306781704
  • 浏览: 87025 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

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

    博客分类:
  • js
阅读更多

DWR util.js 学习笔记
/********************/

/********************/
util.js包含一些有用的函数function,用于在客户端页面调用.
主要功能如下:

代码
  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//////////////////////////
*********************************************************************

代码
  1. 1、$()函数   
  2.      IE5.0 不支持   
  3.      $ = document.getElementById   
  4.      取得form表单值   
  5.      var name = $("name");  


***********************************************************************************
///////////////////////////////////////////////////////////////////////////////////
***********************************************************************************
2、用于填充 select 下拉框 option

代码
  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中方式:  

 

代码
  1. @ Simple Array Example: 简单数组   
  2.        例如:   
  3.        Array array = new Array[ 'Africa', 'America', 'Asia', 'Australasia', 'Europe' ];   
  4.        DWRUtil.addOptions("demo1",array);  

 

代码
  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属性,对应下拉框中显示的哪个值.  

 

代码
  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');  

 

代码
  1. @ Map Example 用制定的map来填充 options:   
  2.           如果 server 返回 Map,呢么这样处理即可:   
  3.           DWRUtil.addOptions( "demo3",map);   
  4.           其中 value 对应 map keys,text 对应 map values;  

 

代码
  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:

代码
  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********************************/
/*********************************************************************************/

 

 

代码
  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 中的文本
比如:

代码
  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 表单值

有如下几种情况:

代码
  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():

代码
  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里选一个范围

代码
  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", 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请求后,页面显示的提示等待信息;

 

代码
分享到:
评论

相关推荐

    DWR 处理各种form表单Selectoption,table.doc

    DWR 处理各种 form 表单 Select/option,table ...DWR 的 util.js 文件提供了一些有用的函数,用于处理各种 form 表单 Select/option 和 table。开发者可以根据需要选择合适的函数,快速地实现所需的功能。

    dwr util.js

    在DWR框架中,`util.js`是一个核心组件,主要负责提供各种实用工具函数,便于开发者在前端进行操作。本文将深入探讨`util.js`的特性和功能,并结合提供的`dwr_util_api.docx`文档,详细介绍其使用方法。 1. **DWR...

    dwr包.rar dwr.jar engine.js util.js dwr-noncla.jar readme.txt

    dwr包.rar dwr.jar engine.js util.js dwr-noncla.jar readme.txt JAR File: dwr.jar (1.08Mb) To DWR enable your web-app WAR File: dwr.war (4.62Mb) Demos/Examples of what DWR can do Sources: dwr-...

    DWR util.js 学习笔记 整理

    DWR util.js 是一个功能强大的 JavaScript 库,它提供了许多有用的函数,可以帮助开发者在客户端页面上实现各种操作。下面是对 DWR util.js 的学习笔记整理。 1. $() 函数 DWRUtil 中的 $() 函数用于获取页面参数...

    DWR(包括engine.js+util.js).rar

    `util.js`是DWR的工具库,包含了各种实用函数,帮助开发者更好地管理和优化使用DWR的应用程序。这些函数涵盖了数组操作、字符串处理、日期时间格式化、DOM操作等多个方面,增强了JavaScript的基本功能,提高了代码的...

    dwr util.js engine.js

    `util.js` 是DWR的工具库,它包含了各种实用函数,用于帮助开发者处理JavaScript中的常见任务。这个库提供了如对象操作、数组处理、字符串操作、DOM操作等多方面的辅助功能。例如,它可能包含了一些用于序列化和反...

    DWR util.js学习笔记.doc

    DWR util.js 学习笔记 DWR util.js 是一个JavaScript工具库,提供了一些有用的函数,用于在客户端页面调用。...DWR util.js为我们提供了一些有用的函数,帮助我们更方便地处理表单、下拉框、表格等控件。

    dwr教程+dwr.jar+util.js+engine.js

    `util.js` 和 `engine.js` 是DWR的核心JavaScript库。`util.js` 提供了一系列实用工具函数,用于辅助JavaScript编程,例如类型检查、对象遍历等。`engine.js` 是DWR引擎的核心,负责处理与服务器的通信,包括请求的...

    dwr.jar engine.js util.js,Dwr相关

    "util.js"是DWR的实用工具脚本文件,它提供了一些辅助函数和通用功能,帮助开发者更好地管理和操作DWR的API。例如,它可能包含一些用于数据验证、对象序列化或调试的函数,这些函数在编写DWR应用时非常有用。 DWR的...

    dwr20.dtd

    dwr20.dtd

    dwr20.dtd约束文件

    dwr20.dtd约束文件。 &lt;!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://www.getahead.ltd.uk/dwr/dwr20.dtd" &gt;

    dwr 例子,jar包,engine.js util.js 学习笔记

    `util.js`通常包含DWR的一些实用工具函数,这些函数可以帮助开发者更方便地操作DOM、处理数据、执行通用任务等。这个文件可以扩展JavaScript的功能,为DWR的使用提供便利。 5. **DWR的工作流程**: - 客户端:...

    dwr城市选择的联动,util.js方法的使用,动态table

    总结起来,"dwr城市选择的联动,util.js方法的使用,动态table"涉及的技术主要包括DWR框架、JavaScript DOM操作以及服务器端与客户端的数据交互。这些技术的综合运用,可以创建出高效、实时的Web应用,满足用户对...

    DWR 处理各种form表单

    讲解DWR 框架的使用,和各种form表单Select-option,table

    dwr-1.1.1-util.js

    dwr-1.1.1-util.js

    dwr2.0.5.jar&dwr2.0.6.jar&dwr3.rc1.jar

    在这些版本中,DWR提供了基本的功能,包括动态Java到JavaScript的映射、自动处理类型转换、安全特性以及对AJAX请求的批处理支持。这些更新可能包含了错误修复、性能优化和新功能的添加,以提升开发者体验。 2. **...

    dwr需要的js(searchaAuthor+engine.js+util.js).rar

    4. **util.js**:通常,"util.js" 是一个通用工具类库,包含各种实用函数,用于帮助处理常见的JavaScript任务,比如字符串操作、数组处理、日期格式化等。在DWR上下文中,它可能还包含了一些辅助函数,用于支持DWR...

    engine.js和util.js

    这是dwr需要的engine.js和util.js,Engine.js与util.js不同之处在于,util.js是静态js文件,可以直接从jar文件中拿出来,页面可以直接引用;而engine.js则有部分动态内容,这决定了它必须经过servelt资源请求,在...

Global site tag (gtag.js) - Google Analytics