Grids en la interfaz de usuario en AngularJS: ui-grid

1
15281

En este tutorial vas a aprender cómo introducir el módulo ui-grid en tus proyectos desarrollados en AngularJS y a configurar las funcionalidades básicas que te permiten presentar datos al usuario y que este interaccione con los mismos.

0. Índice de contenidos

1. Introducción

Un elemento como un grid (traducido literalmente como rejilla) nos permite presentar en la interfaz de usuario grandes conjuntos de datos. En AngularJS contamos, entre otras alternativas, con el módulo ui-grid. Está desarrollado completamente en AngularJS sin otras dependencias. Se encuentra englobado en la suite AngularUI.

Las funcionalidades que podemos encontrar en ui-grid son variadas dependiendo del nivel de complejidad que necesitemos para mostrar los datos al usuario y de la interacción que queramos ofrecer con el grid. Entre otras, permite desde ordenar y filtrar hasta incluir agrupación y expansión de filas y edición de campos.

En este tutorial vamos a explicar cómo añadir el módulo ui-grid en nuestros proyectos de AngularJS y a explicar cómo configurar el grid para añadir opciones básicas como ordenación y filtrado.

2. Entorno

El tutorial está escrito usando el siguiente entorno:

  • Hardware: Portátil MacBook Pro Retina 15′ (2.3 Ghz Intel Core I7, 16GB DDR3).
  • Sistema Operativo: Mac OS Yosemite 10.10.3
  • Plunker – AngularJS 1.4.3

3. Incorporando ui-grid

3.1. ui-grid en la vista

En la parte de la vista tenemos que incluir la dependencia de ui-grid en el encabezado

<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">

y en el ámbito del controlador, la directiva ui-grid

<div ng-controller="TNTIndexController as indexController">
      <div id="tntGridServices" ui-grid="{ data: tntPortfolio }"></div>
</div>


Como se puede apreciar, para inicializar el grid se utiliza un objeto JSON. En este caso, se especifica la clave data que toma como valor una variable compartida en el scope.

3.2. ui-grid en el controlador

En el controlador tenemos que incluir uiGrid como dependencia de nuestra aplicación

var app = angular.module('app', ['ui.grid']);

y crear el conjunto de datos que queremos que se muestre en el grid

$scope.tntPortfolio = [
    {
        "cliente": "Globalia (Air Europa)",
        "proyecto": "Metodologías ágiles y soporte al desarrollo",
        "tags": "agilismo, iOS"
    },
    {
        "cliente": "Tinsa",
        "proyecto": "Implantación de metodologías ágiles",
        "tags": "agilismo"
    },
    {
        "cliente": "Casa del Libro",
        "proyecto": "TAGUS",
        "tags": "agilismo, plataforma eReader"
    }
  ];


El nombre de las columnas del grid va a corresponder con las claves de los campos del objeto JSON.

Puedes ver el código completo de este ejemplo en Plunker.

grid-imagen1

4. Configurando funcionalidades básicas de ui-grid

Para configurar las funcionalidades del módulo ui-grid éstas se añaden mediante un objeto de configuración JSON al que nos vamos a referir a él por convenio como gridOptions. Además de las funcionalidades, podemos indicar los datos que deben ir en cada columna.

Veamos un ejemplo de un objeto gridOptions en el que hemos indicado de manera explícita que se puedan ordenar las filas (la opción está activada por defecto), que las filas se puedan seleccionar y la selección sea múltiple y que se pueda hacer un filtrado de filas por campos.

index-controller.js

var app = angular.module('app', ['ui.grid', 'ui.grid.selection']);


app.controller('TNTIndexController', ['$scope', function ($scope) {


  $scope.tntPortfolio = [
  {
    "cliente": "Globalia (Air Europa)",
    "proyecto": "Metodologías ágiles y soporte al desarrollo",
    "tags": "agilismo, iOS"
  },
  {
    "cliente": "Tinsa",
    "proyecto": "Implantación de metodologías ágiles",
    "tags": "agilismo"
  },
  {
    "cliente": "Casa del Libro",
    "proyecto": "TAGUS",
    "tags": "agilismo, plataforma eReader"
    }
  ];
  
  
  $scope.gridOptions = {};
  
  $scope.gridOptions = {
    enableSorting: true,
    enableRowSelection: true,
    enableFullRowSelection: true,
    multiSelect: true,
    enableRowHeaderSelection: false,
    enableColumnMenus: false,
    enableFiltering: true,
    minRowsToShow: $scope.tntPortfolio.length+1
  };
  
  $scope.gridOptions.data =  $scope.tntPortfolio;
    
}]);


Los valores que hemos configurado en gridOptions van a afectar a todas las filas del grid.

  • enableSorting: con valor true, permite ordenar ascendente o descendente en función de un campo una fila.

  • enableRowSelection, enableFullRowSelection, multiSelect: pertenecientes al módulo ui-grid-selection, con valor true permiten seleccionar filas. Con valor true, multiSelect permite seleccionar varias filas simultáneamente.

  • enableRowHeaderSelection: perteneciente al módulo ui-grid-selection, con valor true, se habilita en el encabezado del grid una opción para seleccionar todas las filas de una sola vez.

  • enableColumnMenus: con valor true, se habilita un menú contextual en el encabezado de cada columna.

  • enableFiltering: con valor true, se habilita el filtrado de filas por campos.

  • minRowsToShow: indica el número mínimo de filas que se muestran (tanto si tienen datos como si no). En este caso, se le indica que se muestren tantas filas como entradas tenga el conjunto de datos a mostrar sumando una fila para el encabezado.

Para poder utilizar las funcionalidades de selección, hay que añadir como dependencia uiGridSelection

Finalmente, como es en el controlador donde estamos creamos el objeto gridOptions, indicamos también como parámetro de gridOptions cuál es el conjunto de datos a mostrar, en este caso tntPortfolio, utilizando como en el ejemplo anterior la clave data.

Por su parte, en la vista ahora ya podemos hacer referencia al objeto gridOptions al cargar la directiva ui-grid:

<div ng-controller="TNTIndexController as indexController">
      <div id="tntGridServices" ui-grid="gridOptions" ui-grid-selection></div>
</div>

Observamos también cómo hay incluir la directiva ui-grid-selection para poder hacer uso de las funcionalidades de selección.

Puedes ver el código completo de este ejemplo en Plunker.

grid-imagen2

5. Conclusiones

Con este ejemplo queda visto que para AngularJS disponemos de directivas potentes que nos facilitan la implementación de la interfaz de usuario.

Las funcionalidades que acompañan al módulo ui-grid junto con las de módulos como ui-selection, evitan que tengamos que programar funcionalidades que son recurrentes cuando trabajamos con grids.

6. Referencias

1 COMENTARIO

DEJA UNA RESPUESTA

Por favor ingrese su comentario!

He leído y acepto la política de privacidad

Por favor ingrese su nombre aquí

Información básica acerca de la protección de datos

  • Responsable:
  • Finalidad:
  • Legitimación:
  • Destinatarios:
  • Derechos:
  • Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad