Utilizando JQuery simple es fácil trabajar con componentes css, bases de datos, programación de niveles altos, por ello muchos desarrolladores se dieron a la tarea de crear componentes que facilitan aún más el uso de éstas librerías no dejando por un lado la sencillez y agregando componentes de un grado de complejidad muy elevado.
Hay una cantidad bastante considerable de librerías para casi cualquier tarea que se nos ocurra desarrolladas bajo JQuery, muchas muy buenas que nos dan: estilos, diseños, conectividades, etc. otras un tanto complicadas que cuando se utilizan uno piensa si es mejor desarrollar de cero que utilizarlas y un tanto más que no le he encontrado utilidad aún.
Entre mis preferidas esta JQGrid es una tabla con enfoque dinámico en la cual puedo mostrar, agregar o manejar datos con estilos visuales muy adecuados, con muy poco código y con poco conocimiento de programación.
Pase mucho tiempo desarrollando mis propias librerías para ASP.NET a las que llamábamos INFO-ZERO y que ofrecían la facilidad de crear web dinámicos con manejo de datos con visores, capturadores de datos (manejadores) y reporteadores con muy pocas líneas y sin mucho esfuerzo. Y la vida me dio un golpe muy bajo ya que inicialmente salio Joomla! que es un concepto que ya había trabajado con web dinámicos, desde ese momento mejor busque componentes ya creados (y principalmente que fueran open) para trabajar en lugar de dedicar tiempo en desarrollo desde cero.
En el caso de los visores, manejadores de datos y reporteadores utilicé una cantidad considerable de componentes pagados y gratis hasta el fatídico día que conocí JQGrid. Pero bueno al grano.
Para crear vistas fabulosas con este componente vamos a seguir varios pasos: (asumiendo que el lector tenga por lo menos conocimientos de HTML, básicos de jscript y alguna noción de programación)
Paso 1: Descargar los componentes
Las librerías para trabajar JQGrid estan en http://www.trirand.com/blog/?page_id=6 el paquete incluye todas las librería, css y archivos necesarios para el funcionamiento, es más trae una versión de JQuery adecuada para su funcionamiento.
Paso 2: Empezar a utilizar los componentes
Al descargar los componentes le dejan un archivo empacado; los archivos dentro de este los debemos colocar en el directorio de nuestro sitio o página a crear.
Paso 3: Crear nuestro primer visor de datos
Necesitamos:
- Una base de datos de prueba
- Editor HTML para crear la página
- Por supuesto un directorio donde vamos a crear nuestra página
Ponemos todos los archivos desempacados en el directorio para nuestra prueba; abrimos el editor de HTML y escribimos:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>
<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" />
<style type="text/css">
html, body {
margin: 0;
padding: 0;
font-size: 75%;
}
</style>
<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>
<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>
</head>
<body>
<table id="list"><tr><td/></tr></table>
<div id="pager"></div>
</body>
</html>
Guardamos el código y abrimos el archivo en un explorador web, nos da como resultado:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>
<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" />
<style type="text/css">
html, body {
margin: 0;
padding: 0;
font-size: 75%;
}
</style>
<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>
<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>
</head>
<body>
<table id="list"><tr><td/></tr></table>
<div id="pager"></div>
</body>
</html>
Guardamos el código y abrimos el archivo en un explorador web, nos da como resultado:
En nuestra próxima entrega explicaremos más sobre lo que se hizo con este pequeño ejemplo.
Saludos
y este grid maneja pagineo??
ResponderEliminarSi, tiene pagineo, ordenamiento, búsqueda, filtrado y las columnas se pueden esconder, cambiar tamaño o poner datos muy específicos (como check box, links, etc)
ResponderEliminares mas poderoso que gridviwe de .net
ResponderEliminarTiene mucha más funcionalidad que el gridview de .net. La diferencia es que el gridview se puede pegar a la base de datos automáticamente o sea, por el mismo control y en el jqgrid tenemos que programar la conectividad y la extracción de los datos para mostrarlos, pero...tiene mas funcionalidad, tiene búsqueda, tiene filtro, podemos pones casi cualquier tipo de control en el grid, tiene sub-grid y lo podemos utilizar en asp.net ya que es javascript. Me siento cómodo tanto en .net como en java (php, javascript y ajax) y prefiero totalmente el jqgrid a cualquier otro grid que he utilizado.
ResponderEliminarno tenes el royecto para bajarlo y probarlo??
ResponderEliminar