Simular un datagrid o gridview con PHP

Transcripción

1 Qué es un data grid Simular un datagrid o gridview con PHP Un data grid (gridview en Visual Studio), 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 se instala o utiliza uno, quizás no es necesario este ejemplo. 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 el grid. 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 a utilizar en mi servidor en el siguiente link por si acaso ese link oficial 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, deben descargar la clase en la carpeta del servidor Web y tenemos que incluir la clase en nuestros scripts PHP, antes de poder usarla:

2 //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;}

3 .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. 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:

4 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'),

5 '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". 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'),

6 '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. Tirar de base de datos para hacer este datagrid

7 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 conjunto 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. Intenten realizar el ejemplo aplicándolo a una tabla de su base de datos y lo principal es que analicen la posibilidad de usarlo en sus proyectos.