知识点
相关文章
更多最近更新
更多深入浅出dwr系列教程之4.util.js工具包的应用
2019-03-10 07:45|来源: 网友
util.js工具包包含了一些实用函数来帮助你用javascript操作从服务器返回的数据数据，以便来更新web页面。 也可以在DWR以外使用它，因为它不依赖于DWR的其他部分。下面介绍这个工具的主要函数。
$()函数
$() 函数实现的功能相当于 document.getElementById方法。 因为在Ajax程序中，经常需要写很多这样的语句，所以使用 $() 会更简洁。它通过指定的id来查找当前HTML文档中的元素，如果传递给它多个参数，它会返回找到的元素的数组。所有非String类型的参数会被原封不动的返回。这个函数的灵感来至于prototype库，但是它可以在更多的浏览器上运行。
$() 函数的使用方法为：
var searchexp = $("searchbox").value
<!--对应HTML表单的ID-->
<input id="searchbox"/>
addOptions与removeAllOptions函数
在DWR项目应用中，经常需要根据所选项来填充选择列表。实现这种功能可能通过调用addOptions与 removeAllOptions函数来填充或移除列表。例如，如果希望在更新了select以后，它仍然保持更新前的选择项，实现方法如下：
var sel = dwr.util.getValue(id);
dwr.util.removeAllOptions(id);
Array array = new Array[ 'Africa', 'America', 'Asia','Australasia', 'Europe' ];
dwr.util.addOptions("id ",array);
dwr.util.setValue(id, sel);
如果想加入一个初始的"请选择..." 选项，那么可以直接加入下面的语句：
dwr.util.addOptions(id, /["请选择 ..."]);
dwr.util.addOptions有5种模式，分别为：
1) 数组模式：dwr.util.addOptions(selectid, array) 会创建多个option，每个option的文字和值都是数组元素中的值。
2) 对象数组模式：(指定text)： dwr.util.addOptions(selectid, data, prop) 用数组中的每个元素创造一个option，option的值和文字都是在prop中指定的对象的属性。例如：
dwr.util.addOptions("demo",
[{ name:'Africa', id:'AF' },
{ name:'America', id:'AM' },
{ name:'Asia', id:'AS' },
{ name:'Australasia', id:'AU' },
{ name:'Europe', id:'EU' }],'id','name');
3) 对象数组模式： (指定text和value值)： dwr.util.addOptions(selectid, array, valueprop,textprop) 用数组中的每个元素创造一个option，option的值是对象的valueprop属性，option的文字是对象的textprop属性。 这种情况下,你需要指定要显示 beans 的 property 以及 对应的 bean 值，例如：
public class Person {
privateString name;
privateInteger id;
public voidset(){……}
publicString get(){……}
}
dwr.util.addOptions("demo",array,'id','name');
其中id指向及bean的id属性，在optiong中对应value，name指向bean的name属性，对应下拉框中显示的哪个值。
4) 对象模式： dwr.util.addOptions(selectid, map, reverse)用每个属性创建一个option。对象的属性名用来作为option的值，对象的属性值用来作为属性的文字，如果reverse参数被设置为true，那么对象的属性值用来作为选项的值。
5) 对象的Map模式：dwr.util.addOptions(selectid, map, valueprop, textprop) 用map中的每一个对象创建一个option。用对象的valueprop属性做为option的value，用对象的textprop属性做为option的文字。
6) ol 或 ul 列表模式：dwr.util.addOptions(ulid, array) 用数组中的元素创建多个li元素，它们的innerHTML是数组元素中的值。这种模式可以用来创建ul和ol列表。
addRows与 removeAllRows函数
在DWR应用中，通过addRows与 removeAllRows这两个函数来操作table表格，这个函数的第一个参数都是table、tbody、thead、tfoot的id。一般来说最好使用tbody，因为这样可以保持header和footer行不变。它们的用法如下：
1) dwr.util.removeAllRows()
dwr.util.removeAllRows(id);
通过table元素的id删除table中所有行。
如果要删除表格中的某一行，则可用如下方法：
function deleteRows(id){
vartbody=document.getElementById("tb1");// tbody 的id
var trow=document.getElementById(id);//要删除的行号
if(confirm("确定删除?")){
tbody.removeChild(trow);
}
}
2) dwr.util.addRows()
dwr.util.addRows(id, array, cellfuncs, [options]);
这行语句向指定id的table元素添加行。它使用数组中的每一个元素在table中创建一行。然后用cellfuncs从传递过来的行数据中提取单元格数据。其中参数：
id： table元素的id(最好是tbody元素的id)
array：数组或对象，做为更新表格数据。
cellfuncs： 函数数组，从传递过来的行数据中提取单元格数据。
options： 一个包含选项的对象，选项包括一个用来创建行的函数rowCreator(例如希望给tr加上css)， 默认值是返回一个document.createElement("tr")。一个用来创建单元格的函数cellCreator(例如用th代替td)。 默认返回一个document.createElement("td")。下面就是一个向table元素添加行的应用例子，代码如下：
var cellFuncs = [
function(data) { return data; },
function(data) { return data.toUpperCase();},
function(data) {
return "<inputtype='button' value='提交' onclick='alert(/"测试/");'/>";
},
function(data) { return count++; }
];
var count = 1;
dwr.util.addRows( "t1", , cellFuncs, {escapeHtml:false });
<!—对应的HTML内容-->
<table border="1"width="110%" id="table17"name="table17" height="27">
<tbody id="t1" name="t1">
</tbody>
</table>
getText函数
getText(id)和getValue(id)相似。用它可以得到select列表项目的显示的文本，而不是当前选项的值。
getValue函数
dwr.util.getValue(id)可以从HTML元素中取出其中的值，这个函数能操作大多数HTML元素，其中包括select(去处当前选项的值而不是文字)、input元素(包括textarea)、div和span。下面就是一个getValue函数的应用例子，实现代码如下：
<html>
<head>
<title></title>
<script type="text/javascript"src="dwr/util.js"></script>
<script type="text/javascript"src="dwr/engine.js"></script>
<script>
function getValue(){
var cnId =dwr.util.getValue("myId");
var cnValue =dwr.util.getValue("myValue");
alert(dwr.util.getValue("myId"));
}
</script>
</head>
<body>
<input type="text"value="" id="myId" />,
<input type="text"value="" id="myValue" />
<input type="button"value="setValue" onclick="getValue();" />
</body>
</html>
getValues函数
getValues()得到的是包含name/value对的javascript对象。name是HTML元素的ID，value会被更改为这些ID对象元素的内容。getValues()可以传入一个HTML元素(一个DOM对象或者id字符串)象。这个函数不会返回对象，它只更改传递给它的值。下面就是一个getValues函数的应用例子，实现代码如下：
var person = { id:1, name:'tfnew21', address:'北京', salary:10000 };
dwr.util.getValues(person);
alert(person.name); //访问person对象的属于，运行后会在窗口中显示’tfnew21’字符串
dwr.util.getValues({textarea:null,select:null,text:null,password:null,button:null})
alert(textarea.value);// 执行后textarea.value的值为"test"
//HTML中的代码
<input type="textarea"id="textarea" value="test" />
<input type="text" id="text"value="tfnew21" />
<input type="password"id="password" value="12345" />
<select id="select">
<option value="1" select>香蕉</option>
</select>
onReturn函数
定义在输入框中按回车的响应，防止执行submit。当使用Ajax时，往往需要的触发一些Javscript。 不幸的是不同的浏览器处理这个事件的方式不一样。所以dwr.util.onReturn修复了这个差异。如果需要在一个表单元素中按回车时触发一些Javscript，实现代码如下：
<input type="text"onkeypress="dwr.util.onReturn(event,submitFunction)"/>
<input type="button"onclick="submitFunction()"/>
这个函数的工作原理与onSubmit()事件相似，只能存在于<FORM >元素中。
selectRange函数
selectRange用于选择一个输入框中的一定范围的文字。 调用方法如下：
dwr.util.selectRange(ele, start, end)//ele输入ID，start开始位置，end结尾位置
例如:<input type="text" id="sel-test"value="0123456">
dwr.util.selectRange("sel-test", 2,5);
setValue函数
dwr.util.setValue(id, value)根据第一个参数中指定的id找到相应元素，并根据第二个参数改变其中的值。 这个函数能操作大多数HTML元素，包括select、input元素(包括textarea)、div和span。例如：下面就是一个getValue函数的应用例子，实现代码如下：
<html>
<head>
<title></title>
<scripttype="text/javascript" src="dwr/util.js"></script>
<scripttype="text/javascript" src="dwr/engine.js"></script>
<script>
function setValue(){
var cnId =dwr.util.getValue("myId");
var cnValue =dwr.util.getValue("myValue");
dwr.util.setValue(cnId, cnValue);
alert(dwr.util.getValue("myId"));
}
</script>
</head>
<body>
dwr.util.setValue(
<input type="text"value="" id="myId" />,
<input type="text"value="" id="myValue" />
)
<input type="button"value="setValue" onclick="setValue();" />
</body>
</html>
setValues函数
setValues()和setValue()非常相似，但它传入的参数是一个拥有多个属性的javascript object，属性名称是html页面元素的id，属性value为html页面元素的value。下面就是一个setValues函数的应用例子，实现代码如下：
<html>
<head>
<title></title>
<scripttype="text/javascript" src="dwr/util.js"></script>
<scripttype="text/javascript"src="dwr/engine.js"></script>
<script>
functionsetValue(){
varcnId = {myAreaText:"tfnew21",myDiv:"ddr"};
dwr.util.setValues(cnId);
}
</script>
</head>
<body>
<inputtype="button" value="setValue"onclick="setValue();" /><br />
id=myAreaText
<textareaid="myAreaText" value=""></textarea><br />
id=myDiv
<divid="myDiv"></div>
</body>
</html>
toDescriptiveString函数
toDescriptiveString函数是带debug信息的toString，第一个为将要debug的对象，第二个参数为处理等级。等级如下：
0：单行调试
1：不分析子元素的多行调试
2： 最多分析到第二层子元素的多行调试
调用方法如下：
<input type="text" id="text">
dwr.util.toDescriptiveString("text",0);
useLoadingMessage函数
useLoadingMessage函数作用是当发出ajax请求后,页面显示的提示等待信息，调用方法如下：
function searchUser(){
var loadinfo ="loading....."
try{
regUser.queryAllUser(userList);
dwr.util.useLoadingMessage(loadinfo);
}catch(e){ }
}
以上介绍了DWR的工用原理就实现方法，同时介绍了两个工具包的常用函数的用法
相关问答
更多-
深入浅出JAVA怎么样[2022-04-24]
作为业余学习的读者，我是没太多精力和耐心去读那些结构严谨篇章有序的教科书的。 我需要的不是专业老师把一个个概念和知识点抛给我，而是有人能解答我的一个个疑...... -
深入浅出设计模式与深入浅出设计模式C#/java，有什么区别，另外求这两本书的PDF[2022-08-03]
深入浅出设计模式是HeadFirst系列的，写的很好，后面那本就不用看了，垃圾的要死 -
求一MFC深入浅出教程[2023-01-10]
《mfc windows程序设计》 适合初学者，经典，不推荐《深入浅出MFC》，这个不适合初学者，需要一定功底才行！ -
问哪位大神有《深入浅出Hadoop实战开发》的视频教程，跪求啊[2022-05-02]
邮件已经发出，过几分钟后记得查收（可能在垃圾箱里边），收到后觉得还算满意请点下边的采纳通知我。如果10分钟后还没收到，请直接在本问题里追问我，我会再次发送。 最后如果在采纳之余能加点分数，那就OK！ -
请问哪位有《深入浅出Hadoop实战开发》的视频教程？？？？[2022-06-12]
http://yun.baidu.com/s/1gdxfOrT -
哪位《深入浅出玩转51》这本书的pdf，求发一份！[2022-12-04]
《深入浅出玩转51单片机 工程师经验手记》，有pdf，百度私信你了 -
哪有《Head First Design Patterns》深入浅出设计模式(pdf)下载[2023-11-05]
http://forum.springside.org.cn/viewthread.php?tid=1092 这个有,不过要注册的,你来找我要账号吧! -
能给我一份吗？《深入浅出Hadoop实战开发》[2022-04-04]
这一份视频应该只能花钱购买 -
哪里有《深入浅出设计模式 中文版》 可以下载[2022-04-09]
http://www.51leifeng.net/thread-5175-1-1.html 自己注册个帐号就可以下了 -
求《深入浅出extjs》 pdf 第二版[2022-01-06]
书比较新，网上不好找 还是买吧，我都是买的新书。 不过看完这本书的感觉是，它几乎不讲底层源码，如果你想在ExtJS上达到大师级的水平的话，"ExtJs源码分析与实例宝典"似乎不错。我正想买那本书呢。 如果你只是想了解Ext一些常用功能的话，《深入浅出extjs》也凑合