DWR util

DWRutil.js学习笔记整理



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



主要功能如下：

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

2、addOptionsandremoveAllOptions初始化下拉框

3、addRowsandremoveAllRows填充表格

4、getText取得text属性值

5、getValue取得form表单值

6、getValues取得form多个值

7、onReturn

8、selectRange

9、setValue

10、setValues

11、toDescriptiveString

12、useLoadingMessage

13、Submissionbox





//////////////////////////////////////////////////////////////////////////////////////



1、$()函数

IE5.0不支持

$=document.getElementById

取得form表单值

varname=$("name");



//////////////////////////////////////////////////////////////////////////////////////



2、用于填充select下拉框option

a、如果你想在更新select时，想保存原来的数据，即在原来的select中添加新的option：

varsel=DWRUtil.getValue(id);

DWRUtil.removeAllOptions(id);

DWRUtil.addOptions(id,...);

DWRUtil.setValue(id,sel);

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

DWRUtil.addOptions(id,["--请选择--"]);



DWRUtil.addOptions()有5中方式：



@SimpleArrayExample:简单数组

例如:

Arrayarray=newArray[''Africa'',''America'',''Asia'',''Australasia'',''Europe'']；

DWRUtil.addOptions("demo1",array);



@SimpleObjectArrayExample简单数组,元素为beans

这种情况下,你需要指定要显示beans的property以及对应的bean值

例如:

publicclassPerson{

privateStringname;

privateIntegerid;

pirvateStringaddress;

publicvoidset(){……}

publicStringget(){……}

}

DWRUtil.addOptions("demo2",array,''id'',''name'');

其中id指向及bean的id属性，在optiong中对应value，name指向bean的name属性，对应下拉框中显示的哪个值.



@AdvancedObjectArrayExample基本同上

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'');



@MapExample用制定的map来填充options:

如果server返回Map,呢么这样处理即可：

DWRUtil.addOptions("demo3",map);

其中value对应mapkeys，text对应mapvalues；



@

and
listediting



DWRUtil.addOptions()函数不但可以填出select,开可以填出
和
这样的heml元素





//////////////////////////////////////////////////////////////////////////////////////



3、addRowsandremoveAllRows填充表格

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：

publicclassPerson{

privateStringname;

privateIntegerid;

pirvateStringaddress;

publicvoidset(){……}

publicStringget(){……}

}



下面用DWRUtil.addRows();

//

/胡国清[e-mail]/

//



functionuserList(data){

//vardelButton="";

//vareditButton="";

varcellfuncs=[

function(data){returndata.id;},

function(data){returndata.userName;},

function(data){returndata.userTrueName;},

function(data){returndata.birthday;},

function(data){

varidd=data.id;

vardelButton=document.createElement("");

delButton.setAttribute("id","delete");

delButton.setAttribute("value","delete");

returndelButton;

},

function(data){

varidd=data.id;

vareditButton=document.createElement("");

editButton.setAttribute("name","edit");

editButton.setAttribute("value","edit");

returneditButton;

}

];

DWRUtil.removeAllRows(''tabId'');

DWRUtil.addRows(''tabId'',data,cellfuncs,{

rowCreator:function(options){

varrow=document.createElement("tr");

varindex=options.rowIndex50;

row.setAttribute("id",options.www.hunanwang.netrowData.id);

row.style.collapse="separate";

row.style.color="rgb("+index+",0,0)";

returnrow;

},

cellCreator:function(options){

vartd=document.createElement("td");

varindex=255-(options.rowIndex50);

//td.style.backgroundColor="rgb("+index+",255,255)";

td.style.backgroundColor="menu";

td.style.fontWeight="bold";

td.style.align="center";

returntd;

}

});

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表单值



有如下几种情况：

Textarea(id="textarea"):DWRUtil.getValue("textarea")将返回Textarea的值;

Selectionlist(id="select"):DWRUtil.getValue("select")将返回Selectionlist的值;

Textinput(id="text"):DWRUtil.getValue("text")将返回Textinput的值;

Passwordinput(id="password"):DWRUtil.getValue("text")将返回Passwordinput的值;

Formbutton(id="formbutton"):DWRUtil.getValue("formbutton")将返回Formbutton的值;

Fancybutton(id="button"):DWRUtil.getValue("formbutton")将返回Fancywww.visa158.combutton的值;

//

//

//



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);



在一个inputbox里选一个范围



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:Singlelineofdebug单行调试

1:Multi-linedebugthatdoesnotdigintochildobjects不分析子元素的多行调试

2:Multi-linedebugthatdigsintothe2ndlayerofchildobjects最多分析到第二层子元素的多行调试





DWRUtil。toDescriptiveString("text",0);

//



12、DWRUtil.useLoadingMessage();

当发出ajax请求后,页面显示的提示等待信息;



functionsearchUser(){

varloadinfo="loading....."

try{

regUser.queryAllUser(userList);

DWRUtil.useLoadingMessage(loadinfo);

}catch(e){



}

}



//