SlickGrid. Ejemplo básico (y II) - Añadiendo funcionalidad

Artículos anteriores:
SlickGrid. Ejemplo básico (I) - Creando el primer grid

Tras haber creado nuestro primer Grid con SlickGrid en este artículo le añadiremos cierta funcionalidad.

Así podremos ver cómo podemos modificar datos del grid, gestionar eventos o establecer una ordenación básica.

Modificando datos

Como los datos del grid se pasan por referencia, podemos modificar la información del objeto products y automáticamente quedarán modificados los datos del grid. Sin embargo el grid no es capaz de detectar que los datos han sido modificados por lo que deberemos indicarle que se debe redibujar llamando al método invalidate.

Para comprobarlo voy a añadir un botón debajo del grid y le asociaré al evento click una función que cambie todos los elementos del array products por los contenidos en el array products2.

• JavaScript
• HTML

$(function () {
    var basicgrid = new Slick.Grid("#FirstGrid", products, columns);

    $("#ChangeAll").click(function () {
        for (var i = 0; i < products.length; i++)
            products[i] = products2[i];

        basicgrid.invalidate();
    });

});

<div id="FirstGrid" style="width:800px; height:500px;"></div>
<br />
<div>
    <button id="ChangeAll">Cambiar Todos</button>
</div>

Si volvemos a cargar la página y pulsamos en el botón Cambiar Todos comprobaremos que todos los datos del grid se reemplazan por los del array products2.

También podemos indicarle al grid las líneas específicas que debe redibujar a través del método invalidateRows, que recibe como parámetro un array con los índices (basados en 0) de las filas a redibujar. Voy a añadir un nuevo botón que sustituya únicamente los 4 primeros elementos de products.

• JavaScript
• HTML

$("#ChangeSome").click(function () {
    for (var i = 0; i < 4; i++)
        products[i] = products2[i];

    basicgrid.invalidateRows([0, 1, 2, 3]);
    basicgrid.render();
});

<div id="FirstGrid" style="width:800px; height:500px;"></div>
<br />
<div>
    <button id="ChangeAll">Cambiar Todos</button>
    <button id="ChangeSome">Camibar Cuatro</button>
</div>

Si cargamos de nuevo la página y pulsamos en el botón Cambiar Cuatro comprobaremos que se reemplazan los datos de las 4 primeras filas del grid.

Eventos y Ordenación Básica

Al definir las columnas he definido tres con la propiedad sortable activada (ID, Denominación y Precio). Si pulsamos sobre la cabecera de estas columnas veremos que el estilo del texto de cabecera cambia y que aparece una flechita indicando la ordenación ascendente o descendente, pero no hace nada más. Los datos no se ordenan.

La funcionalidad de ordenación no está incluida por defecto. Debemos proveerla nosotros interceptando el evento sort del grid. El SlickGrid tiene su propia gestión de eventos. Para crear un controlador de eventos para el SlickGrid debemos llamar al método suscribe del evento pasándole como parámetro la función controlador. El controlador recibe dos parámetros: el evento generado por el navegador (si existe) y un objeto con datos adicionales del grid que varía dependiendo del evento.

Así que voy a crear un controlador para el evento sort de forma que podamos ver dos cosas: cómo suscribirnos a un evento y cómo establecer una ordenación básica:

• JavaScript

basicgrid.onSort.subscribe(function (e, args) {
    var field = args.sortCol.field;

    products.sort(function (a, b) {
        var result =
            a[field] > b[field] ? 1 :
            a[field] < b[field] ? -1 :
            0;

        return args.sortAsc ? result : -result;
    });

    basicgrid.invalidate();
});

Ahora si volvemos a cargar la página veremos que si pulsamos sobre alguna de las columnas definidas como ordenables, a parte de cambiar el estilo de la cabecera, se ordenan los datos del grid por dicha columna.

El código

Puedes descargar el código de todos los ejemplos de SlickGrid de:

SlickGrid. Tutorial basado en ejemplos

Artículo siguiente:
SlickGrid. Dando formato a las celdas (I) - Formato básico