DWR util. js Study Notes

Util. js contains some useful function functions for calling on the client page. It can be separated from dwr and independent camp is used in your system.

The main functions are as follows:
1. Get the page parameter value by $ ()
2. addOptions and removeAllOptions
3. addRows and removeAllRows Filling Table
4. getText: Get the text property value
5. getValue: Get the form value
6. getValues obtains multiple form values.
7. onReturn
8. selectRange
9. setValue
10. setValues
11. toDescriptiveString
12. useLoadingMessage
13. Submission box

**************************************** **************************************** *******
//////////////////////////////////////// //////////////////////////////////////// //////
**************************************** **************************************** ********
1. $ () function
Not supported by IE5.0
$ = Document. getElementById
Get form value
Var name = $ ("name ");
**************************************** **************************************** *******
//////////////////////////////////////// //////////////////////////////////////// //////
**************************************** **************************************** ********
2. Fill in select drop-down box option
A. If you want to save the original data when updating the select statement, add a new option in the original select statement:
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: "-- select --"
DWRUtil. addOptions (id, ["-- select --"]);

DWRUtil. addOptions () has 5 methods:

@ Simple Array Example: Simple Array
For example:
Array array = new Array ['Africa ', 'America', 'asa', 'internalasia ', 'Europe'];
DWRUtil. addOptions ("demo1", array );

@ Simple Object Array Example Simple Array with elements of beans
In this case, you need to specify the property of the beans to be displayed 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 ');
The id points to the bean's id attribute. In optiong, the value and name point to the bean's name attribute, corresponding to the value displayed in the drop-down box.

@ Advanced Object Array Example is basically the same as above
DWRUtil. addOptions ("demo3 ",
[{Name: 'afica ', id: 'af '},
{Name: 'America ', id: 'am '},
{Name: 'Asia ', id: 'as '},
{Name: 'internalasia ', id: 'au '},
{Name: 'Europe', id: 'EU '}
], 'Id', 'name ');

@ Map Example fill options with the specified map:
If the server returns Map, you can do this:
DWRUtil. addOptions ("demo3", map );
Value corresponds to map keys and text corresponds to map values;

@ <Ul> and <ol> list editing

The DWRUtil. addOptions () function can not only fill out the select statement, but also provide heml elements such as <ul> and <ol>.

**************************************** **************************************** *******
//////////////////////////////////////// //////////////////////////////////////// //////
**************************************** **************************************** ********
3. addRows and removeAllRows Filling Table
DWR provides two functions to operate tables;
----------------------------
DWRUtil. addRows (); Add rows
----------------------------
DWRUtil. removeAllRows (id); Delete the table with the specified id
----------------------------
The following describes the addRows () function:

DWRUtil. addRows (id, array, cellfuncs, [options]);
The id corresponds to the table id (tbodye is more suitable, and tbodye is recommended)
Array is the return value of the server, such as list and map.
Cellfuncs and tianchun table with return values
[Options] is used to set Table Styles. It has two internal functions to set cell styles (rowCreator and cellCreator ).

For example, the server returns the list, and the list stores the following bean:
Public class Person {
Private String name;
Private Integer id;
Pirvate String address;
Public void set (){......}
Public String get (){......}
}

DWRUtil. addRows () is used below ();
/*************************************** **************************************** *******/
/****************** Hu Guoqing ************ fzfx88@hotmail.com ******* *************************/
/*************************************** **************************************** *******/

Function userList (data ){
// Var delButton = "<input type = 'click'/> ";
// Var editButton = "<input type = 'click'/> ";
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 ("<input type = 'button 'onclick = 'delperson (" + idd + ") '> ");
DelButton. setAttribute ("id", "delete ");
DelButton. setAttribute ("value", "delete ");
Return delButton;
},
Function (data ){
Var idd = data. id;
Var editButton = document. createElement ("<input type = 'button 'onclick = 'editperson (" + idd + ") '> ");
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 ";
}
To be continued ................................................
/*************************************** **************************************** *******/
/*************************************** **************************************** *******/
/*************************************** **************************************** *******/
4. getText: Get the text property value

DWRUtil. getText (id): used to obtain the text in option
For example:
<Select id = "select">
<Option value = "1"> Apple </option>
<Option value = "2" select> banana </option>
<Option value = "3"> pears </option>
</Select>
Call DWRUtil. getText ("select"); the "banana" field is returned;
DWRUtil. getText (id); is only used to obtain select text values. Other values are not applicable.
/*************************************** **************************************** *******/
/*************************************** **************************************** *******/
/*************************************** **************************************** *******/

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

There are several 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") will return the value of Fancy button;
/*************************************** **************************************** *******/
/*************************************** **************************************** *******/
/*************************************** **************************************** *******/

6. getValues obtains multiple form values.
Obtain the page form values in batches and combine them into arrays to return the name/value;

Example: form ():
<Input type = "textarea" id = "textarea" value = "1111"/>
<Input type = "text" id = "text" value = "2222" type = "codeph" text = "codeph"/>
<Input type = "password" id = "password" value = "3333"/>
<Select id = "select">
<Option value = "1"> Apple </option>
<Option value = "4444" select> banana </option>
<Option value = "3"> pears </option>
</Select>
<Input type = "button" id = "button" value = "5555"/>

So: DWRUtil. getValues ({textarea: null, select: null, text: null, password: null, button: null })
Returns ^ {textarea: 1111, select: 4444, text: 2222, password: 3333, button: 5555}


/*************************************** **************************************** *******/
/*************************************** **************************************** *******/
/*************************************** **************************************** *******/

7. DWRUtil. onReturn prevents the user from directly pressing enter in the text box to submit the form.

<Input type = "text" onkeypress = "DWRUtil. onReturn (event, submitFunction)"/>
<Input type = "button" onclick = "submitFunction ()"/>

/*************************************** **************************************** *******/
/*************************************** **************************************** *******/
/*************************************** **************************************** *******/

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

Select a range in an input box

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

For example: <input type = "text" id = "sel-test" value = "012345678901234567890">

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"
}
); Same as above, batch update form values.
/*************************************** **************************************** *******/

11. DWRUtil. toDescriptiveString ()

ToString with debug information. The first parameter is the object to be debugged, and the second parameter is the processing level. The level is as follows:

0: Single line of debug Single-line Debugging
1: Multi-line debug that does not dig into child objects does not analyze Multi-line Debugging of child elements
2: Multi-line debug that digs into the 2nd layer of child objects Multi-line Debugging can be analyzed to the second layer of child elements at most

<Input type = "text" id = "text">
DWRUtil. ToDescriptiveString ("text", 0 );
/*************************************** **************************************** *******/

12. DWRUtil. useLoadingMessage ();
When an ajax request is sent, the page displays a prompt waiting message;

Function searchUser (){
Var loadinfo = "loading ....."
Try {
RegUser. queryAllUser (userList );
DWRUtil. useLoadingMessage (loadinfo );
} Catch (e ){

}
}

/*************************************** **************************************** *******/