Si necesitas implementar un data grid en PHP tienes dos posibilidades: 1) hacerlo tú mismo, o 2) ayudarte de algún desarrollo listo para usar en tu página. Yo he estado probando una sencilla clase gratuita con la que hacer un data grid, que quiero explicarla en este artículo de DesarrolloWeb.com.

Qué es un data grid

Un data grid, que viene a significar en castellano rejilla de datos, es una interfaz de usuario bastante típica, que sirve para visualizar información en una tabla. La información suele ser un conjunto de registros, y se suelen mostrar cada uno de ellos en una fila. Además, los data grid suelen tener integradas funcionalidades para la ordenación de los datos y opciones para su edición o borrado.

En PHP en principio no existe ninguna función del lenguaje para generar estos data grid automáticamente, pero distintos frameworks tienen esa funcionalidad, por lo que si instalas o utilizas uno, quizás no te interese este artículo.

Clase Data Grid PHP

Con esta sencilla clase se puede crear un data grid a partir de un array con los datos que queremos presentar en la rejilla. Y bueno, la califico de sencilla porque es fácil de usar y de configurar, sin embargo, seremos capaces de alterar su comportamiento con numerosos parámetros avanzados, para implementar todas las necesidades habituales de una estructura de este tipo.

El autor de esta clase es Nguyen Duc Thuan, de Vietnam y la ha puesto a nuestra disposición a través del sitio PHP Clases. Sin embargo, he subido la clase Data Grid al propio servidor de DesarrolloWeb.com, por si acaso ese link no funciona.

Vamos a ver cómo utilizar esta clase a través de un ejemplo, que iremos complicando poco a poco para añadir funcionalidades.

Para empezar, tenemos que incluir la clase en nuestros scripts PHP, antes de poder usarla:

//incluyo la clase
require 'DataGrid.php';

Ahora, tenemos que crear un Array con los datos que se van a mostrar en el Data Grid. Como había dicho, el data grid se genera a través de un array asociativo. En realidad se trata de un array de dos dimensiones, en el que el array principal es un listado con todos los registros a mostrar en el data grid y en la segunda dimensión, están cada uno de los registros definidos como un array asociativo. Es decir, se trata de un array normal en el que a su vez, en cada uno de sus registros, tenemos arrays asociativos con la información que queremos presentar de cada registro.

Ahora construyo el array con un literal, aunque luego mostraremos cómo construirla a través de una consulta a una base de datos.

//voy a crear un array para tener datos que mostrar en el data grid
$alumnos = array(
   array("id" => 1, "nombre" => "Pepe Perez", "curso" => "Informática básica", "nivel" => 2),
   array("id" => 2, "nombre" => "María Suarez", "curso" => "Informática avanzada", "nivel" => 1),
   array("id" => 3, "nombre" => "Roberto Soriano", "curso" => "Sistemas operativos", "nivel" => 2),
   array("id" => 5, "nombre" => "Alberto Rodriguez", "curso" => "Inglés técnico", "nivel" => 1),
   array("id" => 7, "nombre" => "Julia Marcos", "curso" => "Sociología", "nivel" => 3),
   array("id" => 10, "nombre" => "Socorro Rozas", "curso" => "Informática básica", "nivel" => 1),
   array("id" => 11, "nombre" => "Pablo Reñones", "curso" => "Informática básica", "nivel" => 2)
);

Ahora, antes de continuar ya con la construcción de la estructura, debemos crear unos estilos CSS (opcionalmente) para alterar el aspecto del data grid.

<style type="text/css">
.fila{background-color:#ffffcc;}
.filaalterna{background-color:#ffcc99;}
.fdg_sortable {cursor:pointer;text-decoration:underline;color:#00c;}
</style>

Yo he creado distintas clases CSS, con sus estilos. Los class "fila" y "filaalterna" los he creado yo un nombre cualquiera, puesto que luego voy a configurar la clase para que utilice estos estilos CSS. La clase "fdg_sortable" está marcada por el propio sistema y, que yo sepa, no se puede cambiar.

Ahora veamos cómo crear un data grid a partir de los datos que tenemos:

//instancio el objeto data grid, pasando como parámetro el array anterior
Fete_ViewControl_DataGrid::getInstance($alumnos)
//VOY LANZANDO DIVERSOS MÉTODOS SOBRE ESTE OBJETO INSTANCIADO
//atributos generales para la tabla
->setGridAttributes(array('cellspacing' => '3', 'cellpadding' => '4', 'border' => '0'))
//permito que haya características de ordenación
->enableSorting(true)
//hago un setup de las columnas del data grid, indicando el valor que se mostrará en la primera fila, cabecera del data grid
->setup(array(
   'id' => array('header' => 'ID'),
   'nombre' => array('header' => 'Nombre'),
   'curso' => array('header' => 'Curso'),
   'nivel' => array('header' => 'Nivel curso')
))
//defino el estilo para las filas
->setRowClass('fila')
//defino el estilo para las filas alternas
->setAlterRowClass('filaalterna')
//llamo al método para mostrar el datagrid
->render();

He comentado todas las líneas de código para que se pueda entender qué se hace en cada método. El ejemplo puede verse en marcha en una página aparte.

Ahora vamos a ver cómo añadir o quitar cosas de este data grid, para personalizarlo un poco más. En este ejemplo voy a hacer varias cosas nuevas:

1)Voy a ocultar el campo "id" del array asociativo, para que no se muestre.
2)En el campo del nivel del curso, voy a mostrar el nivel con unos asteriscos, en lugar de el número. Esto lo hago a través de una función que hará de plantilla, que convertirá los números en una cadena con asteriscos.
3)Voy a colocar una nueva columna en la rejilla, que aparezca la primera de todas, para mostrar un contador con el número del usuario. Ese número no tiene nada que ver con el identificador, simplemente es un contador que lleva internamente la clase a medida que lista los elementos en el data grid.

De estas tres cosas, la más complicada de ver es la de hacer una plantilla para alterar la manera de mostrar un campo. Para empezar, necesitaremos una función que haga de plantilla. La función debe devolver el dato que se quiere mostrar, pero con el formato que queremos visualizar.

function nivel_estrellas($num){
   $estrellas = "";
   for ($i=0; $i<$num; $i++){
      $estrellas .= "*";
   }
   return $estrellas;
}

Luego utilizaremos esa función para asignarla como "template" para el campo nivel del curso.

Veamos el código que utilizaríamos para implementar todas estas funcionalidades en el data grid:

//OCULTAR UN CAMPO EN EL DATA GRID
//PARA PONER UNA FUNCIÓN QUE HAGA DE PLANTILLA AL MOSTRAR UN CAMPO
//COLOCO UN CAMPO ANTES DE LAS COLUMNAS DEL ARRAY DATA GRID
Fete_ViewControl_DataGrid::getInstance($alumnos)
->setGridAttributes(array('cellspacing' => '3', 'cellpadding' => '4', 'border' => '0'))
->enableSorting(true)
//hago que no se muestre el campo id del array asociativo
->removeColumn('id')
->setup(array(
   'nombre' => array('header' => 'Nombre'),
   'curso' => array('header' => 'Curso'),
   //utilizo una función template para mostrar el nivel del curso con unas estrellitas
   'nivel' => array('header' => 'Nivel curso', 'cellTemplate' => '[[nivel_estrellas:%data%]]')
))
//añado una columna en todos los registros del data grid (la primera columna será esta)
//en esa columna muestro un contador para enumerar los registros
->addColumnBefore('Contador', '%counter%.', 'Num', array('align' => 'right'))
//defino a partir de qué número deseo empezar la cuenta de registros.
->setStartingCounter(1)
->setRowClass('fila')
->setAlterRowClass('filaalterna')
->render();

De nuevo, he comentado las líneas nuevas en este código. Pero quería llamar la atención sobre la línea que hace uso de la función anterior como template para un campo.

'nivel' => array('header' => 'Nivel curso', 'cellTemplate' => '[[nivel_estrellas:%data%]]')

Esto hace que el campo "nivel", a la hora de mostrarse en las distintas filas del datagrid, se invoque la función nivel_estrellas(), pasando como parámetro %data%. Ese %data% es el valor que tiene cada uno de los registros o arrays asociativos, en el campo "nivel".

El ejemplo puede verse en marcha en una página aparte.

Por último vamos a ver otro ejemplo, todavía un poco más ampliado, para mostrar los datos del mismo array. En este caso vamos simplemente a mostrar una columna adicional al final en cada registro del data grid, en la que añadiremos unos enlaces para editar y para borrar el registro actual.

//PARA PONER UN CAMPO DESPUÉS PARA EDICIÓN Y BORRADO
Fete_ViewControl_DataGrid::getInstance($alumnos)
->setGridAttributes(array('cellspacing' => '3', 'cellpadding' => '4', 'border' => '0'))
->enableSorting(true)
->removeColumn('id')
->setup(array(
'nombre' => array('header' => 'Nombre'),
'curso' => array('header' => 'Curso'),
'nivel' => array('header' => 'Nivel curso', 'cellTemplate' => '[[nivel_estrellas:%data%]]')
))
->addColumnBefore('Contador', '%counter%.', 'Num', array('align' => 'right'))
//ahora muestro un campo después de cada elemento, con enlaces para editar y borrar el registro
//en el interior de ese campo utilizo $id$ para acceder al valor "id" del array
->addColumnAfter('actions', '<a href="ejemplo3.php?editar=$id$">Editar</a> - <a href="ejemplo3.php?borrar=$id$" onclick="return confirm('Estás seguro que quieres borrar a $nombre$?')">Borrar</a>', 'Actions', array('align' => 'center'))
->setStartingCounter(1)
->setRowClass('fila')
->setAlterRowClass('filaalterna')
->render();

En este ejemplo sólo hemos añadido una línea de código para hacer una llamada al método addColumnAfter(), que sirve para añadir una columna después de las columnas que formaríamos con el array.

->addColumnAfter('actions', '<a href="ejemplo3.php?editar=$id$">Editar</a> - <a href="ejemplo3.php?borrar=$id$" onclick="return confirm('Estás seguro que quieres borrar a $nombre$?')">Borrar</a>', 'Actions', array('align' => 'center'))

En este caso simplemente tenemos que indicar como parámetro a addColumnAfter() dos datos: el primero para especificar una cabecera para esa columna y el segundo para especificar el contenido. El contenido de esa columna en este caso son dos enlaces para editar y borrar, en los que se utiliza una URL que envía un dato por GET, que es el identificador de este registro.

La URL del enlace de editar es ejemplo3.php?editar=$id$. Cabe fijarse como se utiliza $id$ para acceder al valor del índice "id" del array asociativo que estamos mostrando en el datagrid.

Podemos ver en marcha este tercer ejemplo.

Tirar de base de datos para hacer este datagrid

Sólo nos quedaría hablar sobre la posibilidad de extraer los datos del data grid desde una base de datos, para hacer el array de elementos a mostrar, con datos que hemos traído de MySQL o cualquier otro sistema.

En el ejemplo que acompaña a la clase data_grid hay un código para extraer la información de MySQL, del que voy a transcribir unas líneas sobre cómo se hace ese array de arrays asociativos que necesitamos para cargar los datos del data grid:

$users = array();
$result = mysql_query("SELECT * FROM user", $dbLinkId);
while ($row = mysql_fetch_assoc($result))
{
$users[] = $row;
}

Como se ha podido ver, primero se crea un array y luego se hace un recorrido a un set de resultados sobre una consulta. Cada uno de los elementos resultantes de la consulta, se introducen en el array creado anteriormente y para ello simplemente asignamos el array asociativo que nos devuelve mysql_fetch_assoc() a ese primer array creado.