$("precloneNode1suf") 取得该对象;
DWRUtil.selectRange("selectRangeBasic", 5, 15) 选中selectRangeBasic文本框里面从第五个字符到第15个字符之间的字符.
DWRUtil._getSelection("selectRangeBasic") 得到selectRangeBasic文本框里选中的字符.
var arrayFive = [ 'One', 'Two', 'Three', 'Four', 'Five' ];
DWRUtil.addOptions('addOptionsBasic', arrayFive); 将数组添加到下拉菜单里面去;
DWRUtil.getValue('addOptionsBasic') 得到 addOptionsBasic 对象的值;
DWRUtil.getValue("precloneNode1Inner1suf", { textContent:true }); 后面加个参数,在 precloneNode1Inner1suf元素为"UL" 时,它返回了元素里面得值,也就是说去掉了HTML标签部分.
DWRUtil.getText('addOptionsBasic') 得到下拉框 addOptionsBasic 显示的文本;
var arrayObject = [
{ name:'One', value:'1' },
{ name:'Two', value:'2' },
{ name:'Three', value:'3' },
{ name:'Four', value:'4' },
{ name:'Five', value:'5' }
];
DWRUtil.addOptions('addOptionsObject1', arrayObject, "name"); 将数组添加到下拉菜单里面去;后面的参数是确定那个是给用户显示的文本,同时也是值;
DWRUtil.addOptions('addOptionsObject1', arrayObject, "name","value"); 同上,不过后面参数是: 3=文本;4=值;
var map = { one:1, two:2, three:3, four:4, five:5 };
DWRUtil.addOptions('addOptionsMap1', map); 同上, one 是值;1 是文本;
DWRUtil.addOptions('addOptionsMap1', map,true); 同上, 1 是值;one 是文本;
-------------------------------------------------------------------------------------
<ul id="removeItems">
<li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li>
</ul>
如果是列表显示,如上;则上面所有方法和select 下拉框使用一样;
-------------------------------------------------------------------------------------
DWRUtil.cloneNode('cloneNode1', { idPrefix:'pre', idSuffix:'suf' });克隆一个节点,参数一为要克隆的节点的id,第二个参数是在克隆的节点id前面加pre,后面加suf.(注意:如果该节点有子节点的话,子节点的名字也一样加)
DWRUtil.addRows(id, array, cellfuncs, [options]);
原理:
for each member in array
for each function in cellfuncs
create cell from cellfunc(array[i])
循环数组,循环函数,建立单元调用函数;(顺序决定)
例如:
DWRUtil.addRows('addRowsBasic', arrayFive, [
function(data) { return data; },
function(data) { return data.toUpperCase(); },
function(data) {
var input = document.createElement("input");
input.setAttribute("type", "button");
input.setAttribute("value", "DOM Test");
input.setAttribute("onclick", "alert('" + data + "');");
return input;
},
function(data) { return "<input type='button' value='innerHTML Test' onclick='alert(\"" + data + "\");'>"; }
]);
高级部分:
第四个参数为对单元的高级操作,主要下面的两个方法;
function defaultRowCreator(options) {
return document.createElement("tr");
};
function defaultCellCreator(options) {
return document.createElement("td");
};
例子:
DWRUtil.addRows( "demo2",[ 'Africa', 'America', 'Asia', 'Australasia', 'Europe' ] , cellFuncs, {
rowCreator:function(options) {
var row = document.createElement("tr");
var index = options.rowIndex * 50;
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.fontWeight = "bold";
return td;
}
});
其中 options 参数的属性可用的为:(没试过,自己试试吧)
rowData: the element value from the array (the same for all cells in a row)
rowIndex: the key (if map) or index (if array) from the collection
rowNum: The row number counting from 0 in this section (so if you are using tbody, it counts rows in the tbody and not the whole table)
data: The 'computed' data value for the cell (cellCreators only)
cellNum: The cell number that we are altering counting from 0 (cellCreators only)
DWRUtil.setValues(); 批量设置值;
var settings = {
setValuesDiv:"setValuesDiv",
setValuesSpan:"setValuesSpan",
setValuesSelect:"two",
setValuesText:"setValuesText",
setValuesPassword:"AB",
setValuesTextarea:"setValuesTextarea",
setValuesButton1:"B1-Two",
setValuesButton2:"B2-Two",
setValuesRadio1:true,
setValuesRadio2:false,
setValuesRadio3:"one",
setValuesRadio4:"two",
setValuesCheckbox1:true,
setValuesCheckbox2:false
};
DWRUtil.setValues(settings);
DWRUtil.getValues(empty);批量获取值;
var empty = {
setValuesDiv:null,
setValuesSpan:null,
setValuesSelect:null,
setValuesText:null,
setValuesPassword:null,
setValuesTextarea:null,
setValuesButton1:null,
setValuesButton2:null,
setValuesRadio1:null,
setValuesRadio2:null,
setValuesRadio3:null,
setValuesRadio4:null,
setValuesCheckbox1:null,
setValuesCheckbox2:null
};
DWRUtil.getValues(empty);
DWRUtil.useLoadingMessage("Ping");//类似gmail那个样子,在右上角显示加载"ping";可用自定样式,具体查询;http://getahead.ltd.uk/dwr/browser/util/useloadingmessage
DWRUtil.toDescriptiveString("id",数字);弹出调试信息,数字为0,1,2.一级比一级高.
DWRUtil.onReturn(event, submitFunction);一般在form表单里面,防止在文本框上按回车就提交表单.
例如:
<input type="text"
onkeypress="DWRUtil.onReturn(event, submitFunction)"/>
<input type="button" onclick="submitFunction()"/>
分享到:
相关推荐
1. **DWR框架概述**:DWR允许Web应用程序在客户端和服务器之间交换数据和调用方法,提供了丰富的API和配置选项,使得前后端交互更加简单。 2. **DWRUtil类**:DWRUtil是DWR提供的一系列实用工具函数的集合,包括但...
4. 调用方法:使用DWR提供的API(如DWR Engine的execute方法)来调用服务器端的方法,并处理返回的数据。 5. 错误处理:合理设置错误处理回调,以便在调用失败时能够及时捕获并处理问题。 总的来说,DWR通过提供...
DWR API 提供了一系列的方法来方便开发者进行数据的传递、UI操作等。 1. `DWRUtil` 是DWR提供的一个实用工具类,包含了多种用于操作DOM元素和数据的方法。例如: - `DWRUtil.selectRange("selectRangeBasic", 5, ...
- **JavaScript API**:DWR生成的JavaScript库提供了与远程Java对象交互的接口,如`dwr.engine`对象用于基本的调用控制,`DWRUtil`对象则提供了数据绑定和DOM操作的辅助方法。 - **安全配置**:必须正确配置DWR的...
这篇博客文章“关于使用DWR返回对象List的方法”主要探讨了如何通过DWR框架在Java后端处理数据并以List对象的形式返回给前端JavaScript。 在Web开发中,通常我们需要从服务器获取数据并在客户端展示,DWR通过AJAX...
DWR提供了丰富的JavaScript API,使得在客户端操作和服务器端Java代码交互变得简单。它处理了诸如JSON序列化、安全性和异步通信等复杂问题,让开发者能专注于业务逻辑。DWR还支持批量调用、缓存和错误处理,提升了...
Direct Web Remoting (DWR) 是一个开源Java库,它允许Web应用程序在浏览器和服务器之间进行实时、双向通信,无需使用插件或复杂的JavaScript。...通过这种方式,你可以实际操作并理解DWR的工作原理和使用方法。
3. **JavaScript API**:提供给前端开发者使用的接口,如`DWRUtil`、`RemoteObject`等,用于调用服务器端的方法。 三、Ajax的基础知识 Ajax不是一种单一的技术,而是一组用于创建更好、更快、更互动的Web应用程序的...
- 这个例子强调了"实用亲测试",意味着它应该是一个可以直接运行的示例,帮助开发者快速理解DWR的工作原理和使用方法。 通过这个例子,开发者可以学习到DWR的基本用法,包括如何配置、创建远程对象、调用方法以及...
本指南将带你了解DWR的基本使用方法。 **一、DWR的安装与配置** 1. **下载DWR**:首先,你需要从DWR的官方网站(http://directwebremoting.org/download.html)下载最新版本的DWR压缩包。 2. **添加依赖**:将下载...
- 在前端页面中,使用DWR提供的API来调用服务器端的方法,并处理返回的数据。 - 示例代码如下所示: ```javascript function loadNounList() { var child = document.getElementById("select"); // 获取select...
4. **JavaScript API**: 提供了一套简单的JavaScript接口,用于调用服务器端的方法和处理返回的结果。 **DWR的调用方式** 1. **Remote Procedure Call (RPC)**: 通过DWR,JavaScript可以直接调用服务器上的Java方法...
在DWR中,我们通常使用`DWRUtil`工具类来辅助数据处理,包括分页。**DWRUtil**提供了便捷的方法来操作HTML元素,例如填充表格或列表。我们可以创建一个服务器端的Java方法,该方法接收分页参数(如当前页数、每页...
- 使用DWR的API,如`DWRUtil`或`RemoteObject`,来调用服务器端的方法。 7. **安全性和权限控制**: - DWR提供了安全机制,比如白名单、签名等,确保只有授权的方法能被JavaScript调用。 - 在`dwr.xml`中配置...
Java DWR(Direct Web Remoting)是一个开源框架,它允许JavaScript和Java在Web应用程序中进行交互,从而实现在客户端和服务器端之间的实时...通过`dwrDemo`这个示例项目,开发者可以更深入地理解和学习DWR的使用方法。
- 编写JavaScript代码,使用DWR API(如`DWRUtil`、`DWREngine`等)来调用服务器端的方法。 - 在HTML页面上添加必要的DWR JavaScript库,并设置回调函数来处理服务器响应。 4. **DWR的运行流程**: - 浏览器加载...
- 使用DWR的JavaScript API创建远程对象实例,调用Java方法。 9. **DWR的优势**: - 易于使用:DWR通过自动JavaScript生成和简单的API降低了学习曲线。 - 性能优化:DWR缓存了Java对象,减少了网络传输的开销。 ...
这个"模拟DWR"的实例帮助我们理解了DWR的工作流程,包括前后端的交互、配置、API使用以及安全控制等方面。通过实践,我们可以更深入地掌握DWR在实际项目中的应用,提升Web应用的交互性和实时性。
2. **JavaScript API**:DWR提供了一组JavaScript库,如`DWREngine`和`DWRUtil`,用于在客户端调用服务端的方法。实例可能会演示如何使用这些API进行方法调用。 3. **实时推送**:DWR的Push功能允许服务器主动将...
- 你也可以使用`DWRUtil.debug`方法输出调试信息。 9. **集成与扩展** - DWR可以与Spring、Struts等其他框架无缝集成,简化你的开发工作。 - DWR允许自定义转换器和适配器,以处理特殊的数据类型或通信协议。 ...