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 [2013/05/27 10:01]
olegk add X-UA-Compatible meta in head
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 72: Line 72:
  
 <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 100: 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 117: 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 123: 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.

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