DWR学习笔记(七)--完

 八.util.js的功能:主要操作js对象DWRUtil来操作通过js调用java对象后返回的数据,填充到HTML页面等作用。
   
   **功能:util.js包含了一些工具函数来帮助你用javascript数据(例如从服务器返回的数据)来更新你的web页面
      你可以在DWR以外使用它,因为它不依赖于DWR的其他部分。
     
   **功能概要:getValue[s]()和setValue[s]()可以操作大部分HTML元素除了table,list和image。
      getText()可以操作select和list。
      要修改table可以用addRows()和removeAllRows()。
      要修改列表(select列表和ul,ol列表)可以用addOptions()和removeAllOptions()。
      
   (1)$()函数(它是合法的Javascript名字) 是从Protoype偷来的命名方式。
      
      **说明:$ 相当与js中的 document.getElementById,即$() <==> document.getElementById(),
        传入HTML标签的id值即可找到对应的DOM节点对象,
        注意这和JQuery有点区别,JQuery是通过$("#id"),传入的值要加"#"才能找到对应id的HTML标签对象,
        而DWR的$()则不需要,这与ProtoType库手法一样
      
      **注意:如果传递给它多个参数,它会返回找到的元素的数组。所有非String类型的参数会被原封不动的返回。
   
   (2)addOptions和removeAllOptions方法:DWR的一个常遇到的任务就是根据选项填充选择列表<select>
   
       例子:如果你希望在你更新了select以后,它仍然保持原来的选择,可以像下面这样
        
        var sel = DWRUtil.getValue(id);
        DWRUtil.removeAllOptions(id);
        DWRUtil.addOptions(id, ...);
        DWRUtil.setValue(id, sel);
        //如果想加一个初始"Please select..." 选项那么你可以直接加入下面的语句:
        DWRUtil.addOptions(id, /["Please select ..."]);
        
      **DWRUtil.addOptions有6种模式:
        
        <1>数组:DWRUtil.addOptions(selectId, array)会创建一堆option,每个option的文字和值都是数组元素中的值。
        
        <2>对象数组(指定text):
            DWRUtil.addOptions(selectId,data,prop)用每个数组元素创造一个option,
            option的值和文字都是在prop中指定的对象的属性。
        
        <3>对象数组(指定text和value值):
            DWRUtil.addOptions(selectId,array,valueprop,textprop)用每个数组元素创造一个option,
            option的值是对象的valueprop属性,option的文字是对象的textprop属性。
        
        <4>对象: DWRUtil.addOptions(selectId,map,reverse)用每个属性创建一个option,
           对象属性名用来作为option的值,对象属性值用来作为option的文字,这听上去有些不对。
           但是事实上却是正确的方式。如果reverse参数被设置为true,那么对象属性值用来作为选项的值。
        
        <5>对象的Map: DWRUtil.addOptions(selectId,map,valueprop,textprop)用map中的每一个对象创建一个option,
             用对象的valueprop属性做为option的值,用对象的textprop属性做为option的文字。
            
        <6>ol 或 ul 列表:
            DWRUtil.addOptions(ulId,array)用数组中的元素创建一堆li元素,
            他们的innerHTML是数组元素中的值。这种模式可以用来创建ul和ol列表。
   
   (3)addRows和removeAllRows方法(用得时候查看文档):
            DWR通过这两个函数来帮操作<table>,函数的第一个参数可以是table、tbody、thead、tfoot的id。
            一般来说<table>最好使用tbody,因为这样可以保持你的header和footer行不变,
            并且可以防止Internet Explorer的bug。
           
        <1>DWRUtil.removeAllRows()方法:通过id删除table中所有行。id指的是table元素的id(最好是tbody元素的id)
          
          **格式:DWRUtil.removeAllRows(id);
          
        <2>DWRUtil.addRows()方法:先看格式、参数,然后看功能说明
          
          **格式:DWRUtil.addRows(id, array, cellfuncs, [options]);
          
          **参数说明:
            id: table元素的id(最好是tbody元素的id)
            
            array: 数组(可以是对象),做为更新表格的数据。
            
            cellfuncs: 函数数组,从传递过来的行数据中提取单元格数据。
            
            options: 一个包含选项的对象(见下面)
               选项包括:
              
                rowCreator: 一个用来创建行的函数(例如,你希望的tr和css).
                   默认是返回一个document.createElement("tr")
                   
                cellCreator: 一个用来创建单元格的函数(例如,用th代替td).
                    默认返回一个document.createElement("td")
                   
          **说明:向指定id的table元素添加行。它使用数组中的每一个元素在table中创建一行。
            然后用cellfuncs数组中的每个函数创建一个列。
            单元格是依次用cellfunc根据每个数组中的元素创建出来的。
   
   (4)getText方法:getText(id)和getValue(id)很相似。是为select列表设计的,你可能需要取得显示的文字,而不是当前选项的值。
   
   (5)getValue方法:DWRUtil.getValue(id)是setValue()对应的"读版本"。
        它可以从HTML元素中取出其中的值,而你不用管这个元素是select列表还是一个div
     
     **使用范围:这个函数能操作大多数HTML元素包括select(取出当前选项的值而不是文字)、input元素(包括textarea)、div和span。
   
   (6)getValues方法:getValues()和getValue()非常相似,除了输入的是包含name/value对的javascript对象。
         name是HTML元素的ID,value会被更改为这些ID对象元素的内容。这个函数不会返回对象,它只更改传递给它的值。
         也可以传入一个HTML元素(一个DOM对象或者id字符串),然后从它生成一个reply对象。
   
   (7)onReturn方法:可以通过调用DWRUtil.onReturn()方法,来调用Form中表单提交的方法。
     
     例子: 当点击普通文本框的时候会触发调用时间submitFunction()函数,这和按钮做同样的事就是提交表单。
       <input type="text" οnkeypress="DWRUtil.onReturn(event,submitFunction)"/>
       <input type="button" οnclick="submitFunction()"/>
   
   (8)selectRange方法(了解):选择一个输入框中的一定范围的文字。
           你可能为了实现类似"Google suggest"类型的功能而需要选择输入框中的一定范围的文字,
           但是不同浏览器间选择的模型不一样。这DWRUtil函数可以帮你实现。
        
     **格式:DWRUtil.selectRange(ele, start, end)
   
   (9)setValue方法:DWRUtil.setValue(id, value)根据第一个参数中指定的id找到相应元素,
        并根据第二个参数改变其中的值。
        这个函数能操作大多数HTML元素包括select、input元素(包括textarea)、div和span。
   
   <10>setValues方法:setValues()和setValue()非常相似,除了输入的是包含name/value对的javascript对象。
          name是HTML元素的ID,value是你想要设置给相应的元素的值。
          例如:类似于传入对象{ name:"lijie", age:"23"}这样包含有值对的对象,其中属性名为Id
   
   <11>toDescriptiveString方法(了解):
        DWRUtil.toDescriptiveString()函数比默认的toString()更好。
        第一个参数是要调试的对象,第二个参数是可选的,用来指定内容深入的层次:
      
      **参数值:
        0: 单行调试
        1: 多行调试,但不深入到子对象。
        2: 多行调试,深入到第二层子对象
        以此类推。一般调试到第二级是最佳的。
        还有第三个参数,定义初始缩进。这个函数不应该被用于调式程序之外,因为以后可能会有变化。
   
   <12>useLoadingMessage方法(了解):
            这个方法将来可能被废弃,因为这个实现实在太专断了。
            你必须在页面加载以后调用这个方法(例如,不要在onload()事件触发之前调用),
            因为它要创建一个隐藏的div来容纳消息。
           
      **使用方式:可以自定义这个方法然后使用自己定义的这个方法。
         最简单的做法时在onload事件中调用DWRUtil.useLoadingMessage
         
      例子:
        A.调用
         <head>
          <script>
           function init() {
            DWRUtil.useLoadingMessage();
           }
          </script>
         </head>
         <body οnlοad="init();">
         </body>
        
        B.实现自己的useLoadingMessage方法:
            下面这些是这个函数的代码,它对于你要实现自己的加载消息很有用。
            这个函数的主要内容是动态创建一个div(id是disabledZone)来容纳消息。
            重要的代码是当远程调用时使它显示和隐藏:
            
         DWREngine.setPreHook(function() {
          $('disabledZone').style.visibility = 'visible'; }
         );
         DWREngine.setPostHook(function() {
          $('disabledZone').style.visibility = 'hidden'; }
         );
         //This is fairly simple and makes it quite easy to implement your own "loading" message.
         function useLoadingMessage(message) {
          var loadingMessage;
          if (message) loadingMessage = message;
          else loadingMessage = "Loading";
          DWREngine.setPreHook(function() {
           var disabledZone = $('disabledZone');
           if (!disabledZone) {
            disabledZone = document.createElement('div');
            disabledZone.setAttribute('id', 'disabledZone');
            disabledZone.style.position = "absolute";
            disabledZone.style.zIndex = "1000";
            disabledZone.style.left = "0px";
            disabledZone.style.top = "0px";
            disabledZone.style.width = "100%";
            disabledZone.style.height = "100%";
            document.body.appendChild(disabledZone);
            var messageZone = document.createElement('div');
            messageZone.setAttribute('id', 'messageZone');
            messageZone.style.position = "absolute";
            messageZone.style.top = "0px";
            messageZone.style.right = "0px";
            messageZone.style.background = "red";
            messageZone.style.color = "white";
            messageZone.style.fontFamily = "Arial,Helvetica,sans-serif";
            messageZone.style.padding = "4px";
            disabledZone.appendChild(messageZone);
            var text = document.createTextNode(loadingMessage);
            messageZone.appendChild(text);
           }
           else {
            $('messageZone').innerHTML = loadingMessage;
            disabledZone.style.visibility = 'visible'; }
           }
          );
          DWREngine.setPostHook(function() {
           $('disabledZone').style.visibility = 'hidden'; }
          );
         }
         //下面的做法能简单的使用有加载消息图片:
         function useLoadingImage(imageSrc) {
          var loadingImage;
          if (imageSrc) loadingImage = imageSrc;
          else loadingImage = "ajax-loader.gif";
          DWREngine.setPreHook(function() {
           var disabledImageZone = $('disabledImageZone');
           if (!disabledImageZone) {
            disabledImageZone = document.createElement('div');
            disabledImageZone.setAttribute('id', 'disabledImageZone');
            disabledImageZone.style.position = "absolute";
            disabledImageZone.style.zIndex = "1000";
            disabledImageZone.style.left = "0px";
            disabledImageZone.style.top = "0px";
            disabledImageZone.style.width = "100%";
            disabledImageZone.style.height = "100%";
            var imageZone = document.createElement('img');
            imageZone.setAttribute('id','imageZone');
            imageZone.setAttribute('src',imageSrc);
            imageZone.style.position = "absolute";
            imageZone.style.top = "0px";
            imageZone.style.right = "0px";
            disabledImageZone.appendChild(imageZone);
            document.body.appendChild(disabledImageZone);
           }
           else {
            $('imageZone').src = imageSrc;
            disabledImageZone.style.visibility = 'visible';
           }
          });
          DWREngine.setPostHook(function() {
           $('disabledImageZone').style.visibility = 'hidden';
          });
         }
         //然后你就可以这样使用:useLoadingImage("images/loader.gif");
   
   <13>Submission box功能(了解):
         h1 非util.js中的功能 这里有一些功能不适合加入到DWRUtil中。
         它们在解决一些特殊问题上是很有用,但是他们还不够通用以适用任何场合
         
      例子:修补浏览器事件,如果你创建了一个DOM元素,然后用addAttribute在这个元素上创建了一个事件,
         那么他们不能被正常的触发。你可以使用下面的脚本来遍历一个DOM树,并重新为他们绑定事件,
         这样他们就能正常的触发了。
        
        //把'click'改成你希望的事件
        DWREngine._fixExplorerEvents = function(obj) {
         for (var i = 0; i < obj.childNodes.length; i++) {
          var childObj = obj.childNodes [i];
          if (childObj.nodeValue == null) {
           var onclickHandler = childObj.getAttribute('onclick');
           if (onclickHandler != null) { childObj.removeAttribute('onclick');
            // If using prototype:
            // Event.observe(childObj, 'click', new Function(onclickHandler));
            // Otherwise (but watch out for memory leaks):
            if (element.attachEvent) {
             element.attachEvent("onclick", onclickHandler);
            }
            else {
             element.addEventListener("click", onclickHandler, useCapture);
            }
           }
           DWREngine._fixExplorerEvents(childObj);
          }
         }
        }
   
  


   至此,整个DWR学习笔记告一段落,希望对有需要的朋友有所帮助,如有疑问欢迎留言。
   
   
   
   
   
   

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

上树的蜗牛儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值