跟我学DWR框架如何应用DWR框架中的JavaScript系统库及应用示例.docx
《跟我学DWR框架如何应用DWR框架中的JavaScript系统库及应用示例.docx》由会员分享，可在线阅读，更多相关《跟我学DWR框架如何应用DWR框架中的JavaScript系统库及应用示例.docx（13页珍藏版）》请在冰豆网上搜索。
跟我学DWR框架如何应用DWR框架中的JavaScript系统库及应用示例
1.1跟我学DWR框架——如何应用DWR框架中的JavaScript系统库及应用示例
1.1.1DWR框架中的util.js系统库及应用示例
1、DWR框架中的util.js系统库
（1）DWR框架中的util.js系统库的主要作用
util.js系统库主要包含了一些实用的工具函数来帮助开发人员应用JavaScript数据（例如从服务器返回的数据）来操作Web应用系统中的Web页面中的各个元素。
2、DWRUtil.addOptions方法的应用示例
（1）数组参数——DWRUtil.addOptions（selectid,array）
1）代码示例
vararrayFive=['One','Two','Three','Four','Five'];
functiontestAddOptionsBasic（）{
DWRUtil.addOptions（'addOptionsBasic',arrayFive）;
if（DWRUtil.getValue（'addOptionsBasic'）=="One"）{
success（）;
}
if（DWRUtil.getText（'addOptionsBasic'）=="One"）{
success（）;
}
}
2）示例代码的执行结果示图
注意：
此形式的函数产生的列表框中的key和value相同。
最后产生出如下的
One
Two
Three
Four
Five
（2）对象数组（指定text）
1）应用要点
DWRUtil.addOptions（selectid,data,prop）用每个数组元素创造一个option，option的值由数组中的value决定，而显示的内容则由数组中的name决定。
2）代码示例
one
two
three
3）应用示例
vararrayObject=[
{name:
'One',value:
'1'},
{name:
'Two',value:
'2'},
{name:
'Three',value:
'3'},
{name:
'Four',value:
'4'},
{name:
'Five',value:
'5'}
];
functiontestAddOptionsObject1（）{
DWRUtil.addOptions（'addOptionsObject1',arrayObject,"name"）;
if（DWRUtil.getValue（'addOptionsObject1'）=="1"）{
success（）;
}
if（DWRUtil.getText（'addOptionsObject1'）=="One"）{
success（）;
}
}
4）示例程序执行的示图
（3）对象数组（指定text和value值）
1）应用要点
DWRUtil.addOptions（selectid,array,valueprop,textprop）用每个数组元素创造一个option，option的值（value属性）是对象的valueprop属性，option的文字（显示的文字）是对象的textprop属性。
比如我们从服务器端获得了一个citylist的数据，要把这些数据放到id为city的一个下拉列表中，它有这么两个属性id和name------我们要用id作为下拉列表的value，而name作为下拉列表的text。
那么需要这么写：
DWRUtil.removeAllOptions（"city"）;
DWRUtil.addOptions（'city',citylist,'id','name'）;
2）应用示例
vararrayObject=[
{optionValue:
'One',optionText:
'1'},
{optionValue:
'Two',optionText:
'2'},
{optionValue:
'Three',optionText:
'3'},
{optionValue:
'Four',optionText:
'4'},
{optionValue:
'Five',optionText:
'5'}
];
functiontestAddOptionsObject2（）{
DWRUtil.addOptions（'addOptionsObject2',arrayObject,
"optionValue","optionText"）;
if（DWRUtil.getValue（'addOptionsObject2'）=="One"）{
success（）;
}
if（DWRUtil.getText（'addOptionsObject2'）=="1"）{
success（）;
}
}
3）示例程序执行的示图
（4）Map对象
1）应用要点
DWRUtil.addOptions（selectid,map,reverse）用每个属性创建一个option。
对象属性名用来作为option的值，对象属性值用来作为属性的文字。
2）应用示例
varmap={one:
1,two:
2,three:
3,four:
4,five:
5};
functiontestAddOptionsMap1（）{
DWRUtil.addOptions（'addOptionsMap1',map）;
if（DWRUtil.getValue（'addOptionsMap1'）=="one"）{
success（）;
}
if（DWRUtil.getText（'addOptionsMap1'）=="1"）{
success（）;
}
}
3）示例程序执行的示图
4）另一个示例
如果reverse参数被设置为true，那么对象属性值用来作为选项的值。
varmap={one:
1,two:
2,three:
3,four:
4,five:
5};
functiontestAddOptionsMap2（）{
DWRUtil.addOptions（'addOptionsMap2',map,true）;
if（DWRUtil.getValue（'addOptionsMap2'）=="1"）{
success（）;
}
if（DWRUtil.getText（'addOptionsMap2'）=="one"）{
success（）;
}
}
5）示例程序执行的示图
（5）ol或ul列表
1）应用要点
DWRUtil.addOptions（ulid,array）用数组中的元素创建一堆li元素，他们的innerHTML是数组元素中的值。
这种模式可以用来创建ul和ol列表。
2）应用示例
vararrayFive=['One','Two','Three','Four','Five'];
functiontestAddItemsBasic（）{
DWRUtil.addOptions（'addItemsBasic',arrayFive）;
}
3）示例程序执行的示图
（6）addOptions的其它方面的应用示例
DWR的一个常遇到的任务就是根据选项填充选择列表。
如果我们希望在我们更新了select以后，它仍然保持原来的选择，开发人员可以采用下面的实现方法：
varsel=DWRUtil.getValue（id）;
DWRUtil.removeAllOptions（id）;
DWRUtil.addOptions（id,...）;
DWRUtil.setValue（id,sel）;
（7）在应用开发中所应该要注意的相关问题
1）注意每次使用addOptions之前,需要先使用removeAllOptions来将下拉列表或者列表清空，否则下拉列表中的内容会一直累加。
如下为应用示例：
functiontestRemoveOptions（）{
DWRUtil.removeAllOptions（'removeOptions'）;
DWRUtil.addOptions（"removeOptions",arrayFive）;
}
One
Two
Three
Four
Five
上面的示例程序在某项目中的应用示图：
如下为对应的应用示例：
functiontestRemoveItems（）{
DWRUtil.removeAllOptions（'removeItems'）;
}
One
升级会员 