使用util.js处理列表

(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="添加选项" onclick="add();"/>
<input type="button" value="删除选项" onclick="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

3.运行结果

使用util.js处理列表_第1张图片

你可能感兴趣的:(JavaScript,web开发,DWR)