使用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.运行结果

时间: 2024-09-27 23:28:15

使用util.js处理列表的相关文章

使用util.js处理表格

(util.js文件的链接:http://pan.baidu.com/s/1kUMJNrL 密码:fiqs) 1.前言 dwr.util提供了两个函数帮助我们处理HTML表格操作,这两个函数是addRows()和removeAllRows().其中用于向表格添加行,而removeAllRows用于删除表格中的全部行.两个函数的语法格式如下: 1)        dwr.util.removeAllRows(tableId):该函数只有一个参数,该参数是一个HTML表格元素的id属性值. 2)  

js事件列表

javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown IE4.N4 按下鼠标时触发此事件 onmouseup IE4.N4 鼠标按下后松开鼠标时触发此事件 onmouseover IE3.N2 当鼠标移动到某对象范围的上方时触发此事件 onmousemove IE4.N4 鼠标移动时触发此事件 onmouseout IE4.N3 当鼠标离开某对象范围

百度地图V2.0实践项目开发工具类bmap.util.js V1.4

/** * 百度地图使用工具类-v2.0(大眾版) * * @author boonya * @date 2013-7-7 * @address Chengdu,Sichuan,China * @email [email protected] * @company KWT.Shenzhen.Inc.com * @notice 有些功能需要加入外部JS库才能使用,另外还需要申请地图JS key . * 申请地址:http://developer.baidu.com/map/apply-key.ht

js 评论列表推送动画系列一

// qq音乐app观看mv的时候评论推送动画 看到了实现一下<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=

util.js

jQuery.extend({ parseJSON: function (data) {    if (typeof data !== "string" || !data) {        return null;    } // Make sure leading/trailing whitespace is removed (IE can't handle it)    data = jQuery.trim(data); try {        // Try to use th

关于vue.js中列表渲染练习

html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>列表渲染</title></head><body> <!-- v-for可以将一组数组渲染到列表当中 --> <!-- 以item in items的形式 其中 items是源数据 item是他的别名 --&

leaflet开源地图库源码研读(五)——extend、Object.create、fn.bind分析(Util.js文件)

一.extend:扩展对象的属性 1 var Util = { 2 extend: function (dest) { 3 var i, j, len, src; 4 for (j = 1, len = arguments.length; j < len; j++) { 5 src = arguments[j]; 6 for (i in src) { 7 dest[i] = src[i]; 8 } 9 } 10 return dest; 11 } 12 } 可以,看出extend方法里有2个fo

报表开发工具Finereport移动端app js接口列表【全】

应用报表工具Finereport的开发人员会发现其移动端app 同样也推出了很多js接口,那这些接口到底有多少,其移动端又有哪些地方支持调用js,这些接口具体又该如何调用呢.根据我平时的开发经验,给大家做个归纳整理,包括接口列表,相关的脚本函数及具体的演示实例,希望大家可以更有效地利用这些js接口来便利相关工作. 1. FineReport移动端哪些地方支持调用js 2. 控件支持的脚本函数 3. 分页预览报表支持的脚本函数 4. 填报预览报表支持的脚本函数 5. 常用的工具类脚本函数 6. 具

JS~一个列表中包含上移下移删除等功能

最近做了一个项目,包括了一个列表页,为了用户体验,操作均使用JS实现,其中包括在列表中实现上移,下移,删除等功能,前台JS,后端数据修改使用AJAX,本文主要说一下前台JS这块 先看一下页面的截图 看一下它的HTML结构,当然,这与前台切图有关,后端程序人员只负责写自己的JS这块,我以我们项目为例,看一下它们切的HTML <ul class="clearfix"> <li class="courseList"> <div class=&