Data grid en PHP

  • Por
  • 30 de junio de 2009
  • Valoración:
  • 28 Comentarios
  • PHP
Comentamos una clase con la que implementar un data grid en PHP: a partir de un array asociativo, mostramos todos sus datos en una tabla, con el data grid creado automáticamente.
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.

Nota: La clase Data Grid PHP está creada con programación orientada a objetos y características que sólo están disponibles a partir de PHP 5.

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Comentarios

Elfowan

30/6/2009
Muy buen articulo.
Tal y como digo es un articulo muy interesante y creo que a todos los que trabajen con bases de datos y tengan que mostrar los resultados de consultas les puede interesar sobre todo lo del ordenamiento. En fin habrá que probarlo y utilizarlo.

waldemar

02/7/2009
DataGrid
Excelente aporte, muy util y que bueno que sigan dando tips sobre programacion, saludos y espero que sigan tan bien como siempre.

KanitCR

02/7/2009
Data grid en PHP
Será muy útil como herramienta para los reportes de bases de datos, se ve muy bueno vamos a probarlo.

alexisgm

02/7/2009
Impecable
Hola, gracias por el artículo, muy bien explicado a mi entender, desde hace un par de semanas estoy trabajando con php, o mejor dicho estudiándolo, y me impresiona la cantidad de cosas que puedes hacer con el, y este articulo del data grid, me es de mucha utilidad para seguir experimentando, gracias

JAIME

04/7/2009
INTERESANTE PERO...
ES MUY BUENO EL CODIGO E INTERENSANTE SOLO QUE NO FUNCIONA EL ACTIONS EDITAR.
AL RESPECTO PODRIA ALGUIEN DECIRME COMO HACER ALGO PARECIDO PERO QUE POR EJEMPLO TENGAMOS CODIGO Y DESCRIPCION Y YO INGRESO EL CODIGO DOY ENTER O TAB NO IMPORTA Y APAREZCA AUTOMATICAMENTE LA DESCRIPCION DEL CODIGO POR FAVOR GRACIAS.

liliana

05/7/2009
datagrid
esta muy interesante el tema gracias por enseñarme estoy aprendiendo gracias amigos.

carmen

09/7/2009
Muy bueno
Me parece, super interesante, en los ejemplos se ven muy bien ahora hay que probarlos

llimi779

06/9/2009
Data grid
bueno, te recomendaria leer bien sobre data grid, lo q tu has echo es una simple tabla, lo cual no es de mucha ayuda, pero bueno de todas maneras tienes q fundamentar bien en lo q estas haciendo..

alejandro_pereira

04/11/2009
creacion de data gred en php
Es lo que he estado buscando hace tiempo y no lograba saber como hacerlo en php, ya se que es un data grid y voy a comenzar a realizar las pruebas con los buenos ejemplos que publicaron los felicito

Peter

18/12/2009
pregunta
muy bueno el datagrid, pero una pregunta, se pueden sacar datos del datagird??

Luis

21/12/2009
data grid
Muy Buena explicación. Sería bueno terminar este ejemplo agregando las secciones de "delete.php" y "edit.php".

emilio german brizuela

18/1/2010
data grid
muy bueno viejo!!! ahroa una pregunta, como puedo hacer si estoy trabajando con PDO... donde lo puedo hacer un fetchAll(), no tenog opcion de hacer un fetchAssoc(), en mi caso probe y me repite llos valores en la grilla, por que el fetchAll() los trae asi de la bas e de datos!!

alves

28/5/2010
Al contrario
Como hacer para mandar los datos del grid a una tabla de una BD en Mysql

Hilger

24/6/2010
(Y)
Hermano, dejeme decirle que me ha salvado la vida.

Apenas llevo dos semanas programando y no sabia como llenar un grid con datos de mi base de datos.

Dios lo bendiga

alvaro ortiz

06/7/2010
como crear un rango a mostrar por ej. de 10 en 10 o 15 en 15
Muy bacano esto y muy fácil pero ayúdeme como hago para mostar rango a mostrar por ej. de 10 en 10 o 15 en 15 en la paret de abajo ?

chinox

05/10/2010
data
muy bueno el data grid

byron_macias

22/11/2010
Mejoras
Alguien conoce de un datagrid hecho en javascript para php.
Gracias

Jonathan León

04/1/2011
Le hace falta paginación
buen dia a todos, buen desarrollo, pero creo que le hace falta la paginacion, para ordenar cuando son muchos resultados, no creen? si alguien sabe como integrarlo a este desarrollo, se agradeceria mucho el aporte.... saludos

Juan Pablo Castillo

14/3/2011
datadrig en blanco
Saludo Señores
Soy nuevo en esto del php, el problema que tengo es que estoy haciendo un formulario en el cual van los datos del padre de familia como nombre, direccion telefono etc, pero quiero incluir una tabla o datagrid que este en blanco para agregarle los datos de los integrantes de su familia, como son nombre, edad, escolaridad etc. eston van ir grabados a una tabla independiente pero relacionados, el detalle que puedo poner 4 filas para los familiares para hay familias de mas de 4 integrantes.
de antemano agradesco por sus comentarios
Atentamente
Juan Pablo Castillo

ROBINSON

28/4/2011
EXELENTE
Me parece una utilidad muy buena, la probe con my SQL y definitivamente super facil y muy practica de implementar.

erik

06/10/2011
Paginado
Es posible realizar un paginado con la clase datagrid.php

nilvana13

12/12/2011
colocar una subconsulta
Buenos dias quisiera saber como colocar una subconsulta en el datagrid, me explico muestros unos datos de un cliente, nombre, sede, ciudad, pero como sede y ciudad son llaves foraneas me muestra son los ids, quisiera mostrar los nombres que estan relacionados con estas ids

Gracias de antemano

Kalakol

06/3/2012
como aprovecho los datos del grid
he probado a asignarle una variable al dato %id% para realizar una consulta pero no hay forma

$x->addRowSelect("alert('You have selected id # %Id%')");

necesito usar ese id para realizar una consulta que muestre los datos asociados pero no se como hacerlo

si alguien puede ayudarme les agradecere

Alvaro Mesa L

11/6/2012
Colaboración para editar un registro específico en el data grid
Buenas noches
Estuve mirando este post, y de ante mano los felicito por su aporte.

Tengo la siguiente inquietud con respecto al ejemplo 3, relacionado con el data grid en php: cuando selecciono la opcion de editar para un registro especifico, ¿Cómo puedo hacer para enviar la información del registro a cajas de texto bien sea en la misma página o en otra?
Lo he intentado, sin embargo no he logrado ningún resultado.
Agradezco toda su colaboración.

ALVARO MESA LONDOÑO
Colombia

eamane

05/11/2012
habria forma de paginarlo?
Hola esta genial el datagrid! estaba buscandolo desde hace tiempo :) me pregunto si habría forma de paginarlo sin hacer limit, supongo que es complicado ya que realmente no es un datagrid sino una tabla que emula el funcionamiento de este objeto, bueno si alguien sabe alguna forma lo agradecería. Un saludo.

jAVI

27/1/2013
AYUDA CON UNA CONSULTA CON UN WHERE
Gracias por la clase pero como puedo meter una condición en la consulta

$x->setQuery("*", "Alumnos"); si en el * donde pongo la select si pongo el where no me funciona puesto que hay tendria el from dentro de la select y el de (alumnos) el segundo parametro

Cesar

14/3/2013
Resolución problema con los acentos y las ñ
Para solucionar el problema de la visualización de acentos en el datagrid, lo que tienen que hacer es abrir el archivo de la clase y añadir lo siguiente en el método public function getString():

añadir utf8_encode para que la cadena $data se codifique bien

$output .= utf8_encode($data). '</td>' . " ";

Todo dependerá también de que codificación usen en su base de datos y en su web

Octavio

13/12/2013
mysql desaprobado (deprecated) por oracle
el tema es que mysql esta ya desaprobado por oracle, a favor de mysqli (improved), y la mayoria de los servidores y servicios web soportan esta ultima version

Compartir