JqGrid Study Notes (1)

I. jqGrid features: Based on the jqueryUI topic, developers can change different themes as required. Compatible with all popular web browsers. Ajax pagination allows you to control the number of records displayed on each page. Supports XML, JSON, and array data sources. Provides rich options for configuration and methods... SyntaxHighlighter. all ();

 
I. jqGrid features:

Based on jquery UI themes, developers can change different themes according to customer requirements.
Compatible with all popular web browsers.
Ajax pagination allows you to control the number of records displayed on each page.
Supports XML, JSON, and array data sources.
Provides rich options for configuration and method event interfaces.
Supports table sorting and column dragging and column hiding.
Supports rolling data loading.
Supports real-time editing and saving of data content.
Supports subtables and tree tables.
Supports multiple languages.
The most important thing is free.
Ii. jqGrid usage:

1. Download an object
Cupertino Style
2. Prepare files
Create a folder under the root directory of the project and put the downloaded file. The directory structure is as follows:

3. Code in the page
3.1 add reference to head
Css file introduction:
[Html]
 
 

Js file introduction:

[Html]
 
 
 
 

3.2 code in body
[Html]
 

 
 
 

List4 is the list jqGrid and gridPager is the list pagination div.
3.3. Code in js
[Javascript]
$ (Document). ready (function (){
$ ("# List4"). jqGrid ({
Url: contextPath + "search. action ",
Datatype: "json", // data source, local data
Mtype: "POST", // submission method
Height: 420, // height, table height. Value, percentage, or 'auto'
// Width: 1000, // The width cannot be a percentage.
Autowidth: true, // automatic width
ColNames: ['add date', 'mobile phone number', 'Bank card number', 'note', 'operation'],
ColModel :[
// {Name: 'id', index: 'id', width: '2013', align: 'center '},
{Name: 'createdate', index: 'createdate', width: '2013', align: 'center '},
{Name: 'python', index: 'python', width: '000000', align: 'center '},
{Name: 'cardno', index: 'cardno', width: '000000', align: "center "},
{Name: 'remark', index: 'remark', width: '000000', align: "left", sortable: false },
{Name: 'del ', index: 'del', width: '2013', align: "center", sortable: false}
],
Rownumbers: true, // Add the row number on the left
// AltRows: true, // set to an alternate row table. The default value is false.
// Sortname: 'createdate ',
// Sortorder: 'asc ',
Viewrecords: true, // whether to display the total number of records in the browser navigation bar
RowNum: 15, // number of records displayed per page
RowList: [15, 20, 25], // array of elements used to change the drop-down list box for displaying the number of rows.
JsonReader :{
Id: "blackId", // set the table ID to blackId in the return parameters.
Repeatitems: false
},
Pager: $ ('# gridPager ')
});
});

At this point, the jqGrid frontend is basically complete. When loading this page, the jqGrid table will be initialized and the data of the datatype type will be returned through url request. You can call the data in the background and return the data in json format to fill the table.
You can query jqGrid API for specific parameters.