关闭

dwr util.js中的功能

609人阅读 评论(0) 收藏 举报

util.js包含了一些工具函数来帮助你用javascript数据(例如从服务器返回的数据)来更新你的web页面。

 

你可以在DWR以外使用它,因为它不依赖于DWR的其他部分。你可以下载整个DWR或者单独下载.

 

4个基本的操作页面的函数:getValue[s]()setValue[s]()可以操作大部分HTML元素除了tablelistimagegetText()可以操作select list

 

要修改table可以用addRows()removeAllRows()。要修改列表(select列表和ul,ol列表)可以用addOptions()removeAllOptions()

 

还有一些其他功能不是DWRUtil的一部分。但它们也很有用,它们可以用来解决一些小问题,但是它们不是对于所有任都通用的。

 

$()

addOptions and removeAllOptions

addRows and removeAllRows

getText

getValue

getValues

onReturn

selectRange

setValue

setValues

toDescriptiveString

useLoadingMessage

Submission box

生成列表

 

DWR的一个常遇到的任务就是根据选项填充选择列表。下面的例子就是根据输入填充列表。

 

下面将介绍 DWRUtil.addOptions() 的几种是用方法。

 

如果你希望在你更新了select以后,它仍然保持运来的选择,你要像下面这样做:

 

var sel = DWRUtil.getValue(id);

DWRUtil.removeAllOptions(id);

DWRUtil.addOptions(id, ...);

DWRUtil.setValue(id, sel);如果你想加入一个初始的"Please select..." 选项那么你可以直接加入下面的语句:

 

DWRUtil.addOptions(id, \["Please select ..."]);然后再下面紧接着加入你真正的选项数据。

 

DWRUtil.addOptions5种模式

数组: DWRUtil.addOptions(selectid, array) 会创建一堆option,每个option的文字和值都是数组元素中的值。

 

对象数组 (指定text): DWRUtil.addOptions(selectid, data, prop) 用每个数组元素创造一个optionoption的值和文字都是在prop中指定的对象的属性。

 

对象数组 (指定textvalue): DWRUtil.addOptions(selectid, array, valueprop, textprop) 用每个数组元素创造一个optionoption的值是对象的valueprop属性,option的文字是对象的textprop属性。

 

对象: DWRUtil.addOptions(selectid, map, reverse)用每个属性创建一个option。对象属性名用来作为option的值,对象属性值用来作为属性的文字,这听上去有些不对。但是事实上却是正确的方式。如果reverse参数被设置为true,那么对象属性值用来作为选项的值。

 

对象的Map: DWRUtil.addOptions(selectid, map, valueprop, textprop) map中的每一个对象创建一个option。用对象的valueprop属性做为optionvalue,用对象的textprop属性做为option的文字。

 

ol ul 列表: DWRUtil.addOptions(ulid, array) 用数组中的元素创建一堆li元素,他们的innerHTML是数组元素中的值。这种模式可以用来创建ulol列表。

 

生成Table

 

DWR通过这两个函数来帮你操作table DWRUtil.addRows() DWRUtil.removeAllRows() 。这个函数的第一个参数都是tabletbodytheadtfootid。一般来说最好使用tbody,因为这样可以保持你的headerfooter行不变,并且可以防止Internet Explorerbug

 

DWRUtil.removeAllRows()

语法:

 

DWRUtil.removeAllRows(id);描述:

通过id删除table中所有行。

 

参数:

 

id table元素的id(最好是tbody元素的id)

DWRUtil.addRows()

语法:

 

DWRUtil.addRows(id, array, cellfuncs, [options]);描述:

向指定idtable元素添加行。它使用数组中的每一个元素在table中创建一行。然后用cellfuncs数组中的没有函数创建一个列。单元格是依次用cellfunc根据没有数组中的元素创建出来的。

 

DWR1.1开始,addRows()也可以用对象做为数据。如果你用一个对象代替一个数组来创建单元格,这个对象会被传递给cell函数。

 

你可以写一些像这样的伪代码:

 

for each member in array

  for each function in cellfuncs

    create cell from cellfunc(array[i])参数:

 

id: table元素的id(最好是tbody元素的id)

array: 数组(DWR1.1以后可以是对象),做为更新表格数据。

cellfuncs: 函数数组,从传递过来的行数据中提取单元格数据。

options: 一个包含选项的对象(见下面)

选项包括:

 

rowCreator: 一个用来创建行的函数(例如,你希望个tr加个css). 默认是返回一个document.createElement("tr")

cellCreator: 一个用来创建单元格的函数(例如,用th代替td). 默认返回一个document.createElement("td")

DWRUtil.getText(id)

getText(id)getValue(id)很相似。出了它是为select列表设计的。你可能需要取得显示的文字,而不是当前选项的值。

 

DWRUtil.getValue(id)

DWRUtil.getValue(id) setValue()对应的"读版本"。它可以从HTML元素中取出其中的值,而你不用管这个元素是select列表还是一个div

 

这个函数能操作大多数HTML元素包括select(去处当前选项的值而不是文字)input元素(包括textarea)divspan

 

DWRUtil.getValues()

getValues()getValue()非常相似,除了输入的是包含name/value对的javascript对象。nameHTML元素的IDvalue会被更改为这些ID对象元素的内容。这个函数不会返回对象,它只更改传递给它的值。

 

基于FormgetValues()

DWR1.1开始getValues()可以传入一个HTML元素(一个DOM对象或者id字符串),然后从它生成一个reply对象。

 

DWRUtil.onReturn

当按下return键时,得到通知。

 

当表单中有input元素,触发return键会导致表单被提交。当使用Ajax时,这往往不是你想要的。而通常你需要的触发一些Javscript

 

不幸的是不同的浏览器处理这个事件的方式不一样。所以DWRUtil.onReturn修复了这个差异。如果你需要一个同表单元素中按回车相同的特性,你可以用这样代码实现:

 

<input type="text" onkeypress="DWRUtil.onReturn(event, submitFunction)"/>

<input type="button" onclick="submitFunction()"/>你也可以使用onkeypress事件或者onkeydown事件,他们做同样的事情。

 

一般来说DWR不是一个Javascript类库,所以它应该试图满足这个需求。不管怎样,这是在使用Ajax过程中一个很有用函数。

 

onSubmit

这个函数的工作原理是onSubmit()事件只存在于<FORM ...>元素上。

 

DWRUtil.selectRange

选择一个输入框中的一定范围的文字。

你可能为了实现类似"Google suggest"类型的功能而需要选择输入框中的一定范围的文字,但是不同浏览器间选择的模型不一样。这DWRUtil函数可以帮你实现。

 

DWRUtil.setValue(id, value)

DWRUtil.setValue(id, value)根据第一个参数中指定的id找到相应元素,并根据第二个参数改变其中的值。

 

这个函数能操作大多数HTML元素包括select(去处当前选项的值而不是文字)input元素(包括textarea)divspan

 

DWRUtil.setValues()

setValues()setValue()非常相似,除了输入的是包含name/value对的javascript对象。nameHTML元素的IDvalue是你想要设置给相应的元素的值。

 

DWRUtil.toDescriptiveString

DWRUtil.toDescriptiveString()函数比默认的toString()更好。第一个参数是要调试的对象,第二个参数是可选的,用来指定内容深入的层次:

 

0: 单行调试

1: 多行调试,但不深入到子对象。

2: 多行调试,深入到第二层子对象

以此类推。一般调试到第二级是最佳的。

还有第三个参数,定义初始缩进。这个函数不应该被用于调式程序之外,因为以后可能会有变化。

 

DWRUtil.useLoadingMessage

设置一个Gmail风格的加载信息。所有演示页面(dynamic text, selection lists, live tables, live forms, dynamic validation address entry)都使用了GMail风格的加载消息。

 

这个方法将来可能被废弃,因为这个实现实在太专断了。为什么是红色,为什么在右上角,等等。唯一的真正答案就是:抄袭GMail。这里的建议是以本页面中的代码为模板,根据你的需求自定义。

 

你必须在页面加载以后调用这个方法(例如,不要在onload()事件触发之前调用),因为它要创建一个隐藏的div来容纳消息。

 

最简单的做法时在onload事件中调用DWRUtil.useLoadingMessage,像这样:

 

<head>

  <script>

  function init() {

    DWRUtil.useLoadingMessage();

  }

  </script>

  ...

</head>

<body onload="init();">

  ...可能有些情况下你是不能容易的编辑headerbody标签(如果你在使用CMS,这很正常),在这样的情况下你可以这样做:

 

<script>

function init() {

  DWRUtil.useLoadingMessage();

}

 

if (window.addEventListener) {

  window.addEventListener("load", init, false);

}

else if (window.attachEvent) {

  window.attachEvent("onload", init);

}

else {

  window.onload = init;

}

</script>下面这些是这个函数的代码,它对于你要实现自己的加载消息很有用。这个函数的主要内容是动态创建一个div(iddisabledZone)来容纳消息。重要的代码是当远程调用时使它显示和隐藏:

 

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");

 

 

 

本文来自CSDN博客:http://blog.csdn.net/impeller/archive/2008/04/09/2271207.aspx

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:160663次
    • 积分:2044
    • 等级:
    • 排名:第18760名
    • 原创:32篇
    • 转载:42篇
    • 译文:0篇
    • 评论:73条
    最新评论
    友情链接