Jqgrid example can refer to Http://blog.mn886.net/jqGrid/
Full instance Compression package http://download.csdn.net/detail/ruthywei/9888200
-------------installation of Jqgrid learning
Jqgrid installation is simple, just add the corresponding CSS, JS file to the page.
According to the official documents:
/myproject/css/
Ui.jqgrid.css
/ui-lightness/
/images/
Jquery-ui-1.7.2.custom.css
/myproject/js/
/i18n/
Grid.locale-bg.js
List of all language files
....
Jquery-1.3.2.min.js
Jquery.jqGrid.min.js
To do this in the page:
Java code
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>my First grid</title>
<link rel= "stylesheet" type= "text/css" media= "screen" href= "Css/ui-lightness/jquery-ui-1.7.1.custom.css"/>
<link rel= "stylesheet" type= "text/css" media= "screen" href= "Js/src/css/ui.jqgrid.css"/>
<link rel= "stylesheet" type= "text/css" media= "screen" href= "Js/src/css/jquery.searchfilter.css"/>
<style>
HTML, Body {
margin:0;
padding:0;
font-size:75%;
}
</style>
<script src= "Js/jquery-1.3.2.min.js" type= "Text/javascript" ></script>
<script src= "Js/src/grid.loader.js" type= "Text/javascript" ></script>
<body>
...
</body>
It is necessary to note that the font size of the jquery-ui is inconsistent with the Jqgrid font size, so you need to add a section on the page
Style to specify the size of the text on the page.
Jqgrid Skin
Starting with version 3.5, Jqgrid fully supports the theme of the jquery UI. We can download the theme we need from http://jqueryui.com/themeroller/. Of course, you can also edit your own theme. Jqgrid
There is no need to introduce all the CSS files, just import the core CSS file "Ui.theme.css" and "Ui.core.css", the file is located under the directory Development-bundle/themes. Jqgrid principle
Jqgrid is a typical B/s architecture, server-side only provides data management, the client only provides data display. In other words, Jqgrid can display information about your database in a simpler way, and it can also pass the client data back to the server side.
For Jqgrid we are concerned that there must be a piece of code to save some page information to the database, but also to return the response information to the client. Jqgrid is the use of Ajax to implement the processing of requests and responses. Jqgrid Parameters
Name |
Type |
Describe |
Default value |
Can be modified |
Url |
String |
Get the address of the data |
||
DataType |
String |
The data type returned from the server side, the default XML. Optional type: xml,local,json,jsonnp,script,xmlstring,jsonstring,clientside |
||
Mtype |
String |
Ajax submission method. Post or get, default get |
||
Colnames |
Array |
Column Display name, is an array object |
||
Colmodel |
Array |
Commonly used properties: Name column displays names,index to server-side used to sort the column names, width column widths;align alignment;sortable Whether you can sort |
||
Pager |
String |
Defines the navigation bar for page flipping, which must be a valid HTML element. The page flipping toolbar can be placed anywhere on the HTML page |
||
RowNum |
Int |
Displays the number of record bars on the grid, which is to be passed to the background |
||
Rowlist |
Array |
A drop-down selection box to change the number of display records, when selected, overrides the RowNum parameter passed to the background |
||
Sortname |
String |
The default sort column. Can be a column name or a number, this parameter will be submitted to the background |
||
Viewrecords |
Boolean |
Define whether you want to display the total number of records |
||
Caption |
String |
Table name |
||
AJAXGRIDOPTIONS[A1] |
Object |
Global settings for Ajax parameters that can overwrite Ajax events |
Null |
Is |
AJAXSELECTOPTIONS[A2] |
Object |
Global settings for the Select parameter of Ajax |
Null |
Is |
Altclass |
String |
The CSS used to specify the line display can edit its own CSS file, only if Altrows is set to Ture |
Ui-priority-secondary |
|
Altrows |
Boolean |
Set Table zebra-striped values |
||
Autoencode |
Boolean |
Encode a URL |
False |
Is |
Autowidth |
Boolean |
If ture, the table width is resized based on the parent element proportions when the table is first created. If the width of the parent element changes, the function needs to be implemented in order for the table width to be automatically adjusted: Setgridwidth |
False |
Whether |
Celllayout |
Integer |
Defines the cell padding + border width. You typically do not have to modify this value. The initial value is |
5 |
Is |
Celledit |
Boolean |
Enable or disable the cell editing feature |
False |
Is |
Cellsubmit |
String |
Defines where the cell contents are saved |
' Remote ' |
Is |
Cellurl |
String |
URL of the cell submission |
Null value |
Is |
Datastr |
String |
XMLString or jsonstring |
Null value |
Is |
Deselectaftersort |
Boolean |
Works only when datatype is local. When sorting is not selected as the forward |
True |
Is |
Direction |
String |
Direction of display of text in a table, left-to-right (LTR) or right-to-left (RTR) |
Ltr |
Whether |
Editurl |
String |
Defines the URL to a form when it is edited |
Null value |
Is |
Emptyrecords |
String |
The information that is displayed when the number of data rows returned is 0 o'clock. Only works when property viewrecords is set to Ture |
Is |
|
Expandcolclick |
Boolean |
When True, when you click to expand the line's text, Treegrid can expand or contract, not just click on the image |
True |
Whether |
Expandcolumn |
String |
Specify the column to expand the tree grid, which defaults to the first column and only works when Treegrid is True |
Null value |
Whether |
FOOTERROW[A3] |
Boolean |
When True, adds a row above the page bar |
False |
Whether |
Forcefit |
Boolean |
When ture, adjusting the column width does not change the width of the table. When ShrinkToFit is false, this property is ignored |
False |
Whether |
Gridstate |
String |
Define the status of the current table: ' Visible ' or ' hidden ' |
Visible |
Whether |
Gridview |
Boolean |
Constructs a row of data to add to the grid, and if set to true, the entire table's data is constructed and then added to the grid, but Treegrid, Subgrid, or Afterinsertrow are not available |
False |
Is |
Height |
Mixed |
Table height, which can be a number, a pixel value, or a percentage |
150 |
Whether |
Hiddengrid |
Boolean |
When ture, the table is not displayed, only the title of the table is displayed. The table data is initialized only when you click the button that displays the table. |
False |
Whether |
Hidegrid |
Boolean |
Enable or disable control of table display, hidden buttons, only if the Caption property is not empty |
True |
Whether |
Hoverrows |
Boolean |
Mouse hovering is disabled when false |
False |
Is |
Jsonreader |
Array |
An array that describes the format of the JSON data |
Whether |
|
LastPage |
Integer |
Read-only attribute, which defines the total number of pages |
0 |
Whether |
Lastsort |
Integer |
Read-only property that defines the index of the last row sequence, starting with 0 |
0 |
Whether |
Loadonce |
Boolean |
If ture, the data is fetched only once from the server, after which all operations are performed on the client, and the paging feature is disabled |
False |
Whether |
LoadText |
String |
The text that is displayed when requested or sorted |
Loading .... |
Whether |
Loadui |
String |
What to do when an AJAX request is executed. Disable disables Ajax execution hints; enable default, prompt when executing AJAX requests, block enables loading hints, but blocks other actions |
Enable |
Is |
Multikey |
String |
Only when MultiSelect is set to ture, the definition uses that key to do a long selection. shiftkey,altkey,ctrlkey |
Null value |
Is |
Multiboxonly |
Boolean |
only if MultiSelect = true. function, when multiboxonly is ture only select checkbox will work |
False |
Is |
MultiSelect |
Boolean |
Define whether you can select multiple |
False |
Whether |
Multiselectwidth |
Integer |
Set multiselect column width when MultiSelect is true |
20 |
Whether |
Page |
Integer |
Set the initial page number |
1 |
Is |
Pagerpos |
String |
Specify the location of the page bar |
Center |
Whether |
Pgbuttons |
Boolean |
Whether to show page flipping buttons |
True |
Whether |
Pginput |
Boolean |
Whether to show the input box of the jump page |
True |
Whether |
Pgtext |
String |
Current page Information |
Is |
|
Prmnames |
Array |
Default valuesprmnames: {page: "page", Rows: "Rows", Sort: "Sidx", Order: "Sord", Search: "_search", Nd: "nd", npage:null} is not sent to the server side when the argument is null |
None |
Is |
PostData |
Array |
The contents of this array are directly assigned to the URL, parameter type: {name1:value1 ...} |
Empty array |
Is |
RecCount |
Integer |
A read-only property that defines the exact number of rows in the grid. Typically the same as the records property, but with one exception, if rownum=15, but the number of records returned from the server is 20, then the records value is 20, but the RecCount value is still 15, and the table shows only 15 |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
