Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
wiki:conventions [2009/10/28 20:19] bigsus json example |
wiki:conventions [2017/12/12 17:10] (current) admin |
||
|---|---|---|---|
| Line 6: | Line 6: | ||
| Calling Convention: | Calling Convention: | ||
| - | Java Script code | + | Java Script code |
| <code javascript> | <code javascript> | ||
| jQuery("#grid_id").jqGrid(options); | jQuery("#grid_id").jqGrid(options); | ||
| Line 26: | Line 27: | ||
| * **grid_id** is the id of the <table> element defined separately in your html and used as the name of your grid. | * **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. | + | * **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 (myfirstgrid.html) | + | An example with xml data taken from the tutorial [[First Grid|My First Grid]] |
| <code javascript> | <code javascript> | ||
| Line 57: | Line 58: | ||
| </script> | </script> | ||
| </code> | </code> | ||
| - | Other example with json data: | + | Another example with json data: |
| <code javascript> | <code javascript> | ||
| <script type="text/javascript"> | <script type="text/javascript"> | ||
| - | var gridimgpath = 'css\jquery-ui-1.7.2-cupertino\images'; | ||
| jQuery(document).ready(function(){ | jQuery(document).ready(function(){ | ||
| jQuery("#grid").jqGrid({ | jQuery("#grid").jqGrid({ | ||
| Line 83: | Line 83: | ||
| rowNum:10, | rowNum:10, | ||
| rowList:[10,20,30], | rowList:[10,20,30], | ||
| - | imgpath: gridimgpath, | ||
| pager: jQuery('#gridpager'), | pager: jQuery('#gridpager'), | ||
| sortname: 'name', | sortname: 'name', | ||
| Line 89: | Line 88: | ||
| sortorder: "asc", | sortorder: "asc", | ||
| caption:"Wines", | caption:"Wines", | ||
| - | editurl:"/jqGridModel?model=Wine", | + | editurl:"/jqGridModel?model=Wine" |
| - | }).navGrid('#gridpager', | + | }).navGrid('#gridpager'); |
| - | }) | + | }); |
| </script> | </script> | ||
| </code> | </code> | ||
| <code html> | <code html> | ||
| <div id="jqgrid"> | <div id="jqgrid"> | ||
| - | <table id="grid" class="scroll" cellpadding="0" cellspacing="0"></table> | + | <table id="grid"></table> |
| - | <div id="gridpager" class="scroll" style="text-align:center;"></div> | + | <div id="gridpager"></div> |
| </div> | </div> | ||
| </code> | </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]] | + | 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]]. | Events raised by the grid, which offer opportunities to perform additional actions, are described in [[Events]]. | ||
| Line 109: | Line 108: | ||
| A key property of the grid is the column model (colModel) that defines the contents of the grid: [[colModel Options]] | 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. | + | 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. |
