DWR util.js 学习笔记 整理_AJAX相关

util.js包含一些有用的函数function,用于在客户端页面调用,它可以和dwr分开,独立营用于你的系统中。

主要功能如下:
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

***************************************************************************************
//////////////////////////////////////////////////////////////////////////////////////
****************************************************************************************
1、$()函数
  IE5.0 不支持
  $ = document.getElementById
  取得form表单值
  var name = $("name");
***************************************************************************************
//////////////////////////////////////////////////////////////////////////////////////
****************************************************************************************
2、用于填充 select 下拉框 option
  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中方式:

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

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

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

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

     @ <ul> and <ol> list editing

       DWRUtil.addOptions() 函数不但可以填出select,开可以填出<ul>和<ol>这样的heml元素

***************************************************************************************
//////////////////////////////////////////////////////////////////////////////////////
****************************************************************************************
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:
        public class Person {
     private String name;
     private Integer id;
     pirvate String address;
     public void set(){……}
     public String get(){……}
       }

    下面用  DWRUtil.addRows(); 
   /**************************************************************************************/
   /****************** 胡国清***********fzfx88@hotmail.com********************************/
   /**************************************************************************************/

   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";
     }
     待续…………………………………………
   /**************************************************************************************/
   /**************************************************************************************/
   /**************************************************************************************/
   4、getText  取得text属性值

      DWRUtil.getText(id): 用来获得 option 中的文本
      比如:
       <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 表单值

      有如下几种情况:
          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():
       <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里选一个范围 

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

    function searchUser(){
    var loadinfo = "loading....."
    try{
        regUser.queryAllUser(userList);
        DWRUtil.useLoadingMessage(loadinfo);        
    }catch(e){

    }
    }

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

   

时间: 2024-11-01 15:18:58

DWR util.js 学习笔记 整理_AJAX相关的相关文章

DWR util.js 学习笔记 整理

util.js包含一些有用的函数function,用于在客户端页面调用,它可以和dwr分开,独立营用于你的系统中. 主要功能如下: 1.$() 获得页面参数值 2.addOptions and removeAllOptions 初始化下拉框 3.addRows and removeAllRows  填充表格 4.getText  取得text属性值 5.getValue 取得form表单值 6.getValues 取得form多个值 7.onReturn   8.selectRange 9.se

Ajax学习笔记整理_AJAX相关

Ajax: Asynchronous JavaScript and Xml , 异步js脚本和xml , 常用来实现页面局部的异步刷新, 对提高用户体验有很大帮助. Xml在多语言时较有优势, 但Ajax技术实际上较多采用Json对象而不是Xml来处理数据. Ajax历史....了解性知识 Ajax归属于Web前端开发技术, 与javascript有着异常紧密的联系. Ajax就是一种实现异步通信无刷新的技术, 而这种技术可以有很多种实现方式. 浏览器的鼻祖网景(NetScape)公司最早发明了

Java中jqGrid 学习笔记整理——进阶篇(二)_java

相关阅读: Java中jqGrid 学习笔记整理--进阶篇(一) 本篇开始正式与后台(java语言)进行数据交互,使用的平台为 JDK:java 1.8.0_71 myEclisp 2015 Stable 2.0 Apache Tomcat-8.0.30 Mysql 5.7 Navicat for mysql 11.2.5(mysql数据库管理工具) 一.数据库部分 1.创建数据库 使用Navicat for mysql创建数据库(使用其他工具或直接使用命令行暂不介绍) 2. 2.创建表 双击打

jqGrid 学习笔记整理——进阶篇(一 )_jquery

 在浏览导航栏添加所需按钮 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>DEMO</title> <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" /> <link rel=

.NET编程和SQL Server ——Sql Server 与CLR集成 (学习笔记整理-1)

原文:.NET编程和SQL Server --Sql Server 与CLR集成 (学习笔记整理-1) 一.SQL Server 为什么要与CLR集成 1. SQL Server 提供的存储过程.函数等十分有限,经常需要外部的代码来执行一些繁重的移植: 2.与CLR集成可将原本需要独立的程序来实现的功能迁移到SQL Server 内部进行数据操作: 3.T-SQL数据查询语言在返回数据集方面很好,但是除此之外表现不佳.与CLR的集成可解决这一问题: 4..NET的操作代码和执行的速度比T-SQL

ArcGIS JS 学习笔记3 实现百度风格的BubblePopup

原文:ArcGIS JS 学习笔记3 实现百度风格的BubblePopup 1. 开篇 模仿是最好的学习,这次我们继续山寨百度,通过自定义Infowindow来实现百度风格的BubblePopup   2.准备 2.1 Copy模板 先打开百度地图,按下f12吧BubblePopup的HTML代码和CSS代码拷贝下来,这里我无耻的把类名改了,大家不要在意细节. HTML模板 1 <div class="dextra-bubble-pop-center" style="z

JavaScript学习笔记整理_用于模式匹配的String方法_基础知识

用于模式匹配的String方法: String支持4种使用正则表达式的方法: seach()用于检索,参数是一个正则表达式,返回第一个与之匹配的子串的位置,找不到则返回-1,如果参数不是正则表达式,则首先会通过RexExp构造函数将它转换成正则表达式,seach()方法不支持全局搜索,它忽略修饰符g: replace()用于检索与替换操作,第一个参数是一个正则表达式,第二个参数是要进行替换的字符串.它对调用该方法的字符串检索,按照模式匹配子串替换成第二个参数,若包含修饰符g则全文匹配.若第一个参

JavaScript学习笔记整理_setTimeout的应用_基础知识

setTimeou的t应用 var ids = []; function foo1(i) { this.i = i; console.log('i = '+i); ids[0] = setTimeout((function () { foo1(i); }),1000); } function foo2(j) { this.j = j; console.log('j = '+j); ids[1] = setTimeout((function () { foo2(j); }),1000); } fo

vue.js学习笔记之绑定style样式和class列表_javascript技巧

数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在 v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 一.绑定Class属性. 绑定数据用v-bind:命令,简写成: 语法:<div v-bind:class="{ active: isActive }&q