Jqgrid call and the use of the commonly used additions and deletions _function

The jquery grid is a rich-client, xml-based, Ajax-Grid plug-in jquery library. Jqgridview provides professional solutions to represent and edit tabular data on the network. Well-designed, with a powerful scripting API, this editable grid is very simple for DHTML and XML configuration, and displays compelling results with large amounts of data. Now I am familiar with the usage of the jquery grid and some common option settings.

The jquery grid is a rich-client, xml-based, Ajax-Grid plug-in jquery library. Jqgridview provides professional solutions to represent and edit tabular data on the network. Well-designed, with a powerful scripting API, this editable grid is very simple for DHTML and XML configuration, and displays compelling results with large amounts of data. Now I am familiar with the usage of the jquery grid and some common option settings.

1. Call Grid

Jqgrid already has access to data from the server side and is displayed in the grid table. Let's say how to manipulate the grid table and its data.
Jqgrid has many method functions for manipulating data or manipulating the grid table itself. Jqgrid methods can be invoked in two ways: 1 $ ("#grid_id"). Jqgridmethod (Parameter1,..., parametern);

or 1 $ ("#grid_id"). Jqgrid (' method ', Parameter1,..., parametern);

2. Commonly used method functions (Http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods)
1. Getgridparam
This method is used to get the Jqgrid option value. It has an optional parameter name,name that represents the Jqgrid option name, for example: 1 var id = $ ("#gridTable"). Jqgrid ("Getgridparam", "Selrow");

To get the ID of the currently selected row.

Note: Selrow is one of the Jqgrid options and the default value is null. This is a read-only option that represents the ID of the last selected row. This option is set to NULL if the page is run or sorted. For additional options, a follow-up will be introduced.

If you do not pass in the name parameter, the Jqgrid option will be returned.
2. GetRowData
This method is used to obtain data for a row. It has a rowid parameter, Jqgrid returns the corresponding row's data based on the ROWID, and returns an array of name:value types.     For example: 1 var getcontact = function () {2 var Selectedid = $ ("#gridTable"). Jqgrid ("Getgridparam", "Selrow"); 3 4 var RowData = $ ("#gridTable"). Jqgrid ("GetRowData", Selectedid); 5 6 alert ("Name:" + rowdata.firstname); 7};

Returns an empty array if rowID could not be found, and returns all row data in the grid as an array if the ROWID parameter is not set.

3. Addrowdata

This method is used to insert a new row into the grid. The execution returns true successfully, otherwise it returns false. It has 4 parameters:

ROWID: The ID number of the new line;
Data: A new row with the Date object, in the form {name1:value1,name2:value2 ...}, where name is the column name defined in Colmodel;
Position: Inserted position (first: Table top; Last: Table bottom; Before:srcrowid before; after:srcrowid);
Srcrowid: The new row is inserted before or after the Srcrowid specified line.
Example:   var addcontact = function () {    var Selectedid = $ ("#gridTable"). Jqgrid ("GETGRIDPA Ram "," Selrow ");        var DataRow = {        id:99, 06         lastname: "Zhang",          firstname: "San",         email: "Zhang_san@126.com",          telno: "0086-12345678"     };        if (selectedid) {        $ ("# Gridtable "). Jqgrid (" Addrowdata ", DataRow," before ", Selectedid);       &nbsp} else {        $ ("#gridTable" ). Jqgrid ("Addrowdata", DataRow, "a");        } 19};

This method can insert multiple rows at once, and the data parameter must be [{name1:value1,name2:value2 ...}, {name1:value1,name2:value2 ...}] Such an array form, and the ROWID parameter should also be set to the field name that represents the ID in the data parameter object. However, the ROWID at this time do not have to be part of the Colmodel.
Example:   var addcontact = function () {    var Selectedid = $ ("#gridTable"). Jqgrid ("GETGRIDPA Ram "," Selrow ");        var dataRow = [        id:99 0 6         lastname: "Zhang",          firstname: "San",         email: "Zhang_san@126.com",          telno: "0086-12345678"     },      {        id:100          lastname: "Li",         firstname: "Si",          email: "Li_si@126.com"          Telno: "0086-12345678"    &nbsp},     {        id:101          lastname: "Wang",         firstname: "Wu",          email: "Wang_wu@126.com",          telno: "0086-12345678"     }];        if (selectedid) {        $ ("# Gridtable "). Jqgrid (" Addrowdata "," id ", DataRow," before ", Selectedid);       &nbsp} else {        $ ("#gridTable" ). Jqgrid ("Addrowdata", "id", DataRow, "a");        } 33};

Note: I tested it, and the last two parameters used to set the insertion position did not seem to work when inserting multiple rows at a time. Several rows of data inserted are placed at the bottom of the grid.

4. Setrowdata

This method is used to set data values for a row of data. The execution returns true successfully, otherwise it returns false. It has 3 parameters:

ROWID: Update the row ID of the data;
Data: The updated database object, in the form of {name1:value1,name2:value2 ...}, where name is the column name defined in Colmodel; This data object, which column is not required to be set completely, which column needs to be updated, sets the name:value pair ；
Cssprop: If Cssprop is of type string, the CSS class with the corresponding name will be added to the row using the addclass of jquery; If the object type, the HTML CSS property will be used to add the style to the row. You can set the data parameter to False if you want to add CSS styles only and do not update it.

5. Delrowdata

This method is used to delete a row of data. The execution returns true successfully, otherwise it returns false. has a parameter rowid that represents the row ID to delete.

6. Setgridparam

This method corresponds to the Getgridparam and is used to set the options option for Jqgrid. Returns the Jqgrid object. parameter is {name1:value1,name2:value2 ...} The form object (name comes from the options option name of the Jqgrid). Some options require trigger ("Reloadgrid") after setup to show an effect.
7. Setgridwidth

Dynamically set a new width for the grid. Two parameters:

New_width: The new width value in PX unit;
Shrink: The function is the same as the ShrinkToFit option for Jqgrid; If this parameter is not set, the value of the Jqgrid shrinktofit option is followed.
8. Trigger ("Reloadgrid")

Depending on the current settings, the grid table is loaded again, meaning that a new request is sent to the server. This method can only be used for a grid that has already been built. In addition, this method does not take effect on the changes made to the Colmodel. You should use Gridunload to reload the new settings for Colmodel.

9. Other methods

In addition to the methods described above, Jqgrid has other useful methods, such as:
Addjsondata, Cleargriddata, Hidecol, Resetselection, Setcaption, Setgridheight, SetLabel, Showcol, etc.
And the methods provided by the enhanced modules, such as:
Filtergrid, Griddestroy, Gridunload, Setcolprop and so on.

The specific use of these methods, or simple to understand, or not very commonly used. can refer to the official documentation (HTTP://WWW.TRIRAND.COM/JQGRIDWIKI/DOKU.PHP?ID=WIKI:METHODS) for specific instructions.

10. Additional Considerations

In the above introduction of additions and deletions to the operation of the data row, Jqgrid actually completed only the operation of the client, mainly the change of the DOM work. But if the request to the server fails, or if you don't get the desired return result, does the Jqgrid process continue? Will not sync with the server-side data.
This question will be discussed in the next article.

Note: This article introduces the method in the Jqgrid demo also has introduced, but I think it is my own example to look more intuitive, more suitable for their own understanding.

Attached code:

JavaScript section:   $ (function () {    //configuration Jqgrid component     $ ("# Gridtable "). Jqgrid ({        url:" Jqgrid01.action ",          datatype: "JSON",         mtype: " Get ",         height:350          width:600         colmodel: [               {name: "id", Index: "id", Label: "Encoding", width:40},                {name: "LastName", Index: "LastName ", Label:" Last Name ", Width:80,sortable:false},                {name: "FirstName", Index: "FirstName", Label: "Name", Width:80,sortable:false},    & NBsp;          {name: "Email", Index: "Email", Label: "E-mail", Width : 160,sortable:false},               { Name: "Telno", Index: "Telno", Label: "Phone", width:120,sortable:false}         &NBSP],         viewrecords:true          rownum:15         rowlist: [15,50,100],          prmnames: {search: "Search"},          jsonreader: {            root: " Gridmodel ",             records:" Record ",              repeatitems:false        &NBSP         pager: "#gridPager",          caption: "Contact list",         hidegrid : false,         shriktofit:true     }; 30}); var echoselrow = function () {    var id = $ ("#gridTable"). Jqgrid ("Getgridparam", "Selrow"); 33        alert ("Currently selected Row ID:" + ID); 35}; The var getcontact = function () {Notoginseng     var Selectedid = $ ("#gridTable"). Jqgrid ("Getgridparam", "SELR ow ");        var rowdata = $ ("#gridTable"). Jqgrid ("GetRowData", Selectedid);        alert ("Name:" + rowdata.firstname); 42}; Addcontact = function () {    var Selectedid = $ ("#gridTable"). Jqgrid ("Getgridparam", "SELR ow ");        var DataRow = {        id:99,   & Nbsp;     lastname: "Zhang",          FirstName: "San",         email: "zhang_san@126.com", Wuyi          telno: "0086-12345678"     };        if (selectedid) {        $ ("# Gridtable "). Jqgrid (" Addrowdata ", DataRow," before ", Selectedid);       &nbsp} else {        $ ("#gridTable" ). Jqgrid ("Addrowdata", DataRow, "a");    &NBSP    61}; The var updatecontact = function () {    var Selectedid = $ ("#gridTable"). Jqgrid ("Getgridparam", "s Elrow ");       &NBSp;var DataRow = {        lastname: "Li",          firstname: "Si",         email: "Li_si@126.com"     };        var Cssprop = {        color: "# FF0000 "    };        $ ("#gridTable"). Jqgrid (' Setrowdata ', Selectedid, DataRow, Cssprop); 76}; The var deletecontact = function () {    var Selectedid = $ ("#gridTable"). Jqgrid ("Getgridparam", "s Elrow ");        $ ("#gridTable"). Jqgrid (' Delrowdata ', selectedid); 81}; The var changegridoptions = function () {    $ ("#gridTable"). Jqgrid ("Setgridparam", { & NBSP;      ROWNUM:50,         page:16 86    &NBSP}). Trigger (' Reloadgrid ');        $ ("#gridTable"). Jqgrid ("Setcaption", "Contact List"). Trigger (' Reloadgrid ');        alert ($ ("#gridTable"). Jqgrid ("Getgridparam", "caption"));     alert ($ ("#gridTable"). Jqgrid ("Getgridparam", "rownum")); 92}; Resetwidth var = function () {    $ ("#gridTable"). Jqgrid ("Setgridwidth", +, false);  } & nbsp  

HTML Section:  <! DOCTYPE HTML-//W3C//DTD XHTML 1.0 transitional//en "http://www.w3.org/TR/xhtml1/DTD/" Xhtml1-transitional.dtd ">