dwr框架中DWRUtil的方法
7. util.js 功能 util.js包含了一些工具函数来帮助你用javascript数据(例如从服务器返回的数据)来更新你的web页面。 你可以在DWR以外使用它,因为它不依赖于DWR的其他部分。你可以下载整个DWR或者单独下载. 4个基本的操作页面的函数:getValue[s]()和setValue[s]()可以操作大部分HTML元素除了table,list和image。getText()可以操作select list。 要修改table可以用addRows()和removeAllRows()。要修改列表(select列表和ul,ol列表)可以用addOptions()和removeAllOptions()。 还有一些其他功能不是DWRUtil的一部分。但它们也很有用,它们可以用来解决一些小问题,但是它们不是对于所有任都通用的。
7.1 $() $() 函数(它是合法的Javascript名字) 是从Protoype偷来的主意。 大略上的讲: $ = document.getElementById。 因为在Ajax程序中,你会需要写很多这样的语句,所以使用 $() 会更简洁。 通过指定的id来查找当前HTML文档中的元素,如果传递给它多个参数,它会返回找到的元素的数组。所有非String类型的参数会被原封不动的返回。这个函数的灵感来至于prototype库,但是它可以在更多的浏览器上运行。 可以看看DWRUtil.toDescriptiveString的演示。 从技术角度来讲他在IE5.0中是不能使用的,因为它使用了Array.push,尽管如此通常它只是用来同engine.js一起工作。如果你不想要engine.js并且在IE5.0中使用,那么你最好为Array.push找个替代品。
7.2 addOptions and removeAllOptions DWR的一个常遇到的任务就是根据选项填充选择列表。下面的例子就是根据输入填充列表。 下面将介绍 DWRUtil.addOptions() 的几种是用方法。 如果你希望在你更新了select以后,它仍然保持运来的选择,你要像下面这样做: var sel = DWRUtil.getValue(id); DWRUtil.removeAllOptions(id); DWRUtil.addOptions(id, ...); DWRUtil.setValue(id, sel); 55 / 92 如果你想加入一个初始的"Please select..." 选项那么你可以直接加入下面的语句: DWRUtil.addOptions(id, \["Please select ..."]); DWRUtil.addOptions有5种模式 数组: DWRUtil.addOptions(selectid, array)² 会创建一堆option,每个option的文字和值都是数组元素中的值。 对象数组 (指定text):² DWRUtil.addOptions(selectid, data, prop) 用每个数组元素创造一个option,option的值和文字都是在prop中指定的对象的属性。 对象数组 (指定text和value值):² DWRUtil.addOptions(selectid, array, valueprop, textprop) 用每个数组元素创造一个option,option的值是对象的valueprop属性,option的文字是对象的textprop属性。 对象:² DWRUtil.addOptions(selectid, map, reverse)用每个属性创建一个option。对象属性名用来作为option的值,对象属性值用来作为属性的文字,这听上去有些不对。但是事实上却是正确的方式。如果reverse参数被设置为true,那么对象属性值用来作为选项的值。 ² 对象的Map: DWRUtil.addOptions(selectid, map, valueprop, textprop) 用map中的每一个对象创建一个option。用对象的valueprop属性做为option的value,用对象的textprop属性做为option的文字。 ² ol 或 ul 列表: DWRUtil.addOptions(ulid, array) 用数组中的元素创建一堆li元素,他们的innerHTML是数组元素中的值。这种模式可以用来创建ul和ol列表。 这是网上的例子
7.3 addRows and removeAllRows DWR通过这两个函数来帮你操作table: DWRUtil.addRows() 和 DWRUtil.removeAllRows() 。这个函数的第一个参数都是table、tbody、thead、tfoot的id。一般来说最好使用tbody,因为这样可以保持你的header和footer行不变,并且可以防止Internet Explorer的bug。 DWRUtil.removeAllRows()l DWRUtil.removeAllRows(id); 描述: 通过id删除table中所有行。 参数: id: table元素的id(最好是tbody元素的id)
DWRUtil.addRows()l DWRUtil.addRows(id, array, cellfuncs, [options]); 描述: 向指定id的table元素添加行。它使用数组中的每一个元素在table中创建一行。然后用cellfuncs数组中的没有函数创建一个列。单元格是依次用cellfunc根据没有数组中的元素创建出来的。 DWR1.1开始,addRows()也可以用对象做为数据。如果你用一个对象代替一个数组来创建单元格,这个对象会被传递给cell函数。 参数: id: table元素的id(最好是tbody元素的id) array: 数组(DWR1.1以后可以是对象),做为更新表格数据。 cellfuncs: 函数数组,从传递过来的行数据中提取单元格数据。 options: 一个包含选项的对象(见下面) 选项包括: rowCreator: 一个用来创建行的函数(例如,你希望个tr加个css). 默认是返回一个document.createElement("tr") cellCreator: 一个用来创建单元格的函数(例如,用th代替td). 默认返回一个document.createElement("td") 这是网上的例子
7.4 getText getText(id)和getValue(id)很相似。出了它是为select列表设计的。你可能需要取得显示的文字,而不是当前选项的值。 这是网上的例子
7.5 getValue DWRUtil.getValue(id)是 setValue()对应的"读版本"。它可以从HTML元素中取出其中的值,而你不用管这个元素是select列表还是一个div。 这个函数能操作大多数HTML元素包括select(去处当前选项的值而不是文字)、input元素(包括textarea)、div和span。 这是网上的例子
7.6 getValues getValues()和getValue()非常相似,除了输入的是包含name/value对的javascript对象。name是HTML元素的ID,value会被更改为这些ID对象元素的内容。这个函数不会返回对象,它只更改传递给它的值。从DWR1.1开始getValues()可以传入一个HTML元素(一个DOM对象或者id字符串),然后从它生成一个reply对象。 这是网上的例子
7.7 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()事件只存在于<FORM ...>元素上 这是网上的例子
7.8 selectRange 选择一个输入框中的一定范围的文字。 你可能为了实现类似"Google suggest"类型的功能而需要选择输入框中的一定范围的文字,但是不同浏览器间选择的模型不一样。这DWRUtil函数可以帮你实现。 DWRUtil.selectRange(ele, start, end) 这是网上的例子
7.9 setValue DWRUtil.setValue(id, value)根据第一个参数中指定的id找到相应元素,并根据第二个参数改变其中的值。 这个函数能操作大多数HTML元素包括select(去处当前选项的值而不是文字)、input元素(包括textarea)、div和span。 这是网上的例子
7.10 setValues setValues()和setValue()非常相似,除了输入的是包含name/value对的javascript对象。name是HTML元素的ID,value是你想要设置给相应的元素的值。 这是网上的例子
7.11 toDescriptiveString DWRUtil.toDescriptiveString()函数比默认的toString()更好。第一个参数是要调试的对象,第二个参数是可选的,用来指定内容深入的层次: 0: 单行调试 1: 多行调试,但不深入到子对象。 2: 多行调试,深入到第二层子对象 以此类推。一般调试到第二级是最佳的。 还有第三个参数,定义初始缩进。这个函数不应该被用于调式程序之外,因为以后可能会有变化。 这是网上的例子
7.12 useLoadingMessage 这个方法将来可能被废弃,因为这个实现实在太专断了。为什么是红色,为什么在右上角,等等。唯一的真正答案就是:抄袭GMail。这里的建议是以本页面中的代码为模板,根据你的需求自定义。你必须在页面加载以后调用这个方法(例如,不要在onload()事件触发之前调用),因为它要创建一个隐藏的div来容纳消息。
最简单的做法时在onload事件中调用DWRUtil.useLoadingMessage,像这样:
<head>
<script>
function init() { DWRUtil.useLoadingMessage(); }
</script> ...
</head>
<body onload="init();"> ...
可能有些情况下你是不能容易的编辑header和body标签(如果你在使用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(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 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");
7.13 Submission box h1 非util.js中的功能这里有一些功能不适合加入到DWRUtil中。它们在解决一下特殊问题是很有用,但是他们还不够通用以适用任何场合。 62 / 92 修补浏览器事件 如果你创建了一个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框架中DWRUtil的方法的更多相关文章
- thinkphp 框架中的一部分方法解析
1 thinkphp 框架 中判断输入的数值和数据库中的数值是否一致 首先 需要在view文件夹下建一个模板 名为zhuce.html <html> <head> &l ...
- Laravel框架中的make方法详解
为什么网上已经有这么多的介绍Laravel的执行流程了,Laravel的容器详解了,Laravel的特性了,Laravel的启动过程了之类的文章,我还要来再分享呢? 因为,每个人的思维方式和方向是不一 ...
- elementUI 等 UI框架中,@change方法传递参数
有些业务中,在使用 @change 回调的时候需要动态获取当前循环下的特定值,但是@change方法一旦传递参数就会覆盖原本的数据,对此,有两种方法解决: // 这种方法据说会改变 this 指向 ...
- layui框架中关于table方法级渲染和自动化渲染之间的区别简单介绍
方法级渲染: <table class="layui-hide" id="LAY_table_user" lay-filter="user&qu ...
- CI框架中 日志输出方法log_message()只允许输出字符串解决方案
1.修改CodeIgniter/index.php,添加如下: define('ROOTDIR',dirname(__FILE__).'/'); 2.修改CodeIgniter/application ...
- TP框架中的多种方法代码(C,G,L,T,I,N,D,M,A,R,B,U,W,S,F,E)
C方法 function C($name=null, $value=null,$default=null) { static $_config = array(); // 无参数时获取所有 if (e ...
- AJAX技术之DWR框架
DWR(Direct Web Remoting)是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架,可以帮助开发人员开发包含AJAX技术的网站.它可以允许在浏览器里的代码使用运行在 ...
- dwr框架介绍
转: [DWR框架]过时了吗? 置顶 2018年06月02日 11:59:02 许你笑颜 阅读数:4129 版权声明: https://blog.csdn.net/smileyan9/articl ...
- Flask 框架中 上下文基础理念,包括cookie,session存储方法,requset属性,current_app模块和g模块
Flask中上下文,分为请求上下文和应用上下文.既状态留存 ,就是把变量存在某一个地方可以调用 请求上下文:实际就是request和session用法理念,既都是可以存储东西. 应用上下文:既变量共享 ...
随机推荐
- 算法复习——1D/1Ddp优化
搬讲义~~~~ 题目1:玩具装箱(bzoj1010) Description P教授要去看奥运,但是他舍不下他的玩具,于是他决定把所有的玩具运到北京.他使用自己的压缩器进行压缩,其可以将任意物品变成一 ...
- 关于npm run dev和npm run build的问题
之前build打包好在我本地运行是没问题的,但是发给后端部署,他说我的路径有问题,这个是由于vue-cli默认的打包路径 的“/”根目录,由于文件没有部署到根目录所以出现了这个问题. 修改webpac ...
- 【Visual Studio】Windows program compatibility mode is on, turn it off……
[问题描述]Windows 10上安装 Visual Studio Ultimate 2013,出现下面错误: [解决方案]将.iso文件解压到硬盘再安装.
- svn不是内部或外部命令?
svn不是内部或外部命令? 我的系统是Win7, [计算机]-->右键[属性]-->[高级系统设置]-->[环境变量]-->[系统变量 (S)]-->[Path]--&g ...
- ajax操作提交整个表单内容
1 2 3 4 5 6 7 8 9 10 11 12 13 $.ajax({ cache: true, type: "POST ...
- Swoole RPC 的实现
目录 概述 实现效果 代码 小结 概述 这是关于 Swoole 学习的第七篇文章:Swoole RPC 的实现. 第六篇:Swoole 整合成一个小框架 第五篇:Swoole 多协议 多端口 的应用 ...
- spring ConfigurableListableBeanFactory 接口
接口继承关系如上图. ConfigurableListableBeanFactory具体: 1.2个忽略自动装配的的方法. 2.1个注册一个可分解依赖的方法. 3.1个判断指定的Bean是否有资格作为 ...
- BZOJ1367【Baltic2004】sequence
题面 Description Input Output 一个整数R Sample Input 7 9 4 8 20 14 15 18 Sample Output 13 Hint 所求的Z序列为6,7, ...
- xshell配置
字体:DejaVu Sans Mono 或者 Consolas 11号
- 分布式文件系统 FastDFS 5.0.8 & Linux CentOS 6.7 安装配置
原文:http://blog.csdn.net/wlwlwlwl015/article/details/52619851 前言 项目中用到文件服务器,有朋友推荐用fastdfs,所以就了解学习了一番, ...