1、DWR框架中的JavaScript系统库的应用示例1.1 DWR框架中的JavaScript系统库的应用示例1.1.1 -util.js函数库1、DWR中的util.js函数库（1）作用util.js包含了一些工具函数来帮助我们用JavaScript数据(例如从服务器返回的数据)来操作我们的web页面中的各个元素。2、addOptions方法的应用-DWRUtil.addOptions 的各种调用方法（DWR3.0以后为dwr.util. addOptions）（1）数组参数- DWRUtil.addOptions(selectid, array)应用示例： var arrayFive = O
2、ne, Two, Three, Four, Five ;function testAddOptionsBasic() DWRUtil.addOptions(addOptionsBasic, arrayFive); if (DWRUtil.getValue(addOptionsBasic) = One) success();if (DWRUtil.getText(addOptionsBasic) = One) success(); 注意：此形式的函数产生的列表框中的key和value相同。最后产生出如下的标签： One Two Three Four Five（2）对象数组（指定text）DWRU
3、til.addOptions(selectid, data, prop) 用每个数组元素创造一个option，option的值由数组中的value决定，而显示的内容则由数组中的name决定。 one two three 应用示例：var arrayObject = name:One, value:1 , name:Two, value:2 , name:Three, value:3 , name:Four, value:4 , name:Five, value:5 ;function testAddOptionsObject1() DWRUtil.addOptions(addOptionsOb
4、ject1, arrayObject, name); if (DWRUtil.getValue(addOptionsObject1) = 1) success(); if (DWRUtil.getText(addOptionsObject1) = One) success(); （3）对象数组（指定text和value值）DWRUtil.addOptions(selectid, array, valueprop, textprop) 用每个数组元素创造一个option，option的值（value属性）是对象的valueprop属性，option的文字（显示的文字）是对象的textprop属性
5、。比如我们从服务器端获得了一个citylist的数据，要把这些数据放到id为city的一个下拉列表中，它有这么两个属性id和name-我们要用id作为下拉列表的value，而name作为下拉列表的text。那么需要这么写： DWRUtil.removeAllOptions(city); DWRUtil.addOptions(city, citylist, id, name);应用示例：var arrayObject = optionValue:One, optionText:1 , optionValue:Two, optionText:2 , optionValue:Three, optio
6、nText:3 , optionValue:Four, optionText:4 , optionValue:Five, optionText:5 ;function testAddOptionsObject2() DWRUtil.addOptions(addOptionsObject2, arrayObject, optionValue, optionText);if (DWRUtil.getValue(addOptionsObject2) = One) success(); if (DWRUtil.getText(addOptionsObject2) = 1) success(); （4）
7、Map对象DWRUtil.addOptions(selectid, map, reverse)用每个属性创建一个option。对象属性名用来作为option的值，对象属性值用来作为属性的文字。应用示例：var map = one:1, two:2, three:3, four:4, five:5 ;function testAddOptionsMap1() DWRUtil.addOptions(addOptionsMap1, map); if (DWRUtil.getValue(addOptionsMap1) = one) success(); if (DWRUtil.getText(addO
8、ptionsMap1) = 1) success(); 另一个例-如果reverse参数被设置为true，那么对象属性值用来作为选项的值。var map = one:1, two:2, three:3, four:4, five:5 ;function testAddOptionsMap2() DWRUtil.addOptions(addOptionsMap2, map, true); if (DWRUtil.getValue(addOptionsMap2) = 1) success(); if (DWRUtil.getText(addOptionsMap2) = one) success()
9、; （5）ol 或 ul 列表DWRUtil.addOptions(ulid, array) 用数组中的元素创建一堆li元素，他们的innerHTML是数组元素中的值。这种模式可以用来创建ul和ol列表。应用示例：var arrayFive = One, Two, Three, Four, Five ;function testAddItemsBasic() DWRUtil.addOptions(addItemsBasic, arrayFive); （6）addOptions的其它方面的应用示例DWR的一个常遇到的任务就是根据选项填充选择列表。如果我们希望在我们更新了select以后，它仍然保
10、持原来的选择，我们可以采用下面的实现方法：var sel = DWRUtil.getValue(id);DWRUtil.removeAllOptions(id);DWRUtil.addOptions(id, .);DWRUtil.setValue(id, sel);另外，如果我们想加入一个初始的Please select. 选项，那么我们可以直接加入下面的语句：DWRUtil.addOptions(id, Please select .);然后再在下面紧接着加入我们真正的其它的各个选项数据。（7）所应该注意的问题 注意我们每次使用addOptions之前,需要先使用removeAllOptio
11、ns来将下拉列表或者列表清空，否则下拉列表中的内容会一直累加。应用示例：function testRemoveOptions() DWRUtil.removeAllOptions(removeOptions);DWRUtil.addOptions(removeOptions, arrayFive); One Two Three Four Five 应用示例：function testRemoveItems() DWRUtil.removeAllOptions(removeItems); OneTwoThreeFourFive 另外需要注意的是javascript中的字符串最好用单引号而不要用双
12、引号，否则可能又有一些莫名其妙的问题-还有就是引号要成对出现，不要一个单的一个双的。 这个函数所有的参数都是字符串。3、对表格操作的各个方法- addRows() 和 removeAllRows()（1）主要的功能DWR通过这两个函数来帮助我们动态操作table- DWRUtil.addRows() 和 DWRUtil.removeAllRows() 。（2）方法的参数说明这两个函数的第一个参数都是table、tbody、thead、tfoot的id。一般来说最好使用tbody，因为这样可以保持我们的header和footer行不变，并且可以防止Internet Explorer的bug。（3
13、）DWRUtil.removeAllRows() 方法的应用 用法：DWRUtil.removeAllRows(id); 描述：通过id删除table中所有行。 参数：id - table元素的id（最好是tbody元素的id）（4）DWRUtil.addRows()方法的应用 用法： DWRUtil.addRows(id, array, cellfuncs, options); 描述： 向指定id的table元素添加行。它使用数组中的每一个元素在table中创建一行。id：table元素的id(最好是tbody元素的id) array：数组(DWR1.1以后可以是对象)，做为更新表格数据。
14、Cellfuncs：函数数组-DWR根据该函数数组实现从传递过来的行数据中提取单元格数据。 Options：一个包含选项的对象(见下面) ，选项包括：rowCreator：一个用来创建行的函数(例如，你希望个tr加个css). 默认是返回一个document.createElement(tr) cellCreator：一个用来创建单元格的函数(例如，用th代替td). 默认返回一个document.createElement(td) 注意：每次在调用DWRUtil.addRows()方法时间，应该首先调用DWRUtil.removeAllRows() 方法，否则将产生累加的效果。应用示例1：v
15、ar arrayFive = One, Two, Three, Four, Five ; /数组中的元素的个数为表格中的行数function testAddRowsBasic() DWRUtil.addRows( addRowsBasic, arrayFive, /函数数组中的元素的个数为表格中的列数function(arrayFiveElement) /它控制表格中的第一列中的数据显示方式 return arrayFiveElement; , function(arrayFiveElement) /它控制表格中的第二列return arrayFiveElement.toUpperCase()
16、; /加工或者处理, function(arrayFiveElement) /它控制表格中的第三列 var tag=; return tag; var inputTagObj= document.createElement(input); / inputTagObj.setAttribute(type, button); / inputTagObj.setAttribute(value, DOM Test); inputTagObj.setAttribute(onclick, alert( + arrayFiveElement + );); return inputTagObj; ,funct
17、ion(arrayFiveElement) /它控制表格中的第四列 var inputTagObj= document.createElement(input); inputTagObj.setAttribute(type, button); inputTagObj.setAttribute(value, innerHTML Test); inputTagObj.setAttribute(onclick, alert( + arrayFiveElement + );); return inputTagObj; ); UnalteredAlteredDOM ButtonInnerHTML But
18、ton 注意：在应用中发现，如果采用document.createElement(input);方式时，其onclick事件不起作用；而改用产生HTML字符串的方式时，则onclick事件有效果-不知道是什么原因？。应用示例2：如果返回的数据中只有一条信息function showOneUserInfoByIDCallBackFun (returnOneUserInfoVO) var OneUserInfoArray = returnOneUserInfoVO; DWRUtil.addRows(userInfoItems, OneUserInfoArray, function(returnOn
19、eUserInfoVO) /该函数决定表格中的第一列 return returnOneUserInfoVO.userName; , function(returnOneUserInfoVO) /该函数决定表格中的第二列 return returnOneUserInfoVO.userDepartment; , function(returnOneUserInfoVO) /该函数决定表格中的第三列 return returnOneUserInfoVO.userAdminLevel; , function(returnOneUserInfoVO) /该函数决定表格中的第四列 return retur
20、nOneUserInfoVO.departAdminLevel; , function(returnOneUserInfoVO) /该函数决定表格中的第五列 var imageHtmlTag = document.createElement(img); imageHtmlTag.setAttribute(src, returnOneUserInfoVO.userImage); imageHtmlTag.setAttribute(width, 28); imageHtmlTag.setAttribute(height, 54); return imageHtmlTag; , function(returnOneUserInfoVO) /该函数决定表格中的第六列 return returnOneUserInfoVO.registerTime; );注意：页面中的表格定义
