- 浏览: 115051 次
- 性别:
- 来自: 上海
-
文章分类
最新评论
util.js包含一些有用的函数function,用于在客户端页面调用.
主要功能如下：
代码
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");
代码
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 值
例如:
function processCallback(provinces){
//provinces是一个数组，是远程bean的返回值List<String>
var arrayObject=new Array();
for(var i=0;i<provinces.length;i++)
{
arrayObject[i]={value:provinces[i],name:i};
}
dwr.util.addOptions("provinceSel",arrayObject,"name","value");
}
其中provinceSel指向select的id，name指向option中对应key，value指向对应下拉框中value.
代码
@ 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>这样的html元素
3、addRows and removeAllRows 填充表格
DWR 提供2个函数来操作 table；
----------------------------
DWRUtil.addRows(); 添加行
----------------------------
DWRUtil.removeAllRows(id); 删除指定id的table
----------------------------
下面着重看一下 addRows() 函数：
DWRUtil.addRows(id, array, cellfuncs, [options]);
其中id 对应 table 的 id(更适合tbody，推荐使用 tbody)
array 是server端服务器的返回值，比如list，map等等
cellfuncs 及用返回值来填充表格
[options] 用来设置表格样式，它有2个内部函数来设置单元格样式(rowCreator、cellCreator)。
比如: server端返回list，而list中存放的是下面这个 bean：
代码
public class Person {
private String name;
private Integer id;
private String address;
public void set(){……}
public String get(){……}
}
下面用 DWRUtil.addRows();
代码
function processCallback(data){
var cellfuncs = [
function(data){return data.id;},
function(data){return data.name;},
function(data){return data.address;},
function(data){
var idd = data.id;
var delButton = document.createElement("input");
delButton.setAttribute('type','button');
delButton.setAttribute('onclick', 'delPerson('+ idd +')');
delButton.setAttribute("id","delete");
delButton.setAttribute("value","delete");
return delButton;
},
function(data){
var idd = data.id;
var editButton = document.createElement("input");
editButton.setAttribute('type','button');
editButton.setAttribute('onclick', 'editPerson('+ idd +')');
editButton.setAttribute("id","edit");
editButton.setAttribute("value","edit");
return editButton;
}
];
DWRUtil.removeAllRows('body');
DWRUtil.addRows("body", 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("table").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);
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){
}
}
-----------------------------------------------------------------------------------------
2008-05-20 16:58功能函数：
$()
DWRUtil.getText(id)
DWRUtil.getValue(id)
DWRUtil.setValue(id, value)
DWRUtil.getValues()
DWRUtil.setValues()
DWRUtil.addOptions and DWRUtil.removeAllOptions
DWRUtil.addRows and DWRUtil.removeAllRows
DWRUtil.onReturn
DWRUtil.toDescriptiveString
DWRUtil.useLoadingMessage
修补浏览器事件
util.js包含了一些工具函数来帮助你用javascript数据(例如从服务器返回的数据)来更新你的web页面。
你可以在DWR以外使用它，因为它不依赖于DWR的其他部分。
4个基本的操作页面的函数：getValue[s]()和setValue[s]()可以操作大部分HTML元素除了table，list和image。getText()可以操作select list。
要修改table可以用addRows()和removeAllRows()。要修改列表(select列表和ul,ol列表)可以用addOptions()和removeAllOptions()。
还有一些其他功能不是DWRUtil的一部分。但它们也很有用，它们可以用来解决一些小问题，但是它们不是对于所有任都通用的。
1、$()
$() 函数(它是合法的Javascript名字) 是从Protoype偷来的主意。大略上的讲： $ = document.getElementById。 因为在Ajax程序中，你会需要写很多这样的语句，所以使用 $() 会更简洁。
通过指定的id来查找当前HTML文档中的元素，如果传递给它多个参数，它会返回找到的元素的数组。所有非String类型的参数会被原封不动的返回。这个函数的灵感来至于prototype库，但是它可以在更多的浏览器上运行。
从技术角度来讲他在IE5.0中是不能使用的，因为它使用了Array.push，尽管如此通常它只是用来同engine.js一起工作。如果你不想要engine.js并且在IE5.0中使用，那么你最好为Array.push找个替代品。
2、DWRUtil.getText(id)
getText(id)和getValue(id)很相似。它是为select列表设计的。你可能需要取得显示的文字，而不是当前选项的值。
例子：getahead.ltd.uk/dwr/browser/util/gettext
3、DWRUtil.getValue(id)
DWRUtil.getValue(id)是 setValue()对应的"读版本"。它可以从HTML元素中取出其中的值，而你不用管这个元素是select列表还是一个div。
这个函数能操作大多数HTML元素包括select(获取当前选项的值而不是文字)、input元素(包括textarea)、div和span。
4、DWRUtil.setValue(id, value)
DWRUtil.setValue(id, value)根据第一个参数中指定的id找到相应元素，并根据第二个参数改变其中的值。
这个函数能操作大多数HTML元素包括select(设置当前选项的值而不是文字)、input元素(包括textarea)、div和span。
5、DWRUtil.getValues()
getValues()和getValue()非常相似，除了输入的是包含name/value对的javascript对象。name是HTML元素的ID，value会被更改为这些ID对象元素的内容。这个函数不会返回对象，它只更改传递给它的值。
【基于Form的getValues()】
从DWR1.1开始getValues()可以传入一个HTML元素(一个DOM对象或者id字符串)，然后从它生成一个reply对象。例子：getahead.ltd.uk/dwr/browser/util/getvalues
6、DWRUtil.setValues()
setValues()和setValue()非常相似，除了输入的是包含name/value对的javascript对象。name是HTML元素的ID，value是你想要设置给相应的元素的值。
7、DWRUtil.addOptions and DWRUtil.removeAllOptions
【生成列表】
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.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列表。
例子：getahead.ltd.uk/dwr/browser/lists
8、DWRUtil.addRows and DWRUtil.removeAllRows
【生成Table】
DWR通过这两个函数来帮你操作table： DWRUtil.addRows() 和 DWRUtil.removeAllRows() 。这个函数的第一个参数都是table、tbody、thead、tfoot的id。一般来说最好使用tbody，因为这样可以保持你的header和 footer行不变，并且可以防止Internet Explorer的bug。
【DWRUtil.removeAllRows()】
语法:
DWRUtil.removeAllRows(id);
描述:
通过id删除table中所有行。
参数:
id: table元素的id(最好是tbody元素的id)
【DWRUtil.addRows()】
语法:
DWRUtil.addRows(id, array, cellfuncs, [options]);
描述:
向指定id的table元素添加行。它使用数组中的每一个元素在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")
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
例子：getahead.ltd.uk/dwr/browser/tables
【动态编辑表格(Dynamically Editing a Table)】
例子：getahead.org/dwr/examples/table
9、DWRUtil.onReturn
当按下return键时，得到通知。
当表单中有input元素，触发return键会导致表单被提交。当使用Ajax时，这往往不是你想要的。而通常你需要的触发一些Javscript。
不幸的是不同的浏览器处理这个事件的方式不一样。所以DWRUtil.onReturn修复了这个差异。如果你需要一个同表单元素中按回车相同的特性，你可以用这样代码实现：
js 代码
<input type="text" onkeypress="DWRUtil.onReturn(event, submitFunction)">
<input type="button" onclick="submitFunction()">
你也可以使用onkeypress事件或者onkeydown事件，他们做同样的事情。
一般来说DWR不是一个Javascript类库，所以它应该试图满足这个需求。不管怎样，这是在使用Ajax过程中一个很有用函数。
【onSubmit】
这个函数的工作原理是onSubmit()事件只存在于form元素上。
例子：getahead.ltd.uk/dwr/browser/util/onreturn
10、DWRUtil.toDescriptiveString
DWRUtil.toDescriptiveString()函数比默认的toString()更好。第一个参数是要调试的对象，第二个参数是可选的，用来指定内容深入的层次：
0: 单行调试
1: 多行调试，但不深入到子对象。
2: 多行调试，深入到第二层子对象
以此类推。一般调试到第二级是最佳的。
还有第三个参数，定义初始缩进。这个函数不应该被用于调式程序之外，因为以后可能会有变化。
11、DWRUtil.useLoadingMessage
设置一个Gmail风格的加载信息。所有演示页面
● dynamic text getahead.ltd.uk/dwr/examples/text
● selection lists getahead.ltd.uk/dwr/examples/lists
● live tables getahead.ltd.uk/dwr/examples/table
● live forms getahead.ltd.uk/dwr/examples/form
● dynamic validation getahead.ltd.uk/dwr/examples/validation
● address entry
都使用了GMail风格的加载消息。
这个方法将来可能被废弃，因为这个实现实在太专断了。为什么是红色，为什么在右上角，等等。唯一的真正答案就是：抄袭GMail。这里的建议是以本页面中的代码为模板，根据你的需求自定义。
你必须在页面加载以后调用这个方法(例如，不要在onload()事件触发之前调用)，因为它要创建一个隐藏的div来容纳消息。
最简单的做法时在onload事件中调用DWRUtil.useLoadingMessage，像这样：
js 代码
function init() {
DWRUtil.useLoadingMessage();
}
可能有些情况下你是不能容易的编辑header和body标签(如果你在使用CMS，这很正常)，在这样的情况下你可以这样做：
js 代码
function init() {
DWRUtil.useLoadingMessage();
}
if (window.addEventListener) {
window.addEventListener("load", init, false);
}
else if (window.attachEvent) {
window.attachEvent("onload", init);
}
else {
window.onload = init;
}
下面这些是这个函数的代码，它对于你要实现自己的加载消息很有用。这个函数的主要内容是动态创建一个div(id是disabledZone)来容纳消息。重要的代码是当远程调用时使它显示和隐藏：
js 代码
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';
});
}
下面的做法能简单的使用有加载消息图片：
js 代码
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");
12、修补浏览器事件
如果你创建了一个DOM元素，然后用addAttribute在这个元素上创建了一个事件，那么他们不能被正常的触发。你可以使用下面的脚本来遍历一个DOM树，并重新为他们绑定事件，这样他们就能正常的触发了。
把'click'改成你希望的事件。
js 代码
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);
}
}
}
13.
DWRUtil.selectRange("sel-test", , )
现有输入框 <input type=text id="sel-test" value="0123456789">, 则点击按钮时4567被选中: 0123456789
----------------------------------------------------------------------------------------------
2008-04-11 20:161、$() 获得页面参数值
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、$() 获得页面参数值2、addOptions and removeAllOptions 初始化下拉框3、addRows and removeAllRows 填充表格4、getText 取得text属性值5、getValue 取得form表单值6、getValues 取得form多个值7、onReturn 8、selectRange9、setValue10、setValues11、toDescriptiveString12、useLoadingMessage13、Submission box
*********************************************************************
//////////////////////http://blog.163.com/fzfx888//////////////////////////
*********************************************************************
Java代码
1、$()函数
IE5.0 不支持
$ = document.getElementById
取得form表单值
var name = $("name");
1、$()函数 IE5.0 不支持 $ = document.getElementById 取得form表单值 var name = $("name");
***********************************************************************************
///////////////////////////////////////////////////////////////////////////////////
***********************************************************************************
2、用于填充 select 下拉框 option
Java代码
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中方式：
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中方式：
Java代码
@ Simple Array Example: 简单数组
例如:
Array array = new Array[ 'Africa', 'America', 'Asia', 'Australasia', 'Europe' ]；
DWRUtil.addOptions("demo1",array);
@ Simple Array Example: 简单数组 例如: Array array = new Array[ 'Africa', 'America', 'Asia', 'Australasia', 'Europe' ]； DWRUtil.addOptions("demo1",array);
Java代码
@ 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属性，对应下拉框中显示的哪个值.
@ 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属性，对应下拉框中显示的哪个值.
Java代码
@ 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');
@ 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');
Java代码
@ Map Example 用制定的map来填充 options:
如果 server 返回 Map,呢么这样处理即可：
DWRUtil.addOptions( "demo3",map);
其中 value 对应 map keys，text 对应 map values；
@ Map Example 用制定的map来填充 options: 如果 server 返回 Map,呢么这样处理即可： DWRUtil.addOptions( "demo3",map); 其中 value 对应 map keys，text 对应 map values；
Java代码
@ <ul> and <ol> list editing
DWRUtil.addOptions() 函数不但可以填出select,开可以填出<ul>和<ol>这样的heml元素
@ <ul> and <ol> list editing DWRUtil.addOptions() 函数不但可以填出select,开可以填出<ul>和<ol>这样的heml元素
***********************************************************************************
///////////////////////////////fzfx88@163.com//////////////////////////////////////
***********************************************************************************
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：
Java代码
public class Person {
private String name;
private Integer id;
pirvate String address;
public void set(){……}
public String get(){……}
}
public class Person { private String name; private Integer id; pirvate String address; public void set(){……} public String get(){……} }
下面用 DWRUtil.addRows();
/******************************************************************************/
/****************** ***********fzfx88@hotmail.com********************************/
/*********************************************************************************/
Java代码
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";
}
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"; }
待续…………………………………………
/********************************************************************************/
/***********************QQ: 171505924 Gump **************************************/
/********************************************************************************/
4、getText 取得text属性值
DWRUtil.getText(id): 用来获得 option 中的文本
比如：
Java代码
<select id="select">
<option value="1"> 苹果 </option>
<option value="2" select> 香蕉 </option>
<option value="3"> 鸭梨 </option>
</select>
<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 表单值
有如下几种情况：
Java代码
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 的值;
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():
Java代码
<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}
<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里选一个范围
Java代码
DWRUtil.selectRange("sel-test", $("start").value, $("end").value);
比如:<input type="text" id="sel-test" value="012345678901234567890">
DWRUtil.selectRange("sel-test", 2, 15);
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请求后,页面显示的提示等待信息;
Java代码
function searchUser(){
var loadinfo = "loading....."
try{
regUser.queryAllUser(userList);
DWRUtil.useLoadingMessage(loadinfo);
}catch(e){
}
}
发表评论
-
javascript 中数组使用方法
2009-10-29 13:27 497/* 由于javascript是一种无类型语言,所以一个数 ... -
ajax基础
2009-11-03 10:10 640XMLHTTPRequest---->JavaScrip ... -
ajax基础-jquery
2009-11-03 10:12 806//---------------------------- ... -
正则基础
2009-11-03 10:16 599<html> <script> ... -
可编辑的表格
2009-11-03 10:23 6121脚本jqueryedit.js //在页面装载时，让所有的t ... -
DWR-基本配置文件
2009-11-03 10:33 6491 dwr.xml <?xml version=&quo ... -
DWR-笔记
2009-11-03 10:36 344var xmlrequestXml; function cre ... -
DWR-返回-参数为Map
2009-11-03 10:43 632方法1： fuction test{ tt.hello( ... -
DWR-返回-参数为集合
2009-11-03 10:54 396DWR中处理List调用返回JavaBean的java方法 4 ... -
dwr模拟google suggest
2009-11-03 11:07 3751 web.xml <!------ AutoSugge ... -
正则基础2
2009-11-04 14:42 5051111-1234 re \d{5}(-\d{4})? ?指前 ... -
cookie.js
2009-11-04 15:42 575js读写cookie可以提高效率，现对代码作仔细说明，以备用： ... -
Event对象的属性
2009-11-29 21:37 465function MyAlert() { var msg=&q ... -
javascript DOM
2009-11-29 21:51 478<!------------------///事件处理 ... -
javascript语法_函数_对象_数组
2009-11-29 21:52 374<script language="javas ... -
事件显示声明
2009-11-29 21:55 712<script type=text/javascript ... -
LavaLamp mean
2009-12-06 23:18 600具有flash效果的菜单，基于jquery Download ... -
ajax 书签
2009-12-30 15:17 645框架: Yahoo UIProtoTypeJQueryOpen ... -
给Dreamweaver安装jQuery插件jQuery_API.mxp
2010-01-20 12:38 758要让Dreamweaver支持jQuery自动提示代码功能，方 ... -
jQuery-强大的jQuery选择器 (详解)[转]
2010-01-21 11:48 2821. 基础选择器 Basics 名称 ...
相关推荐
在DWR框架中，`util.js`是一个核心组件，主要负责提供各种实用工具函数，便于开发者在前端进行操作。本文将深入探讨`util.js`的特性和功能，并结合提供的`dwr_util_api.docx`文档，详细介绍其使用方法。 1. **DWR...
`util.js`是DWR的工具库，包含了各种实用函数，帮助开发者更好地管理和优化使用DWR的应用程序。这些函数涵盖了数组操作、字符串处理、日期时间格式化、DOM操作等多个方面，增强了JavaScript的基本功能，提高了代码的...
总结来说，DWR提供了一个强大的工具，使得Web开发者可以通过JavaScript轻松地调用服务器端的Java方法，而`util.js` 和 `engine.js` 分别作为工具库和核心引擎，是实现这一功能的关键组件。在实际开发中，理解和掌握...
这个压缩包包含的是DWR的实例、相关的jar包以及两个重要的JavaScript文件——`engine.js`和`util.js`，这些都是学习DWR的关键组件。 1. **DWR基础概念**： DWR的核心功能是提供一种方式，使得客户端JavaScript可以...
`util.js` 和 `engine.js` 是DWR的核心JavaScript库。`util.js` 提供了一系列实用工具函数，用于辅助JavaScript编程，例如类型检查、对象遍历等。`engine.js` 是DWR引擎的核心，负责处理与服务器的通信，包括请求的...
"util.js"是DWR的实用工具脚本文件，它提供了一些辅助函数和通用功能，帮助开发者更好地管理和操作DWR的API。例如，它可能包含一些用于数据验证、对象序列化或调试的函数，这些函数在编写DWR应用时非常有用。 DWR的...
标题 "dwr需要的js（searchaAuthor+engine.js+util.js）.rar" 暗示了这个压缩包包含的是一组JavaScript文件，用于DWR（Direct Web Remoting）框架的功能扩展。DWR是一种开源Java库，允许Web应用程序在客户端和服务器...
DWR util.js 是一个JavaScript工具库，提供了一些有用的函数，用于在客户端页面调用。下面是DWR util.js中的主要功能： 1. $()函数：获取页面参数值 该函数用于获取页面参数值，例如：var name = $("name");获取名...
6. **dwr-util.jar**：提供了一些实用工具类，帮助处理常见任务。 7. **其他依赖的jar包**：DWR可能还需要一些其他的第三方库，如JavaScript引擎（如Rhino）或HTTP客户端库等，这些也会在压缩包中。 集成DWR到项目...
总结起来，"dwr城市选择的联动，util.js方法的使用，动态table"涉及的技术主要包括DWR框架、JavaScript DOM操作以及服务器端与客户端的数据交互。这些技术的综合运用，可以创建出高效、实时的Web应用，满足用户对...
2. **JavaScript API**：DWR提供了一组JavaScript库，使得客户端可以直接调用服务器端的方法，如同本地函数调用。这些API包括`Call`、`Util`、`Batch`等模块。 3. **Servlets**：DWR使用Servlets作为服务器端的入口...
Direct Web Remoting (DWR) 是一个开源的Java库，它允许在JavaScript和服务器端的Java之间进行双向通信，从而实现在Web应用中轻松地调用服务器端的方法。这个技术在Ajax（Asynchronous JavaScript and XML）开发中...
DWR 是一款强大的 Java 开发工具，它允许在客户端 JavaScript 和服务器端 Java 之间进行实时的、安全的双向通信，从而实现Ajax应用。以下是一份详细的DWR入门教程，帮助你快速理解和使用DWR。 ### 1. 安装DWR的Jar...
DWR使得JavaScript可以直接调用Java方法，就像是本地对象一样，极大地简化了Web应用程序的开发。在Java Web开发中，DWR常常用于构建富互联网应用（RIA）。 **DWR Jar包**： DWR的核心库是`dwr.jar`，它包含了所有...
通过 DWR，开发者可以在客户端的 JavaScript 中直接调用服务器端的 Java 方法，简化了 AJAX 开发过程。以下将详细介绍 DWR 的入门步骤和基本使用方法。 ### 1. 安装 DWR 首先，你需要获取 DWR 的库文件。这通常是...
在深入探讨DWR中Util.js的常用方法之前，我们先简要回顾一下DWR（Direct Web Remoting）是什么。DWR是一种开源框架，允许在Java服务器端与客户端之间进行Ajax调用，使得JavaScript可以直接调用服务器端的Java方法，...
2. **JavaScript调用**：首先需要引入DWR生成的JavaScript接口文件（如TestClass.js）、引擎文件（engine.js）和工具文件（util.js）。然后，可以直接调用生成的JavaScript对象及其方法。 对于具有简单返回值的Java...
这些文件包括`Hello.js`（定义JavaScript接口），`engine.js`（DWR引擎）和`util.js`（DWR的实用工具函数）。 为了调用`hello`方法，我们需要在HTML页面中引入这些JavaScript文件，并定义一个JavaScript函数来触发...
在DWR中，util.js是一个重要的辅助库，提供了多种方便的JavaScript函数，简化了DOM操作和数据处理。以下是对DWR util.js中一些关键功能的详细说明： 1. **`$("id")`**：这个函数类似于JavaScript的`document....