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/08/10 17:09]
admin
wiki:conventions [2012/01/23 15:21]
beckmi inserted some links and changed expressions
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” pair format. Some of these settings are values, some are functions to be performed on their associated events. Some of these settings are optional while others are mandatory for jqGrid to work.
 +
 +An example with xml data taken from the tutorial [[First Grid|My First Grid]]
 +
 +<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>​
 +Another 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>​
 +
 +On creation of a grid you normally will set all relevant options directly, but it is possible also, to modify them later on: 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: [[jqgriddocs#​basic_grid|multiselect grids]], [[jqgriddocs#​subgrids|subGrids]] and [[jqgriddocs#​tree_grid|treeGrids]]. Please refer to these topics for more details.

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