`
fanjf
  • 浏览: 332888 次
  • 性别: 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.    }  
分享到：
| 转一篇lucene的使用的文章，写的比较全
评论
发表评论

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

相关推荐

    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简介与安装配置 **DWR (Direct Web Remoting)** 是一种开放源代码的JavaScript库，它可以让客户端的JavaScript代码直接调用服务器端的Java方法，实现远程过程调用(RPC)功能。...

    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