Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision Next revision Both sides next revision | ||
wiki:first_grid [2012/05/23 16:13] varunvats Changed jrGrid to jqGrid |
wiki:first_grid [2013/05/27 10:09] olegk small changes of the code |
||
---|---|---|---|
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> |