jqGrid es un plugin de jquery que permite crear tablas dinámicas, ya sea con contenido embebido en la misma página HTML o con contenido dinámico extraído de un servidor. Este artículo aborda esta última modalidad.

La generación de tablas dinámicas con contenido extraído del servidor requiere como mínimo:

  • Un elemento <table /> en el DOM que servirá de base para que se genere la table dinámica
  • Las generación de una instancia de jqGrid con la especificación de por lo menos 4 opciones:
    • url – dirección de la que se van a extraer los datos
    • colModel – Especificación de las columnas de la tabla dinámica
    • colNames – Etiquetas de los encabezados de las columnas
  • datatype – Tipo de datos regresados por el servidor (JSON en este ejemplo)

Dependencias

A nivel Javascript la única dependencia indispensable para el funcionamient de jqGrid es jquery. Sin embargo es recomendable incluir las bibliotecas de idioma para hacer más placentera la experiencia del usuario. Por otra parte, el despliegue de las tablas requiere las hojas de estilo de jquery ui (mas no sus métodos). Dicho esto, una implementación minimum minimorum del jqGrid es la siguiente:

<!DOCTYPE html>
<html>
<head>
<title>jqGrid con Symfony</title>
<link rel="stylesheet" 
href="{{ asset('bundles/acmedemo/css/ui-lightness/jquery-ui.css') }}" />
<link 
rel="stylesheet" href="{{ asset('bundles/acmedemo/css/ui.jqgrid.css') }}" />
</head>
<body>
	<table id="grid" ></table>
	
	<script src="{{ asset('bundles/acmedemo/js/jquery.js') }}">
	</script>
	<script src="{{ asset('bundles/acmedemo/js/jquery.jqGrid.js') }}">
	</script>
	<script 
	src="{{ asset('bundles/acmedemo/js/i18n/grid.locale-es.js') }}">
	</script>
	<script language="javascript">
	$(function() {
		$("#grid").jqGrid({
			url: "{{ path('_grid_content') }}"
			, colModel: [
							{index:'nombre'}
							, {index:'apellidos'}
							, {index:'telefono'}
			]
			, colNames: ["Nombre(s)","Apellidos", "Tel\u00E9fono"]		
			, datatype: 'json'
		});
	});
	</script>
</body>
</html>

En la línea destacada del twig anterior es dónde se especifica a jqGrid cuál será el action de Symfony que ha de proporcionarle información. En tu controlador de Symfony debes tener un action que regrese información en formato JSON, de la siguiente manera:

/**
* @Route("/gridContent", name="_grid_content")
*/
public function contenidoDelGridAction() {
	$renglones = array();
	$renglones[] = array('id'=>1, 'cell'=> array('Alberto', 'Lopez', '111111111'));
	$renglones[] = array('id'=>2, 'cell'=> array('Juan', 'Sanchez', '12345556'));
	$renglones[] = array('id'=>3, 'cell'=> array('Jaime', 'Del Villar', '22222222'));
	$renglones[] = array('id'=>4, 'cell'=> array('Kim', 'Vaughn', '+45(445)272 4672'));
	$contenidoParaJqGrid = array(
		'total'=>1, 
		'page'=>1, 
		'records'=>1,
		'rows'=>$renglones
	);
	return new \Symfony\Component\HttpFoundation\Response(
		json_encode($contenidoParaJqGrid)
		, 200
		, array('content-type'=>'application/json') 
	);
}

La combinación anterior nos genera una tabla dinámica similar a la siguiente:

grid-basico

Tutorial

Vamos a aprovechar el bundle ejemplo que viene empacado con Symfony (AcmeDemoBundle). Si has descargado Symfony de symfony.com deberás tener la subcarpeta src/Acme/DemoBundle:

(Para información en español sobre la correcta instalación de Symfony recomiendo la guía en http://gitnacho.github.io/symfony-docs-es/book/installation.html. Para este tutorial no sigas la parte en la que dice “Cómo eliminar el AcmeDemoBundle” porque este será precisamente el bundle que utilizaremos).

Si puedes ver la página de bienvenida de Symfony y al dar clic en el botón “RUN THE DEMO” estás listo para continuar.

1) Modifica el archivo Symfony/src/Acme/DemoBundle/Controller/DemoController.php. Vas a insertar dos funciones nuevas a la clase DemoController:

/**
* @Route("/grid")
* @Template()
*/
public function gridAction() {
	return array();
}
	
	
/**
* @Route("/gridContent", name="_grid_content")
*/
public function contenidoDelGridAction() {
	$renglones = array();
	$renglones[] = array('id'=>1, 'cell'=> array('Alberto', 'Lopez', '111111111'));
	$renglones[] = array('id'=>2, 'cell'=> array('Juan', 'Sanchez', '12345556'));
	$renglones[] = array('id'=>3, 'cell'=> array('Jaime', 'Del Villar', '22222222'));
	$renglones[] = array('id'=>4, 'cell'=> array('Kim', 'Vaughn', '+45(445)272 4672'));
	$contenidoParaJqGrid = array(
		'total'=>1, 
		'page'=>1, 
		'records'=>1, 
		'rows'=>$renglones
	);
	return new \Symfony\Component\HttpFoundation\Response(
		json_encode($contenidoParaJqGrid)
		, 200
		, array('content-type'=>'application/json') 
	);
}

2) En el directorio Symfony/src/Acme/DemoBundle/Resources/views/Demo crea un nuevo archivo grid.html.twig y pon en él el código del principio de este artículo.

3) Para que el ejemplo funcione es necesario instalar las bibliotecas de hojas de estilo y de javascript de jquery, jquery ui y jqGrid. Por estándar estas bibliotecas debes instalarlas en Symfony/src/Acme/DemoBundle/Resources/public.

NOTA: Para fines didácticos he renombrado los archivos de las bibliotecas quitando la información referente a las versiones. Cuando prepares aplicaciones productivas es recomendable que incluyas dicha información para evitar problemas de compatibilidad en el futuro.

Tu estructura de directorios de recursos debería quedar como

Symfony/src/Acme/DemoBundle/Resources/public
	/js
		/jquery.jqGrid.js
		/jquery.js
		/i18n
			/grid-locale-xx.js (muchos como este)
	/css
		/demo.css (parte del AcmeDemoBundle original)
                /ui.jqgrid.css
		/ui-lightness
			/jquery-ui.css
			/images
				/todos lo iconos parte de jquery ui

4) Para que las bibliotecas css y js se traspasen al directorio de trabajo de Symfony y puedan ser accedidos desde un browser es necesario que ejecutes la siguiente línea de comando en el directorio base de Symfony:

php app/console assets:install web

NOTA: si por alguna razón la línea de comando te marca un error es seguramente por un problema de permisos. Consulta “Configurando permisos” en http://gitnacho.github.io/symfony-docs-es/book/installation.html para mayor información.

Si todo va bien podrás abrir con tu browser http://localhost/Symfony/web/app_dev.php/demo/grid y podrás ver tu primer tabla dinámica con jqGrid.

Anuncios