`

DWR整理(转)

    博客分类:
  • Dwr
阅读更多

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  

<script type="text/javascript">render_code();</script>

*********************************************************************

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

<script type="text/javascript">render_code();</script>
***********************************************************************************

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

<script type="text/javascript">render_code();</script>

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

<script type="text/javascript">render_code();</script>

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

<script type="text/javascript">render_code();</script>

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

<script type="text/javascript">render_code();</script>

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

<script type="text/javascript">render_code();</script>

代码
  1. @ <ul> and <ol> list editing  
  2.        DWRUtil.addOptions() 函数不但可以填出select,开可以填出<ul>和<ol>这样的heml元素

<script type="text/javascript">render_code();</script>
***********************************************************************************

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.      }  

<script type="text/javascript">render_code();</script>
下面用 DWRUtil.addRows();

代码
  1.    function userList(data){  
  2.     //var delButton = "  
  3.     //var editButton = "  
  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("+ 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("+ 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.      }  

<script type="text/javascript">render_code();</script>

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>  

<script type="text/javascript">render_code();</script>
调用 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 的值;  

<script type="text/javascript">render_code();</script>

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"/>  

<script type="text/javascript">render_code();</script> 那么: 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 防止当在文本框中输入后,直接按回车

[code] <input type="text" onkeypress="DWRUtil.onReturn(event, submitFunction)"/>
<input type="button" onclick="submitFunction()"/>[/code]

8、DWRUtil.selectRange(ele, start, end);

在一个input box里选一个范围

代码
  1. DWRUtil.selectRange("sel-test", $("start").value, $("end").value);  
  2.   
  3. 比如:
  4.   
  5. DWRUtil.selectRange("sel-test"215);  

<script type="text/javascript">render_code();</script> 结果 文本框中的值"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 最多分析到第二层子元素的多行调试

[code] <input type="text" id="text">
DWRUtil。toDescriptiveString("text",0); [/code]
DWRUtil。toDescriptiveString("text",0);


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

12、DWRUtil.useLoadingMessage();
当发出ajax请求后,页面显示的提示等待信息;

代码
  1.    function searchUser(){  
  2. var loadinfo = "loading....."  
  3. try{  
  4.     regUser.queryAllUser(userList);  
  5.     DWRUtil.useLoadingMessage(loadinfo);          
  6. }catch(e){  
  7.   
  8. }  
  9.    }  

<script type="text/javascript">render_code();</script>

分享到:
评论

相关推荐

    DWR2学习整理资料

    **DWR(Direct Web Remoting)**是一种WEB远程调用框架,主要目的是简化AJAX(Asynchronous JavaScript and XML)开发。通过DWR,开发者可以在客户端的JavaScript中直接调用服务器端的Java方法,并且如同本地调用...

    我整理的dwr详细笔记

    ### DWR (Direct Web Remoting) 详细笔记 #### 一、DWR 概述与应用场景 DWR(Direct Web Remoting)是一种简化Ajax应用程序开发的技术框架,它允许客户端JavaScript直接调用服务器端的Java方法,从而实现了浏览器...

    DWR2学习整理资料工程4

    DWR2学习整理资料工程最后一部分,第一次搞这东西,传得有点久。

    DWR框架全方位学习整理

    是自己学习期间DWR框架的简单的一些实例和操作。里面有三层写的异步刷新分页 还有DWR操作的14个小实例,以及提高能力的DWR的API和API的技术文档,贡献大家,希望大家能够用的上,也欢迎学习交流,里面有本人的QQ。

    dwr笔记整理(三)

    《DWR笔记整理(三)——深入理解与实践》 Direct Web Remoting(DWR)是一种JavaScript库,它使得在浏览器和服务器之间进行双向通信变得简单。本篇笔记将深入探讨DWR的核心概念、功能以及如何在实际项目中应用。...

    整理好的DWR-2.0.5-src

    这个不是我的原创,原文件出至这里:...原资源包含了,源代码和API Doc,只是美中不足的是没有整理成可用的zip文档,我这特分离了一下,并重新打好包了,初步测试了一下能用。

    DWR开发步骤相关整理

    DWR(Direct Web Remoting)是一种Java库,用于在Web应用程序中实现JavaScript和服务器端Java对象之间的双向通信。它使得动态、实时的Web应用成为可能,而无需刷新整个页面。以下是对DWR开发步骤的详细解析: 1. **...

    整理的DWR一些资料

    DWR(Direct Web Remoting)是一种Java库,用于在Web应用程序中实现JavaScript和服务器端Java对象之间的双向通信。它简化了Ajax(异步JavaScript和XML)应用的开发,允许开发者直接调用服务器上的方法,就像它们是...

    学习DWR JavaScript函数整理

    ### DWR JavaScript函数整理知识点详解 #### 一、概述 本文档主要收集并整理了一系列JavaScript函数,这些函数主要用于客户端表单验证以及数据合法性检查。通过这些函数,可以有效地提高前端开发效率,确保用户输入...

    Spring整合DWR comet 实现无刷新 多人聊天室代码整理

    Spring整合DWR(Direct Web Remoting)和Comet技术,是一种高效的实现Web应用程序实时通信的解决方案,特别适用于创建如多人聊天室这样的实时交互应用。在这个项目中,Spring作为后端框架,负责业务逻辑处理和控制...

    DWR2.0中文文档

    这本书的内容既包含了作者的原创思考和整理,也包含了对官方文档的精心翻译,旨在为J2EE开发者提供一个全面理解DWR的平台。 在**Ajax**部分,读者将学习到如何利用Ajax技术创建富客户端应用。Ajax的核心在于通过...

    dwr中文文档dwr中文文档dwr中文文档

    ### DWR中文文档知识点概述 #### 一、DWR简介 **DWR**(Direct Web Remoting)是一种简化Ajax编程的...以上内容基于给定的文件信息进行了详细的知识点整理和解释,希望能帮助读者更好地理解和掌握DWR的相关技术要点。

    DWR2学习整理资料工程2

    DWR2学习整理资料工程后续部分

    DWR2学习整理资料工程3

    DWR2学习整理资料工程后续部分

    dwr相关资料(个人整理)

    Direct Web Remoting (DWR) 是一个开源的Java库,它允许在JavaScript和服务器端的Java之间进行简单、安全的交互。DWR使得Web开发者能够轻松地实现Ajax(Asynchronous JavaScript and XML)功能,从而创建出更加动态...

    整理好的DWR-2.0.5-doc

    这个不是我的原创,原文件出至这里:...原资源包含了,源代码和API Doc,只是美中不足的是没有整理成可用的zip文档,我这特分离了一下,并重新打好包了,初步测试了一下能用。

    AJAX DWR教程

    在提供的资源中,"DWR util_js 整理(DWR 处理各种form表单Select-option,table等,List,Bean - Bob@CSDN - CSDN博客.htm"可能是一个详细的博客文章,讲解了如何使用DWR处理表单和数据。"ajax+DWR+实战.pdf"则可能是更...

    DWR util.js 学习笔记 整理

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

    4.dwr框架Ajax学习haozl整理(非常全的了更新到2013.8.17)

    综上所述,"4.dwr框架Ajax学习haozl整理(非常全的了更新到2013.8.17)"是一个包含关于DWR框架的详细资料集合,包括笔记、PPT、文档和示例,适合初学者和有经验的开发者深入学习和理解DWR的使用和原理。这些资源可以...

Global site tag (gtag.js) - Google Analytics