Hoy les presento un plugin para jQuery muy útil, el cual te permite crear Grid muy completos con algunas pequeñas lineas de código.
Esta herramienta es muy poderoso y permite hasta cierto punto crear un grid completo con filtros, búsqueda, organización ascendente y descendente, paginación, etc casi sin necesidad que del lado del servidor halla código. También se puede crear un Crud completo y bastante avanzado, con multigrid, grid dentro de grids, etc, con un poco más de interacción con un lenguaje del lado del servidor.
Otra Característica destacable de este plugin es que se ajusta a el jQuery UI, lo cual permite que se integre con el diseño de nuestra interfaz con mucha facilidad. y modificarlo como queramos.
En este tutorial vamos a crear un Grid muy básico sin nada de interacción con el servidor, solo usando un array javascript con los datos, para ir viendo las funcionalidades de este poderoso plugin. Por ahora solo vamos a trabajar con lo básico para que nos podamos ir sintiendo a gusto con este plugin.
Lo primero es descargar los archivos necesarios, de la pagina de
jqgrid nos descargamos la ultima actualización del plugin y de la pagina de
jquery UI nos descargamos el tema de nuestra preferencia.
Y ahora configuramos el area de trabajo de esta manera:
./css/ui.jqgrid.css
./css/images //adentro van las imagenes del tema.
./css/jquery-ui-1.8.16.custom.css
./js/jquery-1.5.2.min.js
./js/grid.locale-es.js
./js/jquery.jqGrid.min.js
./jqgrid.html
El archivo jqgrid.html sera donde crearemos el grid, lo primero es poner la estructura básica html, cuando pongamos los enlaces de jqgrid, debemos colocar primero el de idioma y después el de jqgrid porque sino nos dara error. Después agregamos una tabla dentro del body y le colocamos el id igual a list. Ya con esto podemos empezar a examinar este plugin.
Este plugin se manejo como todos los plugins de Jquery, primero $ + un selector + la función jqGrid + objeto con las opciones, en este tutorial voy a hacer un listado de las opciones básicas
(el listado completo esta aqui!), para hacer el ejemplo básico:
Variables indispensables
- datatype: especifica el tipo de dato que va a esperar jqgrid para hacer la representación de datos. los valores posibles son: xml, json, jsonp, local, xmlstring, jsonstring, javascript.
- colNames: aquí se especifica el array javascript con los nombres de las columnas que se verán en el Grid.
- colModel: esta es la más importante de todas, y debe estar en el mismo orden que colNames, desde aquí se especifican nombres, ancho, opciones de busqueda, filtros, ordenación, etc. es como la columna vertebral del jqGrid.
- caption: Especifica un nombre a la tabla.
- data: especifica cual es el source cuando la variable es local. EL array debe seguir el patrón de colModel.
- height: especifica la altura de el grid.
- altRows: le pone la alternancia de colores a la tabla.
Especificaciones del colModel
El colModel como dije antes es la columna vertebral de este plugin y es donde se especifica cual va a ser la estructura y el comportamiento de cada una de las columnas, tenemos que tener claro que deben ser especificados en el mismo orden que especificamos los nombres de cada columna. Cada columna tiene las siguientes opciones básicas:
- name: esta variable especifica el nombre unico de esa columna, no puede haber otra columna con el mismo nombre ni en subgrids.
- align (opcional): esta variable especifica como se va a alinear el texto en la celda: left, center, right.
- width (opcional): define el ancho de la columna, por defecto es 150px.
- sortable (opcional): especifica si la columna puede ser ordenable
Ejemplo de Grid básico
Ahora si, aquí vamos con el ejemplo sencillo, la información es aleatoria, pero las claves deben ser las mismas el atributo name del colModel, voy a agregar la información a el Grid de dos maneras, una con el atributo data y otra con el metodo addRowData para agregar la fila al Grid, en la pagina recomiendan que para objetos grandes se haga con el atributo, pero es bueno conocer los dos métodos.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>prueba</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.16.custom.css" />
<link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/grid.locale-es.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
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"} ];
$(document).ready(function(){
$("#list").jqGrid({
datatype: "local",
data: mydata,
height: 250,
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60},
{name:'invdate',index:'invdate', width:90},
{name:'name',index:'name', width:100},
{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}
],
caption: "http://sosinformatico.blogspot.com",
altRows: true
});
for(var i=0;i<=mydata.length;i++)
jQuery("#list").jqGrid('addRowData',i+1,mydata[i]);
});
</script>
</head>
<body>
<table id='list'></table>
</body>
</html>
A la final se debería ver así:
Repositorio GitHub:
https://github.com/bomba1990/JqGrid-Ejemplos
Pueden Descargar el ejemplo desde:
http://www.box.com/s/oadoy8jey3idonmx381e
Pueden ver el ejemplo funcionando desde.
http://bomba1990.pythonanywhere.com/sosinformatico/js/JqGrid_Basico
Despues pienso sacar 3 tutoriales más un con un grid más avanzado, y dos integrandolo con Codeigniter y Python. Estos ultimos quiero hacerlos como screencast por eso me voy a tardar un poquito más.
