1、DWR框架之Util详解,util.js,正如前面所说，util.js中提供了一些工具函数, 通过这些工具函数的帮助，我们可以以更 加简便的方式操作DOM。也就是说，我们 不学习util.js，我们使用javascript依然可以 实现相关的需求，只不过要多写一些代码， 使用util.js提供的函数可以帮助我们更加方便 的实现相应的功能或者需求。,准备工作:,getValue,语法结构: dwr.util.getValue(id);这个函数能操作大多数HTML元素包括select(获取 当前选项的值而不是文字)、input元素(包括textarea) 、p、h1、div和span。 对于sel
2、ect、input、textarea，获取是用户选中或者 输入的值，对于像p、h1、div、span等这样的标签, 则是获取的是标签中的内容。,setValue,语法: dwr.util.setValue(id,value);为指定元素设置value或者文本内容。 getValue适用哪些标签，setValue就适用哪 些标签。,getValues,直接看案例更好理解:/ 定义了一个JavaScript对象。/ 该对象的属性名对应于页面中的HTML元素的id属性var obj = txt : null,pass: null,area: null,select: null;/ 调用getValu
3、es方法后，obj的属性值将被设置为页面中对应HTML元素的值dwr.util.getValues(obj);var result = “;/ 通过遍历obj对象的属性，输出obj对象的所有属性值。for (var name in obj)result += objname + “n“;alert(result);,setValues,直接看案例更好理解:/ 定义了一个JSON格式的对象，该对象的每个属性名/ 对应页面中的一个HTML元素的ID属性值。var obj = txt : zhangsan,pass: 12345678,area: this is a textarea,select:
4、 two -要求下拉选择框有value属性为two的选项;/ 调用该方法后，页面中对应的HTML元素值将被设置为上面JSON对象的属性值dwr.util.setValues(obj);,addOptions案例一,var strArr = -请选择-,张三,李四,王五; / 以字符串数组来为列表框添加列表项 dwr.util.addOptions(“test“ , strArr);-注意：这个时候选项内容和选择值一样-大家可以回顾一下我们之前使用js是如何向 -select标签添加option子标签的。,addOptions案例二,/ 定义一个对象数组 var objArr = id:“1“,
5、name:张三, id:“2“,name:李四, id:“3“,name:王五;/ 以对象数组中name属性值为列表框添加列表项 dwr.util.addOptions(“test“ , objArr , name);,addOptions案例三,/ 定义一个对象数组 var objArr = id:“1“,name:张三, id:“2“,name:李四, id:“3“,name:王五;/ 以对象数组中name属性值为列表框添加列表项 /id属性值作为列表项的value属性值 dwr.util.addOptions(“test“ , objArr , id,name);,addOptions案
6、例四,var book = name : “后汉书“,price : “19“,publish : “中国文史出版社“ / 以对象为列表框添加列表项 / 对象的每个属性值将作为列表项的文本。 / 对象的每个属性名将作为列表项的值 dwr.util.addOptions(“test“ , book);,addOptions案例五,/ 定义一个每个属性值都是对象的对象 var objMap = fisrt:book:红楼梦 , price:69,second:book:聊斋志异 , price:59,third:book:三国演义 , price:49, ;/ 以对象添加列表项 /price属性对
7、应的选项的value属性值 /book属性对应的选项的文本内容 dwr.util.addOptions(“test“ , objMap , price , book);,addOptions案例六,var strArr = 张三,李四,王五; / 以字符串数组来为列表框添加列表项 dwr.util.addOptions(“test“ , strArr);,addOptions案例七,/ 定义一个对象数组 var objArr = id:“1“,name:张三, id:“2“,name:李四, id:“3“,name:王五;/ 以对象数组中name属性值为列表框添加列表项 dwr.util.ad
8、dOptions(“test“ , objArr , name);,addOptions案例八,/ 定义一个对象数组 var objArr = book:红楼梦 , price:99,book:三国演义 , price:79,book:聊斋 , price:69 ;/ 以对象数组为列表框添加列表项 / 以第三个参数指定的属性作为各列表项的文本 / 以第四个参数已经没有作用了 dwr.util.addOptions(“test“ , objArr , book , price);,这里我们讲解了为ol添加选项，那么，请大家 思考如何为UL添加选项？我这里不再演示。,/ 删除所有列表项 dwr.u
9、til.removeAllOptions(“test“);-删除指定列表中的选择很简单，这里不再细 -说。,addRows案例一,编号 姓名 性别- / 定义一个字符串数组，每个数组元素对应表格一行 var rowArr = 1,2,3; / 定义一个匿名函数数组，每个函数对应表格内的一列 var cellfuncs = function(data) return data; , function(data)if(data = 1)return 张三;if(data = 2)return 李四;if(data = 3)return 王五; , function(data)if(data = 1
10、)return 男;if(data = 2)return 女;if(data = 3)return 男; ; / 为表格增加行 dwr.util.addRows(“test“ , rowArr , cellfuncs);,addRows案例二,国家 城市一 城市二 城市三-javascript代码见下页,/ 定义一个二维数组，用于在表格中输出 var rowArr = 中国：,广州,上海,北京,美国：,加州,华盛顿,纽约,英国：,利物浦,伦敦,伯明翰; var cellfuncs = / 表格函数，每个函数对应表格的一列。 / 系列函数的data都是rowArr数组的元素每个数组元素都是一维数
11、组 function(data) return data0;-每个数组的第一个元素 , function(data)return data1;-每个数组的第二个元素 , function(data)return data2;-每个数组的第三个元素 , function(data)return data3;-每个数组的第四个元素 ; / 添加表格行 dwr.util.addRows(“test“ , rowArr , cellfuncs);,addRows案例三,城市一 城市二 城市三,var rowArr = 中国:广州,上海,北京,美国:加州,华盛顿,纽约,英国:利物浦,伦敦,伯明翰 ; -
12、注意和案例二的区别，这里的rowArr实际上是一个json格式的对象 var cellfuncs = function(data) return data0;-对应数组的第一个元素 , function(data)return data1;-对应数组的第二个元素 , function(data)return data2;-对应数组的第三个元素 ;dwr.util.addRows(“test“ , rowArr , cellfuncs);,addRows案例四,城市一 城市二 城市三,var rowArr = 中国:广州,上海,北京,美国:加州,华盛顿,纽约,英国:利物浦,伦敦,伯明翰 ; -注
13、意和案例二的区别，这里的rowArr实际上是一个json格式的对象 var cellfuncs = function(data) return data0;-对应数组的第一个元素 , function(data)return data1;-对应数组的第二个元素 , function(data)return data2;-对应数组的第三个元素 ;,/ 创建表格的高级选项 所谓高级，就体现在可以设置行和列的样式 var option = / 指定rowCreator选项 创建row的函数rowCreator:function(options)var row = document.createEle
14、ment(“tr“);-创建行/ 如果当前行索引为偶数，设置其背景色 -rowNum即行号if(options.rowNum % 2 = 0)row.style.backgroundColor = “#bbbbbb“;return row;,/ 指定cellCreator选项 创建单元格的函数cellCreator:function(options)var cell = document.createElement(“td“);-创建单元格/ 根据当前列索引设置前景色 index值越来越大，颜色则越来越淡 由于最多只有3列，不会超过255var index = options.cellNum
15、* 80; -cellNum即单元格的编号cell.style.color = “rgb(“ + index + “,“ + index + “,“ + index + “)“;return cell;,有addRows，对应的就有removeAllRowsdwr.util.removeAllRows(“test“); 删除test当中的行,最后一步： dwr.util.addRows(“test“ , rowArr , cellfuncs , option);,删除行： dwr.util.removeAllRows(“test2“);,selectRange,直接上案例：dwr.util.selectRange(test,3,8)将选中34567,说明：util.js提供的这些函数它简化了相应的 一些操作，但有一些操作或者功能util.js并没 有提供，比如util.js这里在添加option或者row 的时候，都是一次性添加所有的option或者 row，如果要在原来的基础上进行追加，还得 使用我们前面技术点或知识点。总之，要能 够灵活的运用我们所学的知识点。,如果大家觉得写dwr.util有点麻烦，可以为 其取一个别名： if(typeof windowdu=undefined)window.du=dwr.util; 接下来就可以使用DWRUtil替代dwr.util了,
