Shulou(Shulou.com)06/03 Report--

How to understand DWR util.js, in view of this problem, this article introduces the corresponding analysis and answers in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible way.

Util.js contains some useful functions function for calling on the client page, which can be used separately from dwr and used independently in your system.

The main functions are as follows:

1. $() gets the page parameter value

2. AddOptions and removeAllOptions initializes the drop-down box

3. AddRows and removeAllRows fill in the form

4. GetText gets the value of text attribute

5. GetValue gets the form form value

6. GetValues obtains multiple values of form

7 、 onReturn

8 、 selectRange

9 、 setValue

10 、 setValues

11 、 toDescriptiveString

12 、 useLoadingMessage

13 、 Submission box

*

/

*

1. $() function

IE5.0 does not support

$= document.getElementById

Get the form form value

Var name = $("name")

*

/

*

2. Used to fill select drop-down box option

A. If you want to save the original data when updating the select, that is, add a new option to the original select:

Var sel = DWRUtil.getValue (id)

DWRUtil.removeAllOptions (id)

DWRUtil.addOptions (id,...)

DWRUtil.setValue (id,sel)

Demo: for example, if you want to add an option: "--Please select--"

DWRUtil.addOptions (id, ["- Please select--"])

DWRUtil.addOptions () has 5 ways:

@ Simple Array Example: simple array

For example:

Array array = new Array ['Africa',' America', 'Asia',' Australasia', 'Europe']

DWRUtil.addOptions ("demo1", array)

@ Simple Object Array Example simple array with element beans

In this case, you need to specify the property of the beans to display and the corresponding bean value

For example:

Public class Person {

Private String name

Private Integer id

Pirvate String address

Public void set () {. }

Public String get () {. }

}

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

Where id points to and the id attribute of bean, in optiong, value,name points to the name attribute of bean, and corresponds to which value is displayed in the drop-down box.

@ Advanced Object Array Example is basically the same as above

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 populates the options with the defined map:

If server returns Map, you can handle it like this:

DWRUtil.addOptions ("demo3", map)

Value corresponds to map keys,text and corresponds to map values.

@ and list editing

The DWRUtil.addOptions () function can fill in not only select, but also heml elements like this.

*

/

*

3. AddRows and removeAllRows fill in the form

DWR provides two functions to manipulate table

-

DWRUtil.addRows (); add a line

-

DWRUtil.removeAllRows (id); deletes the table of the specified id

-

Let's focus on the addRows () function:

DWRUtil.addRows (id, array, cellfuncs, [options])

Where id corresponds to the id of table (more suitable for tbodye, tbodye is recommended)

Array is the return value of the server on server, such as list,map, etc.

Cellfuncs and use the return value to come Tianchun form

[options] is used to style the table, it has two internal functions to set the cell style (rowCreator, cellCreator).

For example, list is returned on the server side, and the following bean is stored in list:

Public class Person {

Private String name

Private Integer id

Pirvate String address

Public void set () {. }

Public String get () {. }

}

Let's use DWRUtil.addRows ()

/ * /

/ * Hu Guoqing * 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 + ", 0je 0)"

Return row

}

CellCreator:function (options) {

Var td = document.createElement ("td")

Var index = 255-(options.rowIndex * 50)

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

Td.style.backgroundColor = "menu"

Td.style.fontWeight = "bold"

Td.style.align = "center"

Return td

}

});

Document.getElementById ("bt") .style.display = "none"

}

To be continued...

/ * /

/ * /

/ * /

4. GetText gets the value of text attribute

DWRUtil.getText (id): used to get the text in option

For example:

Apple

Banana

Yali pear

Call DWRUtil.getText ("select"); will return the "banana" field

DWRUtil.getText (id); is only used to get the select text value, the other does not apply.

/ * /

/ * /

/ * /

5. DWRUtil.getValue (id): used to obtain the form form value

There are the following situations:

Text area (id= "textarea"): DWRUtil.getValue ("textarea") returns the value of Text area

Selection list (id= "select"): DWRUtil.getValue ("select") returns the value of Selection list

Text input (id= "text"): DWRUtil.getValue ("text") returns the value of Text input

Password input (id= "password"): DWRUtil.getValue ("text") returns the value of Password input

Form button (id= "formbutton"): DWRUtil.getValue ("formbutton") returns the value of Form button

Fancy button (id= "button"): DWRUtil.getValue ("formbutton") returns the value of Fancy button

/ * /

/ * /

/ * /

6. GetValues obtains multiple values of form

Get the values of the page form in batches, combine them into an array, and return name/value

For example: form ():

Apple

Banana

Yali pear

So: DWRUtil.getValues ({textarea:null,select:null,text:null,password:null,button:null})

Will return ^ {textarea:1111,select:4444,text:2222,password:3333,button:5555}

/ * /

/ * /

/ * /

7. DWRUtil.onReturn prevents the form from being submitted by pressing enter directly after typing in the text box.

/ * /

/ * /

/ * /

8. DWRUtil.selectRange (ele, start, end)

Choose a range in an input box

DWRUtil.selectRange ("sel-test", $("start") .value, $("end") .value)

For example:

DWRUtil.selectRange ("sel-test", 2,15); the value "2345678901234" in the result text box will be selected'

/ * /

/ * /

/ * /

9. DWRUtil.setValue (id,value)

Sets a new value for the specified id element

/ * /

10. DWRUtil.setValues {

Name: "fzfx88"

Password: "1234567890"

}

); as above, update the form values in batches.

/ * /

11. DWRUtil.toDescriptiveString ()

For the toString with debug information, the first is the object to be debug, and the second parameter is the processing level. The grades are as follows:

0: Single line of debug single-line debugging

1: Multi-line debug that does not dig into child objects does not analyze multiline debugging of child elements

2: Multi-line debug that digs into the 2nd layer of child objects analyzes the multi-line debugging of the second layer child elements at most

DWRUtil . ToDescriptiveString ("text", 0)

/ * /

12. DWRUtil.useLoadingMessage ()

When an ajax request is made, the page displays a prompt to wait for a message

Function searchUser () {

Var loadinfo = "loading."

Try {

RegUser.queryAllUser (userList)

DWRUtil.useLoadingMessage (loadinfo)

} catch (e) {

}

}

/ * /

The answer to the question on how to understand DWR util.js is shared here. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.