Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
wiki:first_grid [2011/05/26 09:46]
olegk add description of the <tr><td/></tr> elements
wiki:first_grid [2017/12/12 17:10]
admin
Line 3: Line 3:
 For this tutorial, and as an example to refer to throughout this documentation,​ we’re going to create a grid with invoice information. For this tutorial, and as an example to refer to throughout this documentation,​ we’re going to create a grid with invoice information.
  
-You need the following three things in order to use jqGrid: ​+You need the following three things in order to use jqGrid : 
   - A database with some sample data,      - A database with some sample data,   
   - A HTML page to show the data, and      - A HTML page to show the data, and   
Line 53: Line 53:
 <​head>​ <​head>​
 <meta http-equiv="​Content-Type"​ content="​text/​html;​ charset=utf-8"​ /> <meta http-equiv="​Content-Type"​ content="​text/​html;​ charset=utf-8"​ />
 +<meta http-equiv="​X-UA-Compatible"​ content="​IE=edge"​ />
 <​title>​My First Grid</​title>​ <​title>​My First Grid</​title>​
   ​   ​
Line 66: Line 67:
 </​style>​ </​style>​
  
-<script src="​js/​jquery-1.5.2.min.js"​ type="​text/​javascript"></​script>​+<script src="​js/​jquery-1.7.2.min.js"​ type="​text/​javascript"></​script>​
 <script src="​js/​i18n/​grid.locale-en.js"​ type="​text/​javascript"></​script>​ <script src="​js/​i18n/​grid.locale-en.js"​ type="​text/​javascript"></​script>​
 <script src="​js/​jquery.jqGrid.min.js"​ type="​text/​javascript"></​script>​ <script src="​js/​jquery.jqGrid.min.js"​ type="​text/​javascript"></​script>​
  
 <script type="​text/​javascript">​ <script type="​text/​javascript">​
-$(function(){  +$(function () { 
-  $("#​list"​).jqGrid({ +    $("#​list"​).jqGrid({ 
-    url:'example.php'+        url: "example.php"
-    datatype: ​'xml'+        datatype: ​"xml"
-    mtype: ​'GET'+        mtype: ​"GET"
-    colNames:['Inv No','Date''Amount','Tax','Total','Notes'], +        colNames: ["Inv No""Date""Amount""Tax""Total""Notes"], 
-    colModel :[  +        colModel: [ 
-      {name:'invid', index:'​invid'​, width:55},  +            { name: "invid", width: 55 }, 
-      {name:'invdate', index:'​invdate'​, width:90},  +            { name: "invdate", width: 90 }, 
-      {name:'amount', index:'​amount'​, width:80, align:'right'},  +            { name: "amount", width: 80, align: ​"right" ​}, 
-      {name:'tax', index:'​tax'​, width:80, align:'right'},  +            { name: "tax", width: 80, align: ​"right" ​}, 
-      {name:'total', index:'​total'​, width:80, align:'right'},  +            { name: "total", width: 80, align: ​"right" ​}, 
-      {name:'note', index:'​note'​, width:150, sortable:​false}  +            { name: "note", width: 150, sortable: false } 
-    ], +        ], 
-    pager: ​'#pager'+        pager: ​"#pager"
-    rowNum:​10,​ +        rowNum: 10, 
-    rowList:​[10,​20,​30],​ +        rowList: [10, 20, 30], 
-    sortname: ​'invid'+        sortname: ​"invid"
-    sortorder: ​'desc'+        sortorder: ​"desc"
-    viewrecords:​ true, +        viewrecords:​ true, 
-    gridview: true, +        gridview: true, 
-    caption: ​'My first grid' +        ​autoencode:​ true, 
-  }); +        ​caption: ​"My first grid" 
 +    }); 
 });  }); 
 </​script>​ </​script>​
Line 99: Line 101:
 </​head>​ </​head>​
 <​body>​ <​body>​
-<table id="​list"><​tr><​td/></​tr></​table>​  +    ​<table id="​list"><​tr><​td></td></​tr></​table>​  
-<div id="​pager"></​div> ​+    <div id="​pager"></​div> ​
 </​body>​ </​body>​
 </​html>​ </​html>​
Line 111: Line 113:
 Required Files: An explanation of the .js and .css files required for jqGrid is provided in the Installation section. Required Files: An explanation of the .js and .css files required for jqGrid is provided in the Installation section.
  
-Grid Placement: The grid can be placed anywhere between the <​body>​ tags in the document. ​ The definition of the grid is done via the html tag <​table>,​ as shown here:+Grid Placement: The grid can be placed anywhere between the <​body>​ tags in the document. ​ The definition of the grid is done via the HTML tag <​table>,​ as shown here:
  
 <code html> <code html>
 <​body> ​ <​body> ​
  
-<table id="​list"><​tr><​td/></​tr></​table> ​+<table id="​list"><​tr><​td></td></​tr></​table> ​
 <div id="​pager"></​div> ​ <div id="​pager"></​div> ​
  
Line 122: Line 124:
 </​code>​ </​code>​
  
-<note important>​The table should have an ID that is unique in the HTML document. ​ In the example above, it is "#​list"​. ​ This ID is important because you'll need it for grid functions. The elements <​tr><​td/></​tr>​ inside of the <​table>​ element are needed only to make the document the valid XHTML 1.0 Strict document. The elemnts ​will be removed by jqGrid during the jqGrid initialization</​note> ​+<note important>​The table should have an ID that is unique in the HTML document. ​ In the example above, it is "#​list"​. ​ This ID is important because you'll need it for grid functions. The elements <​tr><​td></td></​tr>​ inside of the <​table>​ element are needed only to make the document the valid XHTML 1.0 Strict document. The elements ​will be removed by jqGrid during the jqGrid initialization</​note> ​
  
 In many examples throughout this documentation,​ you'll see a hash (#) sign before ID names. ​ jqGrid works with or without the hash sign, but it's considered good practice to use the hash. In many examples throughout this documentation,​ you'll see a hash (#) sign before ID names. ​ jqGrid works with or without the hash sign, but it's considered good practice to use the hash.
Line 137: Line 139:
 ^Property ^Description ^ ^Property ^Description ^
 | url | Tells us where to get the data. Typically this is a server-side function with a connection to a database which returns the appropriate information to be filled into the Body layer in the grid | | url | Tells us where to get the data. Typically this is a server-side function with a connection to a database which returns the appropriate information to be filled into the Body layer in the grid |
-| datatype | This tells jqGrid the type of information being returned so it can construct the grid. In this case, we tell the grid that we expect ​xml data to be returned from the server, but other formats are possible. For a list of all available datatypes refer to API Methods | +| datatype | This tells jqGrid the type of information being returned so it can construct the grid. In this case, we tell the grid that we expect ​XML data to be returned from the server, but other formats are possible. For a list of all available datatypes refer to API Methods | 
-| mtype | Tells us how to make the ajax call: either '​GET'​ or '​POST'​. In this case, we will use the GET method to retrieve data from the server |+| mtype | Tells us how to make the Ajax call: either '​GET'​ or '​POST'​. In this case, we will use the GET method to retrieve data from the server |
 | colNames |An array in which we place the names of the columns. This is the text that appears in the head of the grid (Header layer). The names are separated with commas | | colNames |An array in which we place the names of the columns. This is the text that appears in the head of the grid (Header layer). The names are separated with commas |
-| colModel |An array that describes the model of the columns. This is the most important part of the grid. Here I explain only the options used above. ​ an array that describes the model of the columns. This is the most important part of the grid. Here I explain only the options used above. For the complete list of options see colModel API \\ **name** ​the name of the column. This name does not have to be the name from database table, but later we will see how we can use this when we have different data formats \\ **index** ​the name passed to the server on which to sort the data (note that we could pass column numbers instead). Typically this is the name (or names) from database -- this is server-side sorting, so what you pass depends on what your server expects to receive ​ \\ **width** ​the width of the column, in pixels \\ **align** ​the alignment of the column \\ **sortable** Specifies if the data in the grid can be sorted on this column; if false, clicking on the header has no effect| +| colModel |An array that describes the model of the columns. This is the most important part of the grid. Here I explain only the options used above. For the complete list of options see colModel API \\ **name**: The name of the column. This name does not have to be the name from the database table, but later we will see how we can use this when we have different data formats\\ **index**: The name passed to the server on which to sort the data (note that we could pass column numbers instead). Typically this is the name (or names) from the database -- this is server-side sorting, so what you pass depends on what your server expects to receive \\ **width**: The width of the column, in pixels\\ **align**: The alignment of the column\\ **sortable**Specifies if the data in the grid can be sorted on this column; if false, clicking on the header has no effect.
-|pager|Defines that we want to use a pager bar to navigate through the records. This must be a valid html element; in our example we gave the div the id of "​pager",​ but any name is acceptable. Note that the Navigation layer (the "​pager"​ div) can be positioned anywhere you want, determined by your html; in our example we specified that the pager will appear after the Body layer.| +|pager|Defines that we want to use a pager bar to navigate through the records. This must be a valid HTML element; in our example we gave the div the id of "​pager",​ but any name is acceptable. Note that the Navigation layer (the "​pager"​ div) can be positioned anywhere you want, determined by your HTML; in our example we specified that the pager will appear after the Body layer.| 
-|rowNum|Sets how many records we want to view in the grid. This parameter is passed to the url for use by the server routine retrieving the data|+|rowNum|Sets how many records we want to view in the grid. This parameter is passed to the URL for use by the server routine retrieving the data|
 | rowList|An array to construct a select box element in the pager in which we can change the number of the visible rows. When changed during the execution, this parameter replaces the rowNum parameter that is passed to the url| | rowList|An array to construct a select box element in the pager in which we can change the number of the visible rows. When changed during the execution, this parameter replaces the rowNum parameter that is passed to the url|
-|sortname|Sets the initial sorting column. Can be a name or number. This parameter is added to the url for use by the server routine|+|sortname|Sets the initial sorting column. Can be a name or number. This parameter is added to the URL for use by the server routine|
 |viewrecords|Defines whether we want to display the number of total records from the query in the pager bar| |viewrecords|Defines whether we want to display the number of total records from the query in the pager bar|
 |caption|Sets the caption for the grid. If this parameter is not set the Caption layer will be not visible| |caption|Sets the caption for the grid. If this parameter is not set the Caption layer will be not visible|
  
-Having done this, we have now done half the work. The next step is to construct the server-side manipulation -- which is done in the file pointed to by the "Url" parameter in the grid.+Having done this, we have now done half the work. The next step is to construct the server-side manipulation -- which is done in the file pointed to by the "url" parameter in the grid.
  
 ===== Behind the Scenes: Grid Data  ===== ===== Behind the Scenes: Grid Data  =====
Line 199: Line 201:
 </​note>​ </​note>​
  
-Now it's time to construct the server side file that will facilitate the requests for data from jrGrid.+Now it's time to construct the server side file that will facilitate the requests for data from jqGrid.
  
 ===== PHP and MySQL example file ===== ===== PHP and MySQL example file =====

QR Code
QR Code wiki:first_grid (generated for current page)