Jqgrid Learning Notes (II.)

The original article is: http://www.huosen.net/archives/147.html

This section describes the other uses of Jqgrid, mainly some basic operations, special data display and so on.

1 Refresh jqgrid data. commonly used to refresh Jqgrid data is, when used in the query, according to the query conditions, request data, and refresh the Jqgrid table, use the following way:

$ ("#search_btn"). Click (function () {
//Here you can add legal validation for query 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 option for Jqgrid. Returns the format of the Jqgrid object
②datatype for the specified send data;
③postdata send the requested data as Key:value, multiple parameters can be comma "," interval,
④page jumps to the first page for the specified query result;
⑤trigger ("Reloadgrid"); to reload the Jqgrid table. 2 No data message. when the background return data is empty, the Jqgrid itself prompts the lower right corner, is not very conspicuous, the following method will implement in the absence of data display, in the middle of the Jqgrid table prompts "No data display." The following figure: Of course, your div style can be set to look better.

Loadcomplete:function () {//If data does not exist, prompt information
var rownum = $ ("#list4"). Jqgrid (' Getgridparam ', ' Records ');
if (RowNum if ($ ("#norecords"). HTML () = NULL) {
$ ("#list4"). Parent (). Append ("</pre>
<div Id= "Norecords" > No query Records.        </div>
<pre> ");
$ ("#norecords"). Show ();
}else{//If a record exists, the hint message is hidden.    
$ ("#norecords"). Hide ();
}
}

①loadcomplete for Jqgrid load completion, the method to execute; ②getgridparam This method is used to obtain the Jqgrid option value. It has an optional parameter name,name that represents the Jqgrid option name, and if the name parameter is not passed in, the options for the entire option are returned Jqgrid. Cases:

$ ("#list4"). Jqgrid (' Getgridparam ', ' Records '); Gets the total number of records for the current Jqgrid;

Note: This code is to be added between option options for Jqgrid, which is: $ ("#list4 ″). Jqgrid ({}); And each option adds a comma interval. 3 Displays Jqgrid statistics. Typically, statistics are displayed on the last row of the Jqgrid table, above the paging control, as shown below:

Code fragment:

$ ("#list4"). Jqgrid ({     ...     colmodel:[         {name: ' ProductName ', index: ' ProductName ', align: ' center ', sortable:false},          {name: ' Productamt ', index: ' Productamt ', align: ' center '}      ], add a row on     footerrow:true,//page to display statistics    &nbsp ...      pager:$ (' #gridPager '),     gridcomplete:function () {//When all data in the table is loaded, processing statistic row data  
       var rownum = $ (this). Jqgrid (' Getgridparam ', ' Records ');         if (rownum > 0) {             var options = {           
     url: "Test.action",//default is form action, if written, will overwrite from action.       &nbsP;         datatype: "JSON",//' xml ', ' script ', or ' JSON ' (accept the type returned by the service side.)
                type: "POST",                 success: function (data) {//Successful call method                      $ ("#list4"). Footerdata ("Set", {productName: "Total", Productamt:
Data.productamtsum});                 }   
          };
            $ ("#searchForm"). Ajaxsubmit (options);         }    &nbsp}});

Detailed Introduction:

3.1jqgrid options configuration; You need to add the following properties to the options in Jqgrid:

Add a row to the footerrow:true,//page to display statistics

3.2 Call the Gridcomplete method, when the data load completes, processing the statistic row data, 3.3 calls Jqgrid's Footerdata method, assigns the value to the statistic row:

$ ("#list4"). Footerdata ("Set", {productName: "Total", productAmt:data.productAmtSum});

4 Jqgrid data format. the formatting of the list cell attribute in Jqgrid mainly sets the basic usage through Colmodel formatter, formatoptions:

JQuery ("#jqGrid_id"). Jqgrid ({
...
)      Colmodel: [
...
]   {name: ' Price ', index: ' Price ', Formatter: ' Integer ', formatoptions:{thousandsseparator: ', '}},
...
]
...
});

Formatter mainly sets the format type (integer, email, etc., and functions to support the custom type), Formatoptions is used to set the corresponding formatter parameters, jqgrid the common format and options are predefined:

  integer thousandsseparator://thousand-bit separator, defaulvalue number decimalseparator,//decimal separator, such as "." ThousandsSeparator,//thousand-bit separator, such as "," decimalPlaces,//decimal reserved digits Defaulvalue currency decimalseparator,//decimal separator, such as "." ThousandsSeparator,//thousand-bit separator, such as "," decimalPlaces,//decimal reserved digits Defaulvalue, prefix/prefix, such as "$" suffix//suffix date srcformat,//source original format Newformat//new format Email no parameters will be added to the cell by email Plus: mailto:name@domain.com showlink baselinkurl,// Add link URL to the current cell, such as "Jq/query.action" showaction,//Add &action=actionname AddParam after Baselinkurl// Add additional parameters after Baselinkurl, such as "&NAME=AAAA" target, Idname//default will be added after Baselinkurl, such as ". Action?id=1″. If you set idname= "name", then ". Action?name=1″. Where the value is the current rowid checkbox disabled//true/false default is True the checkbox at this time cannot be edited, such as the current cell's value is 1, 0 will select the select setting drop-down box with no parameters and need to work with the editoptions in Colmodel. The following is an example of use:

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"}]

One of the Customfmatter declarations is as follows:

function Customfmatter (cellvalue, Options, Rowobject) {
console.log (cellvalue);
Console.log (options);
Console.log (rowobject);
Return "[" +cellvalue+ "]";
};

The results shown on the page are as follows:

Of course, you have to support custom formatter functions, just set the formatter function in Formatter:customfmatter, which has three signatures:

function Customfmatter (cellvalue, Options, Rowobject) {
}
//cellvalue-value of the current cell
//options- The options settings for the cell include {rowId, colmodel,pos,gid}
//rowobject-The value of the row currently in the cell, such as {id=1, name= "name1", price=123.1, ...}

Of course, for custom formatter, you need to get the original value when you modify it, this provides the Unformat function here, see the official website example:

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
' </pre>

<pre>";
}
function Imageunformat (cellvalue, options, cell) {return
$ (' img ', cell). attr (' src ');
}

5 Common error issues: Chrome Error:

Uncaught typeerror:cannot Read Property ' integer ' of undefined ie error:

SCRIPT5007: Unable to get value of property ' Integer ': object is null or undefined
This problem occurs because the page does not add a reference to the language file.
Solution: Add the language file JS

<script type= "Text/javascript" src= "Js/i18n/grid.locale-cn.js" ></script>