`
wangyong
  • 浏览: 41521 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

DWR util.js 学习笔记

DWRBeanAjaxQQBlog 
阅读更多

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



*********************************************************************
//////////////////////http://blog.163.com/fzfx888//////////////////////////
*********************************************************************

Java代码 复制代码
  1. 1、$()函数   
  2.   IE5.0 不支持   
  3.   $ = document.getElementById   
  4.   取得form表单值   
  5.   var name = $("name");  
1、$()函数
  IE5.0 不支持
  $ = document.getElementById
  取得form表单值
  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中方式：  
 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中方式：

 

Java代码 复制代码
  1. @ Simple Array Example: 简单数组   
  2.     例如:   
  3.     Array array = new Array[ 'Africa', 'America', 'Asia', 'Australasia', 'Europe' ]；   
  4.     DWRUtil.addOptions("demo1",array);  
  @ Simple Array Example: 简单数组
      例如:
      Array array = new Array[ 'Africa', 'America', 'Asia', 'Australasia', 'Europe' ]；
      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属性，对应下拉框中显示的哪个值.  
@ 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属性，对应下拉框中显示的哪个值.

 

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');  
@ 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');

 

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

 

Java代码 复制代码
  1. @ <ul> and <ol> list editing   
  2.         
  3.        DWRUtil.addOptions() 函数不但可以填出select,开可以填出<ul>和<ol>这样的heml元素  
@ <ul> and <ol> list editing
     
       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.      }  
        public class Person {
	 private String name;
	 private Integer id;
	 pirvate String address;
	 public void set(){……}
	 public String get(){……}
       }


下面用 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.      }  
   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";
     }


待续…………………………………………
/********************************************************************************/
/***********************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>  
       <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 表单值

有如下几种情况：

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 的值;  
         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():

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

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

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



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

分享到：
| java文件操作
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    DWR util.js 学习笔记 整理

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

    DWR util.js学习笔记.doc

    DWR util.js 学习笔记 DWR util.js 是一个JavaScript工具库，提供了一些有用的函数，用于在客户端页面调用。下面是DWR util.js中的主要功能： 1. $()函数：获取页面参数值 该函数用于获取页面参数值，例如：var ...

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

    这个压缩包包含的是DWR的实例、相关的jar包以及两个重要的JavaScript文件——`engine.js`和`util.js`，这些都是学习DWR的关键组件。 1. **DWR基础概念**： DWR的核心功能是提供一种方式，使得客户端JavaScript可以...

    dwr的一般使用学习笔记

    在JavaScript端，首先需要引入由DWR自动生成的接口文件（如TestClass.js）和DWR核心库（engine.js和util.js）。然后，你可以直接调用JavaScript对象的方法，如`testClass.testMethod1()`。 2. 调用有简单返回值的...

    dwr学习笔记和总结

    ### dwr学习笔记和总结 #### 一、DWR简介 DWR (Direct Web Remoting) 是一个简化Ajax开发的框架，它使得JavaScript能够直接调用服务器端的Java方法成为可能，无需编写复杂的Ajax代码。这极大地提高了开发效率，并...

    AJAX高级的应用--DWR框架使用的学习笔记

    在前端，DWR通过引入相应的JavaScript库（`engine.js`, `util.js` 和接口文件如`userdao.js`）来提供对Java方法的调用。例如，以下代码展示了如何在JavaScript中调用服务器端的方法： ```javascript function ...

    dwr笔记 dwr自学资料

    4. **Ajax API**：为JavaScript提供了一组API，如`dwr.engine.remote.execute()`用于调用服务器方法，`dwr.util.*`提供了数据操作和类型转换的工具。 四、DWR的使用步骤 1. **引入依赖**：在项目中添加DWR库。 2. *...

    dwr学习笔记

    `DWR`（Direct Web Remoting）是一种Java技术，它允许Web应用程序在客户端JavaScript和服务器端Java之间进行双向通信。DWR使得动态Web应用能够轻松地实现Ajax功能，即在不刷新整个页面的情况下更新部分页面内容。...

    DWR学习笔记及经验总结

    通过阅读这份“DWR学习笔记及经验总结”，开发者可以深入理解DWR的工作原理，掌握其实现动态Web交互的方法，并在实际项目中灵活运用，提升Web应用的用户体验。同时，这份资料可能还包含了作者在使用DWR过程中的技巧...

    一套完整的dwr ajax框架综合资料

    `DWR笔记.doc`和`DWR技术分析.doc`可能是深入理解DWR特性和应用场景的重要参考资料。`DWR开发培训.ppt`可能包含逐步教程和实例，帮助快速上手。`DWR学习.doc`则可能提供了学习路径和常见问题解答。通过这些资料，...

Magicbox
Global site tag (gtag.js) - Google Analytics