JQGrid parte 2

Bueno, vamos a explicar  un poco el código del JQGrid anterior (http://infowebsa.blogspot.com/2011/07/jqgrid.html):

Como dije anteriormente se debe tener un poco de experiencia en HTML, pero no ser un experto:

<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.8.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
Estas líneas nos dan los css para que el grid se mire bonito.

<script src="js/jquery-1.5.2.min.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>
Estas líneas nos agregan las librerías o componentes de jquery para que funcione el grid y para tener acceso a otros componentes de jquery (Cuando descargó el jqgrid coloco esos archivos en el directorio del programa)

<table id="list"><tr><td/></tr></table> 
<div id="pager"></div>
En estas líneas declaramos la tabla y el div (área) en donde se va a mostrar nuestro grid en la página.

<script type="text/javascript">
$(function(){ 
 jQuery("#list").jqGrid({
 datatype: "local",
 height: 250,
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
    colModel:[
     {name:'id',index:'id', width:60, sorttype:"int"},
     {name:'invdate',index:'invdate', width:90, sorttype:"date"},
     {name:'name',index:'name', width:100},
     {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
     {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},  
     {name:'total',index:'total', width:80,align:"right",sorttype:"float"},  
     {name:'note',index:'note', width:150, sortable:false}  
    ],
    multiselect: true,
    caption: "Manipulating Array Data"
 });
 var mydata = [
  {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
  {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
  {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
  {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
  {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
  {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
  {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
  {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
  {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
  ];
 for(var i=0;i<=mydata.length;i++)
  jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]);
}); 
</script>
Estas líneas nos crea y muestran el grid, expliquemos algunas cosillas:

 jQuery("#list").jqGrid({
Este nombre debe ser el mismo que tenemos en el <div para mostrar el grid:

<table id="list"><tr><td/></tr></table> 
<div id="pager"></div>

datatype: "local",
Va a cambiar dependiendo de donde tengamos los datos, es decir, aquí estamos mostrando datos que escribimos en nuestro archivo HTML, pero podemos mostrar datos desde una base de datos (MySql por ejemplo) o desde un archivo XML.

Luego tenemos que poner la identificación de las columnas que queremos motrar:

colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
    colModel:[
     {name:'id',index:'id', width:60, sorttype:"int"},
     {name:'invdate',index:'invdate', width:90, sorttype:"date"},
     {name:'name',index:'name', width:100},
     {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
     {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},  
     {name:'total',index:'total', width:80,align:"right",sorttype:"float"},  
     {name:'note',index:'note', width:150, sortable:false}  
    ],
Es decir poner los encabezados de nuestro grid y la forma como queremos que trate cada una de las columnas, su tamaño, su ubicación etc.

Por último escribimos los datos que vamos a mostrar, como dije anteriormente estos datos pueden salir de bases de datos o de archivos xml
var mydata = [
  {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},


Espero que esto ayude a alguno.

Saludos