Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
wiki:first_grid [2012/03/05 20:32] delahelias |
wiki:first_grid [2017/12/12 17:10] (current) 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 116: | Line 118: | ||
| <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 elements 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 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 ===== | ||
