DWR util.js Study Notes
/********************/

/********************/
util.js contains some useful function function, used to call on the client page.
Main function is as follows:

Code

1. 1, $ () access to the page parameter value
2. 2, addOptions and removeAllOptions initialize the drop-down box
3. 3, addRows and removeAllRows fill forms
4. 4, getText made text property value
5. 5, getValue form to obtain the value of form
6. 6, getValues made form multiple values
7. 7, onReturn
8. 8, selectRange
9. 9, setValue
10. 10, setValues
11. 11, toDescriptiveString
12. 12, useLoadingMessage
13. 13, Submission box

************************************************** *******************
////////////////////// http://blog.163.com/fzfx888///////////////// /////////
************************************************** *******************

Code

1. 1, $ () function
2. IE5.0 does not support
3. $ = Document.getElementById
4. Form to obtain a form value
5. var name = $ ( "name");

************************************************** *********************************
////////////////////////////////////////////////// /////////////////////////////////
************************************************** *********************************
2, used to fill the select drop-down box option

Code

1. a, if you want to select in the update, the want to preserve the original data, that is, in the original select to add a new option:
2. var sel = DWRUtil.getValue (id);
3. DWRUtil.removeAllOptions (id);
4. DWRUtil.addOptions (id ,...);
5. DWRUtil.setValue (id, sel);
6. demo: For instance you want to add an option: "- Please Choose -"
7. DWRUtil.addOptions (id ,["-- Please select --"]);
9. DWRUtil.addOptions () has 5 methods:

Code

1. @ Simple Array Example: a simple array
2. For example:
3. Array array = new Array [ 'Africa', 'America', 'Asia', 'Australasia', 'Europe'];
4. DWRUtil.addOptions ( "demo1", array);

Code

1. @ Simple Object Array Example easy array elements for beans
2. Under the circumstances, you need to specify the property to display beans and bean corresponding value
3. For example:
4. public class Person (
5. private String name;
6. private Integer id;
7. pirvate String address;
8. public void set () (... ...)
9. public String get () (... ...)
10. )
11. DWRUtil.addOptions ( "demo2", array, 'id', 'name');
12. Point to one of id and id of the bean property, optiong at the corresponding value, name of the name point to bean property, the corresponding drop-down box which shows the value.

Code

1. @ Advanced Object Array Example basic Ibid
2. DWRUtil.addOptions ( "demo3",
3. [(Name: 'Africa', id: 'AF'),
4. (Name: 'America', id: 'AM'),
5. (Name: 'Asia', id: 'AS'),
6. (Name: 'Australasia', id: 'AU'),
7. (Name: 'Europe', id: 'EU')
8. ], 'id', 'name');

Code

1. @ Map Example using the map to fill the development of options:
2. If the server back Map, so you can deal with this:
3. DWRUtil.addOptions ( "demo3", map);
4. Value corresponds to one of map keys, text corresponding map values;

Code

1. @ <ul> And <ol> list editing
3. DWRUtil.addOptions () function can not only fill a select, open can reclaim <ul> and <ol> such elements heml

************************************************** *********************************
/////////////////////////////// fzfx88@163.com ////////////// ////////////////////////
************************************************** *********************************
3, addRows and removeAllRows fill forms
DWR to provide two functions to the operation table;
----------------------------
DWRUtil.addRows (); add a row
----------------------------
DWRUtil.removeAllRows (id); delete the specified id of the table
----------------------------
Focused look at the following addRows () function:

DWRUtil.addRows (id, array, cellfuncs, [options]);
Table corresponds to one of id's id (a more suitable tbodye, recommend the use of tbodye)
array are server-side server return value, such as list, map and so on
cellfuncs and a return value to day-chun form
[options] is used to set the table style, it has two internal function to set the cell style (rowCreator, cellCreator).



Such as: server-side back list, and the list are stored in the following bean:

Code

1. public class Person (
2. private String name;
3. private Integer id;
4. pirvate String address;
5. public void set () (... ...)
6. public String get () (... ...)
7. )

Use the following DWRUtil.addRows ();
/************************************************* *****************************/
/****************** *********** Fzfx88@hotmail.com *************** *****************/
/************************************************* ********************************/





Code

1. function userList (data) (
2. / / var delButton = "<input type='button'/>";
3. / / var editButton = "<input type='button'/>";
4. var cellfuncs = [
5. function (data) (return data.id;),
6. function (data) (return data.userName;),
7. function (data) (return data.userTrueName;),
8. function (data) (return data.birthday;),
9. function (data) (
10. var idd = data.id;
11. var delButton = document.createElement ( "input");
    delButton.setAttribute ( "type", "button");
    delButton.onclick = function () (delPerson (idd););
12. delButton.setAttribute ( "id", "delete");
13. delButton.setAttribute ( "value", "delete");
14. return delButton;
15. ),
16. function (data) (
17. var idd = data.id;
18. var editButton = document.createElement ( "input");
    editButton.setAttribute ( "type", "button");
    editButton.onclick = function () (editPerson (idd););
19. editButton.setAttribute ( "name", "edit");
20. editButton.setAttribute ( "value", "edit");
21. return editButton;
22. )
23. ];
24. DWRUtil.removeAllRows ( 'tabId');
25. DWRUtil.addRows ( 'tabId', data, cellfuncs, (
26. rowCreator: function (options) (
27. var row = document.createElement ( "tr");
28. var index = options.rowIndex * 50;
29. row.setAttribute ( "id", options.rowData.id);
30. row.style.collapse = "separate";
31. row.style.color = "rgb (" + index + ", 0,0)";
32. return row;
33. ),
34. cellCreator: function (options) (
35. var td = document.createElement ( "td");
36. var index = 255 - (options.rowIndex * 50);
37. / / td.style.backgroundColor = "rgb (" + index + ", 255255)";
38. td.style.backgroundColor = "menu";
39. td.style.fontWeight = "bold";
40. td.style.align = "center";
41. return td;
42. )
43. ));
44. document.getElementById ( "bt"). style.display = "none";
45. )

To be continued ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
/************************************************* *******************************/
/*********************** QQ: 171505924 Gump ********************** ****************/
/************************************************* *******************************/
4, getText made text property value

DWRUtil.getText (id): used to access option in the text such as:

Code

1. <select id="select">
2. <option value="1"> apple </ option>
3. <option value="2" select> banana </ option>
4. <option value="3"> Pear </ option>
5. </ select>

Call DWRUtil.getText ( "select"); will return "banana" field;
DWRUtil.getText (id); just select the text are used to obtain the value of the other does not apply.
/************************************************* *****************************/
/************************************************* *****************************/
/************************************************* *****************************/



5, DWRUtil.getValue (id): used to access form values form

Have the following situations:

Code

1. Text area (id = "textarea"): DWRUtil.getValue ( "textarea") will return the value of Text area;
2. Selection list (id = "select"): DWRUtil.getValue ( "select") will return to the Selection list value;
3. Text input (id = "text"): DWRUtil.getValue ( "text") will return the Text input value;
4. Password input (id = "password"): DWRUtil.getValue ( "text") will return the value of Password input;
5. Form button (id = "formbutton"): DWRUtil.getValue ( "formbutton") will return the value of Form button;
6. Fancy button (id = "button"): DWRUtil.getValue ( "formbutton") will return the value of Fancy button;

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



6, getValues obtain multiple values form bulk access to the page the form values into an array form, return name / value;

For example: form ():

Code

1. <input type="textarea" id="textarea" value="1111"/>
2. <input type="text" id="text" value="2222"/>
3. <input type="password" id= "password" value="3333"/>
4. <select id="select">
5. <option value="1"> apple </ option>
6. <option value="4444" select> banana </ option>
7. <option value="3"> Pear </ option>
8. </ select>
9. <input type="button" id="button" value="5555"/>
11. Well: DWRUtil.getValues ((textarea: null, select: null, text: null, password: null, button: null))
12. Will return ^^^^^^^^^^^^^^^^{ textarea: 1111, select: 4444, text: 2222, password: 3333, button: 5555)

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

7, DWRUtil.onReturn prevent when in the text box directly press enter on the form submission.



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

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

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

At an input box where the election of a range of

Code

1. DWRUtil.selectRange ( "sel-test", $ ( "start"). Value, $ ( "end"). Value);
3. For instance: <input type="text" id="sel-test" value="012345678901234567890">
5. DWRUtil.selectRange ( "sel-test", 2, 15);

The results of the text box the value "2345678901234" will be selected '



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

9, DWRUtil.setValue (id, value);
Id for the specified elements, to set up a new value;
/************************************************* *****************************/
10, DWRUtil.setValues ((
name: "fzfx88",
password: "1234567890"
)
); Ibid., bulk update form values.
/************************************************* *****************************/

11, DWRUtil.toDescriptiveString ()

With debug information toString, first for going to debug the target, the second parameter to deal with grades. Grades are as follows:

0: Single line of debug single debugging
1: Multi-line debug that does not dig into child objects are not sub-element analysis of multi-line debugging
2: Multi-line debug that digs into the 2nd layer of child objects to the second layer up to analysis of sub-elements of the multi-line debugging

<input type="text">
DWRUtil. toDescriptiveString ( "text", 0);
/************************************************* *****************************/

12, DWRUtil.useLoadingMessage ();
When issued by ajax request, the page displays Wait for the prompt information;



Code

1. function searchUser () (
2. var loadinfo = "loading ....."
3. try (
4. regUser.queryAllUser (userList);
5. DWRUtil.useLoadingMessage (loadinfo);
6. ) catch (e) (
8. )
9. )