DWR util.js 学习笔记整理

来源：互联网发布：写毕业论文的软件编辑：程序博客网时间：2024/05/21 06:36

DWR util.js 学习笔记整理发表:admin 阅读:96次关键字：字体:[大中小]

util.js包含一些有用的函数function,用于在客户端页面调用，它可以和dwr分开，独立营用于你的系统中。主要功能如下：

1、$() 获得页面参数值

2、addOptions and removeAllOptions 初始化下拉框

3、addRows and removeAllRows 填充表格

4、getText 取得text属性值

5、getValue 取得form表单值

6、getValues 取得form多个值

7、onReturn

8、selectRange

9、setValue

10、setValues

11、toDescriptiveString

12、useLoadingMessage

13、Submission box

1、$()函数 IE5.0 不支持 $ = document.getElementById 取得form表单值 var name = $("name");

2、用于填充 select 下拉框 option a、如果你想在更新select 时，想保存原来的数据，即在原来的select中添加新的option：

var sel = DWRUtil.getValue(id);

DWRUtil.removeAllOptions(id);

DWRUtil.addOptions(id,...);

DWRUtil.setValue(id,sel);

demo:比如你想添加一个option：“--请选择--”

DWRUtil.addOptions(id,["--请选择--"]); DWRUtil.addOptions()有5中方式：

@ Simple Array Example: 简单数组例如: Array array = new Array[ 'Africa', 'America', 'Asia', 'Australasia', 'Europe' ]；

DWRUtil.addOptions("demo1",array);

@ Simple Object Array Example 简单数组,元素为beans 这种情况下,你需要指定要显示 beans 的 property 以及对应的 bean 值例如:

public class Person { private String name; private Integer id; pirvate String address; public void set(){……} public String get(){……} }

DWRUtil.addOptions("demo2",array,'id','name'); 其中id指向及bean的id属性，在optiong中对应value，name指向bean的name属性，对应下拉框中显示的哪个值. @ Advanced Object Array Example 基本同上 DWRUtil.addOptions( "demo3", [{ name:'Africa', id:'AF' }, { name:'America', id:'AM' }, { name:'Asia', id:'AS' }, { name:'Australasia', id:'AU' }, { name:'Europe', id:'EU' } ],'id','name');

@ Map Example 用制定的map来填充 options: 如果 server 返回 Map,呢么这样处理即可：

DWRUtil.addOptions( "demo3",map); 其中 value 对应 map keys，text 对应 map values； @ and list editing DWRUtil.addOptions() 函数不但可以填出select,开可以填出和这样的heml元素

3、addRows and removeAllRows 填充表格

DWR 提供2个函数来操作 table； ----------------------------

DWRUtil.addRows(); 添加行 ----------------------------

DWRUtil.removeAllRows(id);

删除指定id的table ---------------------------- 下面着重看一下 addRows() 函数：

DWRUtil.addRows(id, array, cellfuncs, [options]); 其中id 对应 table 的 id(更适合tbodye，推荐使用 tbodye) array 是server端服务器的返回值，比如list，map等等 cellfuncs 及用返回值来天春表格 [options] 用来设置表格样式，它有2个内部函数来设置单元格样式(rowCreator、cellCreator)。比如: server端返回list，而list中存放的是下面这个 bean： public class Person { private String name; private Integer id; pirvate String address; public void set(){……} public String get(){……} } 下面用 DWRUtil.addRows(); 胡国清 fzfx88@hotmail.com function userList(data){ var delButton = ""; var editButton = ""; var cellfuncs = [ function(data){return data.id;}, function(data){return data.userName;}, function(data){return data.userTrueName;}, function(data){return data.birthday;}, function(data){ var idd = data.id; var delButton = document.createElement(""); delButton.setAttribute("id","delete"); delButton.setAttribute("value","delete"); return delButton; }, function(data){ var idd = data.id; var editButton = document.createElement(""); editButton.setAttribute("name","edit"); editButton.setAttribute("value","edit"); return editButton; } ]; DWRUtil.removeAllRows('tabId'); DWRUtil.addRows('tabId', data,cellfuncs,{ rowCreator:function(options) { var row = document.createElement("tr"); var index = options.rowIndex 50; row.setAttribute("id",options.rowData.id); row.style.collapse = "separate"; row.style.color = "rgb(" + index + ",0,0)"; return row; }, cellCreator:function(options) { var td = document.createElement("td"); var index = 255 - (options.rowIndex 50); td.style.backgroundColor = "rgb(" + index + ",255,255)"; td.style.backgroundColor = "menu"; td.style.fontWeight = "bold"; td.style.align = "center"; return td; } }); document.getElementById("bt").style.display = "none"; } 待续…………………………………………

4、getText 取得text属性值 DWRUtil.getText(id): 用来获得 option 中的文本比如：苹果香蕉鸭梨调用 DWRUtil.getText("select"); 将返回 "香蕉" 字段； DWRUtil.getText(id)；仅仅是用来获得 select 文本值，其他不适用。

5、DWRUtil.getValue(id): 用来获得 form 表单值有如下几种情况： Text area (id="textarea"): DWRUtil.getValue("textarea")将返回 Text area的值; Selection list (id="select"): DWRUtil.getValue("select") 将返回 Selection list 的值; Text input (id="text"): DWRUtil.getValue("text") 将返回 Text input 的值; Password input (id="password"): DWRUtil.getValue("text") 将返回 Password input 的值; Form button (id="formbutton"): DWRUtil.getValue("formbutton") 将返回 Form button 的值; Fancy button (id="button"): DWRUtil.getValue("formbutton") 将返回 Fancy button 的值;

6、getValues 取得form多个值批量获得页面表单的值,组合成数组的形式,返回 name value; 例如: form(): 苹果香蕉鸭梨那么: DWRUtil.getValues({textarea:null,select:null,text:null,password:null,button:null}) 将返回 ^^^^^^^^^^^^^^^^{textarea:1111,select:4444,text:2222,password:3333,button:5555}

7、DWRUtil.onReturn 防止当在文本框中输入后，直接按回车就提交表单。

8、DWRUtil.selectRange(ele, start, end); 在一个input box里选一个范围 DWRUtil.selectRange("sel-test", $("start").value, $("end").value); 比如: DWRUtil.selectRange("sel-test", 2, 15); 结果文本框中的值"2345678901234"将被选中'

9、DWRUtil.setValue(id,value); 为指定的id元素,设置一个新值;

10、DWRUtil.setValues({ name: "fzfx88", password: "1234567890" } ); 同上,批量更新表单值.

11、DWRUtil.toDescriptiveString() 带debug信息的toString，第一个为将要debug的对象，第二个参数为处理等级。等级如下： 0: Single line of debug 单行调试 1: Multi-line debug that does not dig into child objects 不分析子元素的多行调试 2: Multi-line debug that digs into the 2nd layer of child objects 最多分析到第二层子元素的多行调试 DWRUtil。toDescriptiveString("text",0);

12、DWRUtil.useLoadingMessage(); 当发出ajax请求后,页面显示的提示等待信息; function searchUser(){ var loadinfo = "loading....." try{ regUser.queryAllUser(userList); DWRUtil.useLoadingMessage(loadinfo); }catch(e){ } }

DWR util.js 学习笔记 整理

DWR util.js 学习笔记整理