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
Next revision Both sides next revision
wiki:conventions [2009/07/21 14:02]
admin
wiki:conventions [2009/10/29 08:22]
tony
Line 1: Line 1:
 +~~DISCUSSION~~
 +==== Conventions ====
  
 +An instance of jqGrid is a javascript object, with properties, events and methods. Properties may be strings, numbers, arrays, boolean values or even other objects.
 +
 +Calling Convention:
 +
 +Java Script code
 +<code javascript>​
 +jQuery("#​grid_id"​).jqGrid(options);​
 +</​code>​
 +
 +HTML
 +<code html>
 +<​html>​
 +....
 +<​body>​
 +...
 +<table id="​grid_id"></​table>​
 +...
 +</​body>​
 +<​html>​
 +</​code>​
 +
 +Where:
 +
 +    * **grid_id** is the id of the <​table>​ element defined separately in your html and used as the name of your grid.
 +    * **options** is an array of settings in “name: value” pairs format. Some of these settings are values, some are functions to be performed on an event. Some of these settings are optional while others must be present for jqGrid to work.
 +
 +An example with xml data taken from the tutorial (myfirstgrid.html)
 +
 +<code javascript>​
 +<script type="​text/​javascript">​
 +jQuery(document).ready(function(){ ​
 +  jQuery("#​list"​).jqGrid({
 +    url:'​example.php',​
 +    datatype: '​xml',​
 +    mtype: '​GET',​
 +    colNames:​['​Inv No','​Date',​ '​Amount','​Tax','​Total','​Notes'​],​
 +    colModel :[ 
 +      {name:'​invid',​ index:'​invid',​ width:​55}, ​
 +      {name:'​invdate',​ index:'​invdate',​ width:​90}, ​
 +      {name:'​amount',​ index:'​amount',​ width:80, align:'​right'​}, ​
 +      {name:'​tax',​ index:'​tax',​ width:80, align:'​right'​}, ​
 +      {name:'​total',​ index:'​total',​ width:80, align:'​right'​}, ​
 +      {name:'​note',​ index:'​note',​ width:150, sortable:​false} ​
 +    ],
 +    pager: '#​pager',​
 +    rowNum:10,
 +    rowList:​[10,​20,​30],​
 +    sortname: '​invid',​
 +    sortorder: '​desc',​
 +    viewrecords:​ true,
 +    caption: 'My first grid'
 +  }); 
 +}); 
 +</​script>​
 +</​code>​
 +Other example with json data:
 +<code javascript>​
 +<script type="​text/​javascript">​
 +jQuery(document).ready(function(){ ​
 +  jQuery("#​grid"​).jqGrid({
 +      url:'/​jqGridModel?​model=Wine',​
 +      datatype: "​json",​
 +      mtype: '​GET',​
 +      colNames:​['​id',​ '​Provider',​ '​Name',​ '​Year',​ '​Description',​ '​Type',​ '​Geographical Region',​ '​Creation Date', 'Edit Date'​],​
 +      colModel:[
 +                {name:'​id',​index:'​id',​ width:55, sortable:​false,​ editable:​false,​ editoptions:​{readonly:​true,​size:​10}},​
 +                {name:'​provider',​index:'​provider',​ width:​200,​editable:​false},​
 +                {name:'​name',​index:'​name',​ width:​200,​editable:​true},​
 +                {name:'​year',​index:'​year',​ width:​100,​editable:​true},​
 +                {name:'​description',​index:'​description',​ width:​300,​editable:​true},​
 +                {name:'​type',​index:'​type',​ width:​200,​editable:​true,​edittype:'​select',​editoptions:​{dataUrl:​ '/​jqGridOptionData?​entity=WineType'​}},​
 +                {name:'​geographical_region',​index:'​geographical_region',​ width:​200,​editable:​true},​
 +                {name:'​creationDate',​index:'​creationDate',​ width:100},
 +                {name:'​editDate',​index:'​editDate',​ width:100},
 +           ],
 +     ​jsonReader : {
 +          repeatitems:​false
 +     },
 +      rowNum:10,
 +      rowList:​[10,​20,​30],​
 +      pager: jQuery('#​gridpager'​),​
 +      sortname: '​name',​
 +      viewrecords:​ true,
 +      sortorder: "​asc",​
 +      caption:"​Wines",​
 +      editurl:"/​jqGridModel?​model=Wine"​
 + ​}).navGrid('#​gridpager'​);​
 +});
 +</​script>​
 +</​code>​
 +<code html>
 +<div id="​jqgrid">​
 +    <table id="​grid"></​table>​
 +    <div id="​gridpager"></​div>​
 +</​div>​
 +</​code>​
 +
 +When the grid is created, normally several properties are set in the same statement (although these properties can be individually overridden later): see [[Options]]
 +
 +Events raised by the grid, which offer opportunities to perform additional actions, are described in [[Events]].
 +
 +The grid also offers several methods for getting or setting properties or data: see [[Methods]]
 +
 +A key property of the grid is the column model (colModel) that defines the contents of the grid: [[colModel Options]]
 +
 +Additional properties, events and methods of the basic grid, not described in this section, are used to create and manage the three special types of grids: multiselect grids, subGrids and treeGrids. Please refer to those topics for more details. ​

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