(util.js文件的链接:http://pan.baidu.com/s/1kUMJNrL 密码:fiqs)
1.前言
此处所指的列表,不仅包括<select…/>元素产生列表框、下拉菜单,还包括<ul…/>和<ol…/>列表。操作这种列表当然可直接通过DOM操作来完成,但通过util.js函数将更加简单。
处理列表相关函数主要由dwr.util对象的removeAllOptions()和addOptions()两个函数写成。其中removeAllOptions()函数用于删除列表中的所有项,而addOptions()则用于添加列表项。addOption()共有如下5种形式。
1) 字符串数组:dwr.util.addOptions(selectid,array).
2) 对象数组:dwr.util.addOptions(selected,data,prop).
3) 对象数组:dwr.util.addOptions(selected,array,valueprop,textprop).
4) 对象:dwr.util.addOptions(selected,mapObject,reverse).
5) 使用对象作为属性值的对象:dwr.util.addOptions(selected,mapObj,valueprop,textprop).
2.例子
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="OwenWilliam" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> util.js测试 </title>
</head>
<body>
<ol id="test"></ol>
<input type="button" value="添加选项" οnclick="add();"/>
<input type="button" value="删除选项" οnclick="del();"/>
<script src="../util.js" type="text/javascript"></script>
<script type="text/javascript">
// 定义一个对象数组
var objArr = [
{book:'Java' , price:'99'},
{book:'Ajax' , price:'79'},
{book:'XML' , price:'69'}
];
function add()
{
// 以对象数组为列表框添加列表项
// 以第三个参数指定的属性作为各列表项的文本
// 以第四个参数已经没有作用了
dwr.util.addOptions("test" , objArr , 'book' , 'price');
}
function del()
{
// 删除所有列表项
dwr.util.removeAllOptions("test");
}
</script>
</body>
</html