JqGrid Study Notes (2)

This section describes other jqGrid usage methods, including basic operations and special data display. 1. Refresh jqGrid data. Frequently Used to refresh jqGrid data is to request data and refresh the jqGrid table based on the query conditions when using the query. The usage is as follows: [java... syntaxHighlighter. all ();

This section describes other jqGrid usage methods, including basic operations and special data display.
1. Refresh jqGrid data.
It is often used to refresh the jqGrid data by requesting data based on the query conditions and refreshing the jqGrid table. The usage is as follows:
[Javascript]
$ ("# Search_btn"). click (function (){
// You can add a valid Verification code for the queried data.
Var orderId = $ ("# orderId"). val ();
$ ("# List4"). jqGrid ('setgridparam ',{
Datatype: 'json ',
PostData: {'orderid': orderId}, // send data
Page: 1
}). Trigger ("reloadGrid"); // reload
});

① SetGridParam is used to set the options of jqGrid. Return jqGrid object
② Datatype is the format of the specified data transmission;
③ PostData is the data sent in the form of key: value. Multiple parameters can be separated by commas;
④ Page jumps to the first page for the specified query result;
⑤ Trigger ("reloadGrid"); reload the jqGrid table.

2. No data prompts.
When the returned data in the background is empty, the prompt information of jqGrid itself is not very conspicuous in the lower right corner. The following method will be implemented without data display, the prompt "No data is displayed" is displayed in the middle of the jqGrid table ". For example: Of course, you can set a better div style.

[Javascript]
LoadComplete: function () {// if the data does not exist, a message is displayed.
Var rowNum = $ ("# list4"). jqGrid ('getgridparam', 'records ');
If (rowNum if ($ ("# norecords" ).html () = null ){
$ ("# List4"). parent (). append (" 
No query records!

");
}
$ ("# Norecords"). show ();
} Else {// If a record exists, the prompt information is hidden.
$ ("# Norecords"). hide ();
}
}
① LoadComplete indicates the method for jqGrid to complete loading and execution; ② getGridParam is used to obtain the option value of jqGrid. It has an optional parameter name, which indicates the option name of jqGrid. If the name parameter is not input, the entire jqGrid option options is returned. Example:
[Javascript]
$ ("# List4"). jqGrid ('getgridparam', 'records '); // obtain the total number of records of the current jqGrid;
Note: This code should be added between options of jqGrid, that is, $ ("# list4"). jqGrid ({}); and code. Separate multiple options with commas.
3. jqGrid statistics are displayed.
Statistics are usually displayed on the last row of the jqGrid table, above the page control, for example:

Code snippet:
[Javascript]
$ ("# List4"). jqGrid ({
......
ColModel :[
{Name: 'productname ', index: 'productname', align: 'center', sortable: false },
{Name: 'productamt ', index: 'productamt', align: 'center '}
],
Footerrow: true, // Add a row to the page to display statistics.
......
Pager: $ ('# gridPager '),
GridComplete: function () {// when all data in the table is loaded, process the statistical row data.
Var rowNum = $ (this). jqGrid ('getgridparam', 'records ');
If (rowNum> 0 ){
Var options = {
Url: "test. action", // It is the form action by default. If it is written, it overwrites the from action.
DataType: "json", // 'xml', 'script', or 'json' (accept the type returned by the server .)
Type: "POST ",
Success: function (data) {// call method after successful
$ ("# List4"). footerData ("set", {productName: "Total", productAmt: data. productAmtSum });
}
};
$ ("# SearchForm"). ajaxSubmit (options );
}
}
});
Details:
3.1options configuration of jqGrid; the following attributes must be added to options of jqGrid:
[Javascript]
Footerrow: true, // Add a row to the page to display statistics.
3.2 call the gridComplete method. After the data is loaded, process the statistical row data. 3.3 call the footerData method of jqGrid and assign a value to the statistical row:
[Javascript]
$ ("# List4"). footerData ("set", {productName: "Total", productAmt: data. productAmtSum });
4. Format jqGrid data.
Formatting the list cell attribute in jqGrid is mainly set through formatter and formatoptions in colModel.
Basic usage:
[Javascript]
JQuery ("# jqGrid_id"). jqGrid ({
...
ColModel :[
...
{Name: 'price', index: 'price', formatter: 'integer', formatoptions: {thousandsSeparator :','}},
...
]
...
});
Formatter mainly sets formatter types (integer, email, and other functions to support custom types). formatoptions is used to set parameters corresponding to formatter. Common formats and options are pre-defined in jqGrid:
 
Integer
ThousandsSeparator: // delimiter of sub-location,
DefaulValue
Number
DecimalSeparator, // decimal separator, such "."
ThousandsSeparator, // delimiter, such ","
DecimalPlaces, // number of reserved decimal places
DefaulValue
Currency
DecimalSeparator, // decimal separator, such "."
ThousandsSeparator, // delimiter, such ","
DecimalPlaces, // number of reserved decimal places
DefaulValue,
Prefix // prefix, for example, add "$"
Suffix // suffix
Date
Srcformat, // original format of source
Newformat // new format
Email
No parameter, it will add: mailto: name@domain.com in the cell is email
Showlink
BaseLinkUrl, // Add the link url to the current cell, such as "jq/query. action"
ShowAction, // Add & action = actionName after baseLinkUrl
AddParam, // Add additional parameters after baseLinkUrl, such as "& name = aaaa"
Target,
IdName // It is added after baseLinkUrl by default, such as ". action? Id = 1 ″. If idName = "name" is set, then ". action? Name = 1 ″. The value is the current rowid.
Checkbox
Disabled // true/false the default value is true. In this case, the checkbox cannot be edited. If the current cell value is 1 and 0, 1 is selected.
Select
Set the drop-down box. No parameter. It must be used with editoptions in colModel.
The following is an example:
[Javascript]
ColModel :[
{Name: 'id', index: 'id', formatter: customFmatter },
{Name: 'name', index: 'name', formatter: "showlink", formatoptions: {baseLinkUrl: "save. action ", idName:" id ", addParam:" & name = 123 "}},
{Name: 'price', index: 'price', formatter: "currency", formatoptions: {thousandsSeparator: ",", decimalSeparator :". ", prefix:" $ "}},
{Name: 'email ', index: 'email', formatter: "email "},
{Name: 'amount ', index: 'amount', formatter: "number", formatoptions: {thousandsSeparator: ",", defaulValue: "", decimalPlaces: 3 }},
{Name: 'gender', index: 'gender', formatter: "checkbox", formatoptions: {disabled: false }},
{Name: 'type', index: 'type', formatter: "select", editoptions: {value: "0: Invalid; 1: normal; 2: Unknown "}}
]
The customFmatter statement is as follows:
[Javascript]
Function customFmatter (cellvalue, options, rowObject ){
Console. log (cellvalue );
Console. log (options );
Console. log (rowObject );
Return "[" + cellvalue + "]";
};
The page displays the following results:
 
Of course, you must also support the custom formatter function. You only need to set the formatter function in formatter: customFmatter. This function has three signatures:
[Javascript]
Function customFmatter (cellvalue, options, rowObject ){

}
// Cellvalue-current cell value
// Options-options settings of the cell, including {rowId, colModel, pos, gid}
// RowObject-the row value of the current cell, for example, {id = 1, name = "name1", price = 123.1 ,...}
Of course, for custom formatter, the original value needs to be obtained during modification. The unformat function is provided here. For details, refer to the example on the official website:
[Javascript]
JQuery ("# grid_id"). jqGrid ({
...
ColModel :[
...
{Name: 'price', index: 'price', width: 60, align: "center", editable: true, formatter: imageFormat, unformat: imageUnFormat },
...
]
...
});

Function imageFormat (cellvalue, options, rowObject ){
Return'

 
 

';
}
Function imageUnFormat (cellvalue, options, cell ){
Return $ ('img ', cell). attr ('src ');
}
5. FAQs:
Chrome error:
Uncaught TypeError: Cannot read property 'integer 'of undefined
IE error:
SCRIPT5007: unable to get the value of the attribute "integer": the object is null or undefined
This problem occurs because no language file reference is added to the page.
Solution: add the language file js
[Javascript]