jqGrid - El Grid Definitivo

Una funcionalidad que desde siempre hemos necesitado, al desarrollar aplicaciones web, ha sido la de mostrar en una tabla diferentes datos, como pueden ser un listado de clientes, artículos o pedidos.

Estas tablas deberían incorporar paginación, ordenación, y otras muchas características que nos den toda la usabilidad y potencia que el usuario necesita.

Aquí es donde os presento jqGrid, un plugin JQuery, que como tal, funciona al lado del cliente, y nos evita los postbacks en el servidor. (Esto se traduce en mayor rapidez y eficiencia para el usuario)

Características de jqGrid 

·        Trabaja correctamente bajo Internet Explorer, Firefox, Chrome, Safari, Opera

·        Multi-idioma, La interfaz de usuario está en más de 20 idiomas

·        Se puede personalizar el CSS (Diseño, colores y formatos)

·        Paginación y Ordenación

·        Búsquedas y Filtros

·        CRUD, y edición directamente en las celdas de las filas

·        SubGrids y  Agrupados

·        Carga de datos de forma asíncrona vía Ajax

·        Acepta XML/JSON como orígenes de datos



El plugin de jqGrid se integra perfectamente con ASP.NET MVC, pero también se podrá utilizar en cualquier otro lenguaje web que soporte javascript. Aún así, existe un contenedor exclusivo para ASP.NET MVC que nos permitirá trabajar directamente con jqGrid y otras funcionalidades jQuery como un propio componente del framework, con la ventaja del uso del intellisense. Pero este componente ya lo veremos en próximos posts.

Ahora vamos a implementar un grid simple de consulta de datos utilizando jqGrid 4.4 y ASP.NET MVC 3.0 con Vistas Razor.

1.      Descargar jqGrid

Primero de todo tendremos que ir a la página de descargas de jqGrid, seleccionar las características que queremos disponer (Edición de Celdas, Subgrids…) y finalmente descargar el fichero ZIP.
Yo recomiendo descargar el componente con todas las características seleccionadas.

Los ficheros que necesitaremos incorporar a nuestro proyecto son:

·        jquery.jqGrid.min.js: Este fichero contiene todas las funcionalidades del jqgrid

·        grid.locale-es.js: Este fichero contiene todas las traducciones al español (en el caso de querer disponer de otro idioma, simplemente tendremos que incorporar el fichero de la localización correspondiente (grid.locale-en.js, grid.locale-cat.js…)

·        ui.jqgrid.css: La hoja de estilos del grid

2.      Descargar la Interfaz de Usuario (Temas y CSS)

Como jqGrid es un plugin de jQuery, podemos utilizar los temas de la biblioteca de componentes JQuery UI  para conseguir bonitos efectos visuales de una manera rápida y sencilla. Además, una vez descargado el css correspondiente, también lo podremos manipular o incluso crear uno personalizado directamente desde la web.

Entramos en la galería de los temas y nos descargamos el que más nos guste. (También tenemos la opción de descargarnos un zip con todos los temas, y posteriormente elegir que tema añadiremos en nuestro proyecto ASP.NET MVC).

Para nuestro ejemplo, yo utilizaré el tema “Sunny”

3.      La Vista (Razor)

Primero de todo, tendremos que incluir todas las referencias a librerías y archivos necesarios para utilizar jquery y  jqGrid en nuestro proyecto ASP.NET MVC. Estas referencias se podrían insertar en la página maestra.

_Layout.cshtml

<script src="@Url.Content("~/Scripts/jquery-1.9.1.js")" type="text/javascript"></script>

<link href="@Url.Content("~/Content/ui.jqgrid.css")" type="text/css" rel="stylesheet" />

<link href="@Url.Content("~/Content/sunny/jquery-ui.css")" type="text/css" rel="stylesheet" />

<script src="@Url.Content("~/Scripts/jquery.jqGrid.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/grid.locale-es.js")" type="text/javascript"></script>

A continuación, ya podremos insertar jqgrid dentro de nuestra vista.

Index.cshtm

Dentro de nuestra vista incluiremos un <DIV> que contendrá una <TABLE> con un identificador único, que rellenaremos a través de javascript, mediante el objeto jqGrid. Además, si queremos que la tabla tenga paginación también necesitaremos incluir otro contenedor con otro identificador único.

<div id="grid_container">

<table id="list">

</table>

<div id="pager"></div>

</div>

El siguiente paso es inicializar jqGrid cuando se termine de cargar la página, para lo que crearemos un código javascript, en el que se invoca la función de activación del plugin sobre la tabla cuyo ID se indica en el selector (“#list“).

<script type="text/javascript"> jQuery(document).ready(function () {     jQuery("#list").jqGrid({         url: '@Url.Action("ObtenerDatosItemGrid","Home")',         datatype: 'Json',         mtype: 'POST',         colNames: ['Id', 'Codigo', 'Producto', 'Cantidad', 'Importe'],         colModel: [             { name: 'art_articuloid', index: 'art_articuloid', width: 20, align: 'left', editable: true, editrules: { edithidden: true }, hidden: true },             { name: 'art_codigo', index: 'art_codigo', width: 50, align: 'left', editable: true },             { name: 'art_producto', index: 'art_producto', width: 70, align: 'left', editable: true },             { name: 'art_cantidad', index: 'art_cantidad', width: 30, align: 'right', editable: true },             { name: 'art_importe', index: 'art_importe', width: 30, align: 'right', editable: true}],                    pager: jQuery('#pager'),         rowNum: 20,         rowList: [10, 20, 50, 100],         sortname: 'art_articuloid',         sortorder: 'asc',         viewrecords: true,         imgpath: '/content/sunny/images',         caption: 'Productos',         height: 'auto',         width: 900,         autowidth: true,               }); });    </script>

El código anterior, inicializa jqGrid, llamando a la acción ObtenerDatosItemGrid del controlador Home. (que detallaremos en el siguiente punto).
El objeto que devuelve esa acción está codificado en Json.
El modelo contiene 5 campos (art_articuloid, art_codigo, art_producto, art_cantidad, art_importe).
Existe paginación y el contenedor de paginación es el #pager.
Por defecto, muestra 20 elementos por página.
Se pueden visualizar en una misma página 10, 20, 50, 100 elementos
Está ordenador por el campo “art_articuloid” de manera ascendent

En próximos posts, analizaremos con más detalle las propiedades del objeto jqgrid y sus características. Aunque para cualquier duda siempre se puede mirar la documentación del propio plugin

4.     El Controlador

Tenemos un controlador llamado “Home”, que tiene un método de acción llamado “ObtenerDatosItemGrid.
Este método tiene 4 parámetros que son enviados directamente por jqGrid.

·        sidx, el índice o nombre del campo de ordenación actual.

·        sord, “asc” o “desc”, indicando si el orden es ascendente o descendente.

·        page, el número de página actual.

·        rows, número de elementos a obtener para completar la página.

Dentro del método lo que hacemos es obtener un listado de Productos y  meterlo dentro un objeto data que lo serializaremos en Json, para que lo pueda recuperar jqGrid.

public ActionResult ObtenerDatosItemGrid(string sidx, string sord, int page, int rows) {        List<Producto> ListaProductos = new List<Producto>();         // Simulamos la lectura a nuestro modelo de datos         // A la práctica, accederíamos al Modelo, y este accedería a los datos de la tabla SQL         for (int j = 1; j < 30; j++)         {             Producto Prod = new Producto();             Prod.art_articuloid = j;             Prod.art_codigo = "COD"  + j.ToString();             Prod.art_producto = "Producto " + j;              Random rand = new Random((int)j);             Prod.art_cantidad = rand.Next(1,10);             Prod.art_importe = rand.Next(100, 500);             ListaProductos.Add(Prod);         }         int totalRegistros = 30;         int totalPages = (int)Math.Ceiling((decimal)totalRegistros / (decimal)rows);                var data = new         {             total = totalPages,                      // Total de páginas             page = page,                             // Página actual             records = totalRegistros,                // Total de registros             rows = from a in ListaProductos          // Datos de filas                                    select new                     {                         id = a.art_articuloid,                         cell = new string[]{                             a.art_articuloid.ToString(),                             a.art_codigo,                             a.art_producto,                             a.art_cantidad.ToString(),                             a.art_importe.ToString() + " €"                          }                     }         };         return Json(data, JsonRequestBehavior.AllowGet);        //Devolvemos el datos en Json }

Finalmente, ya podemos ejecutar nuestro proyecto y visualizar la tabla de ejemplo tal y como tenéis en este mismo post

_________________________________________


En los próximos posts, veremos cómo implementar diferentes funcionalidades del jqGrid(Ordenación, Eliminación en Línea, SubGrids Jerárquicos….) y pequeños trucos y consejos.

Puedes descargarte el código de ejemplo desde aquí.