Hoje veremos como criar um data grid usando uma classe
gratuita do PHP, passo a passo. Mas antes de começar vou explicar o que
é um Data Grid.

Um data grid nada mais é do que a apresentação de dados em forma de
tabela (lembra das <table></table>? Algo assim). Cada
conjunto de registros é mostrado em uma linha, e o data grid pode ter
funcionalidades de ordenação dos dados e opções para sua edição ou
exclusão.

Classe Data Grid PHP

Com esta simples classe é possível criar um data grid a partir de um array
com os dados que queremos apresentar na tabela. É simples criar e
configurar e, com alguns comandos avançados, é possível alterar o seu
comportamento para que seja possível implementar as necessidades
habituais em uma estrutura desse tipo.

Essa classe foi criada com POO (Programação Orientada a Objetos) e
características que estão disponíveis somente a partir do PHP5. Ela
pode ser baixada clicando aqui.

Vamos começar a ver como funciona a classe utilizando um exemplo
simples e inserindo funcionalidades no decorrer do artigo, para deixar
nosso exemplo mais robusto.

Para começar é necessário inserir a classe nos scripts PHP antes de utilizá-la.

//incluimos a classe

require 'DataGrid.php';

Agora temos que criar um Array com os dados que serão apresentados
no Data Grid. Será um array associativo, duas dimensões, onde a
primeira, o array principal, receberá todos os registros a serem
mostrados no data Grid, e na segunda estão cada um dos registros
definidos como um array associativo.

Agora
construímos o array com um algumas informações, mais adiante veremos
como construir esse array através de uma consulta ao banco de dados.

//criamos o array com os dados a serem apresentados no Data Grid

$alunos = array(

array("id" => 1, "nome" => "Pepe Perez", "curso" => "Informática básica", "nivel" => 2),

array("id" => 2, "nome" => "María Suarez", "curso" => "Informática avançada", "nivel" => 1),

array("id" => 3, "nome" => "Roberto Soriano", "curso" => "Sistemas operacionais", "nivel" => 2),

array("id" => 5, "nome" => "Alberto Rodriguez", "curso" => "Inglés técnico", "nivel" => 1),

array("id" => 7, "nome" => "Julia Marcos", "curso" => "Sociologia", "nivel" => 3),

array("id" => 10, "nome" => "Socorro Rozas", "curso" => "Informática básica", "nivel" => 1),

array("id" => 11, "nome" => "Pablo Reñones", "curso" => "Informática básica", "nivel" => 2)

);

Agora, antes de continuarmos com a construção da estrutura, temos
que criar alguns estilos CSS para podermos melhorar o aspecto do Data
Grid

<style type="text/css">

.linhaI{background-color:#ffffcc;}

.linhaP{background-color:#ffcc99;}

.fdg_sortable {cursor:pointer;text-decoration:underline;color:#00c;}

</style>

Foram criadas três classes CSS, com seus respectivos estilos. As
classes “linhaI” (linha ímpar) e “linhaP” (linha par) aplicaram estilo
às linhas do Data Grid e a classe “fdg_sortable” é responsável por
estilizar os títulos de cada coluna do Data Grid.

Vamos criar o data grid a partir dos dados que temos no array.

//instanciamos o objeto data grid, passando como parâmetro o array anterior

Fete_ViewControl_DataGrid::getInstance($alunos)

//VAMOS LANÇANDO DIVERSOS MÉTODOS SOBRE O OBJETO INSTANCIADO

//atributos gerais para a tabela

->setGridAttributes(array('cellspacing' => '3?, 'cellpadding' => '4?, 'border' => '0?))

//permitimos que hajam características de ordenação

->enableSorting(true)

//fazemos um setup das colunas do data grid, indicando o valor que será mostrado na primeira linha do data grid

->setup(array(

'id' => array('header' => 'ID'),

'nome' => array('header' => 'Nome'),

'curso' => array('header' => 'Curso'),

'nivel' => array('header' => 'Nivel curso')

))

//definimos os estilos para as linhas ímpares

->setRowClass('linhaI')

//definimos os estilos para as linhas pares

->setAlterRowClass('linhasP')

//chamamos o método que construirá o data grid

->render();

Todas as linhas foram comentadas para que o entendimento se torne mais simples.

Agora vejamos como inserir ou apagar coisas do data grid, para personalizá-lo. Faremos algumas coisas como:

1. Vamos ocultar o “ID” do array associativo, para que não seja mostrado.
2. No campo de nível do cursos, vamos mostrar o nível com alguns
   asteriscos usando uma função que converterá os números em uma cadeia de
   asteriscos.
3. Vamos coluna no data grid, que aparecerá antes de qualquer outra,
   para mostrar um contador que indicará a quantidade de registros
   apresentados.

Destas três coisas, a mais complicada é fazer um modelo para alterar a
forma como é mostrado um campo. Para começar, precisaremos de uma função
que devolva o dado que se quer mostrar, com o formato desejado.

function nivel_estrelas($num){

$estrelas = "";

for ($i=0; $i<$num; $i++){

$estrelas .= "*";

}

return $estrelas;

}

Utilizaremos essa função para atribuir como “template” para o campo nível de curso.

Vamos agora ao código utilizado para implementar todas as funcionalidades citadas no data grid:

//OCULTAR UM CAMPO NO DATA GRID

//COLOCAR UMA FUNÇÂO PARA MOSTRAR UM CAMPO

//COLOCAR UM CAMPO ANTES DAS COLUNAS DO ARRAY DO DATA GRID

Fete_ViewControl_DataGrid::getInstance($alunos)

->setGridAttributes(array('cellspacing' => '3?, 'cellpadding' => '4?, 'border' => '0?))

->enableSorting(true)

//fazemos com que o campo "id" do array associativo não seja mostrado

->removeColumn('id')

->setup(array(

'nome' => array('header' => 'Nome'),

'curso' => array('header' => 'Curso'),

//utilizamos a função template para mostrar o nivel do curso com umas estrelas

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

))

//inserimos uma coluna em todos os registros do data grid(a primeira coluna será esta)

//nesta coluna mostramos um contador de registros

->addColumnBefore('Contador', '%counter%.', 'Num', array('align' => 'right'))

//definimos a partir de que número será iniciado o contador

->setStartingCounter(1)

->setRowClass('linhaI')

->setAlterRowClass('linhaP')

->render();

Novamente as linhas foram comentadas para facilitar o entendimento.
Chamo a atenção sobre a linha que faz uso da função anterior como um
template para um campo.

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

Isto faz com que o campo “nivel”, quando for mostrado em linhas
distintas do data grid, chame a função nivel_estrelas(), passando como
parâmetro %data%, que é o valor que tem cada um dos registros do array
associativo, no campo “nível”.

Por último vamos ver outro exemplo, um pouco mais desenvolvido, para
mostrar os dados do mesmo array. Neste caso vamos simplesmente mostrar
uma coluna adicional ao final de cada registro do data grid, onde
iremos inserir uns links para editar e/ou apagar o registro atual.

//PARA COLOCAR UM BOTÃO PARA EDITAR OU APAGAR
Fete_ViewControl_DataGrid::getInstance($alunos)
->setGridAttributes(array('cellspacing' => '3?, 'cellpadding' => '4?, 'border' => '0?))
->enableSorting(true)
->removeColumn('id')
->setup(array(
'nome' => array('header' => 'Nome'),
'curso' => array('header' => 'Curso'),
'nivel' => array('header' => 'Nivel curso', 'cellTemplate' => '[[nivel_estrelas:%data%]]')
))
->addColumnBefore('Contador', '%counter%.', 'Num', array('align' => 'right'))
//agora mostro um campo depois de cada elelemto, com links para editar ou apagar o registro
//no interior deste campo utilizo $id$ para enviar o valor "id" do array
->addColumnAfter('actions', '<a href="exemplo3.php?editar=$id$">Editar</a> ? <a href="exemplo3.php?apagar=$id$" onclick="return confirm('Está certo que quer apagar $nome$?')">Apagar</a>', 'Actions', array('align' => 'center'))
->setStartingCounter(1)
->setRowClass('linhaI')
->setAlterRowClass('linhaP')
->render();

Neste exemplo apenas inserimos uma linha de código para fazer uma
chamada ao método addColumnAfter(), que serve para inserir uma coluna
depois das colunas que formamos com o array.

->addColumnAfter('actions',
'<a href="exemplo3.php?editar=$id$">Editar</a> ? <a
href="exemplo3.php?apagar=$id$" onclick="return confirm('Está certo que
quer apagar $nome$?')">Apagar</a>', 'Actions', array('align'
=> 'center'))

Neste caso simplesmente temos que indicar como parâmetro a
addColumnAfter() dois dados: o primeiro para especificar um título para
a coluna e o segundo para especificar o seu conteúdo. O conteúdo dessa
coluna, neste caso, são os links para editar e apagar, onde são
utilizadas urls que enviam os dados por GET, que é o identificador do
registro.

Montando o data grid a partir de um banco de dados

Só falta agora falar sobre como extrair os dados de uma base de dados
para fazer o array de elementos que será utilizado na montagem do data
grid.

No exemplo que acompanha a classe data_grid há um código para
extrair a informação do MySQL, como pode ser visto nas linhas abaixo.

$users = array();

$result = mysql_query("SELECT * FROM user", $dbLinkId);

while ($row = mysql_fetch_assoc($result))

{

$users[] = $row;

}

Como se pode ver, primeiro se cria um array e logo se faz um looping
pelos resultados da consulta. Cada um dos elementos retornados pela
consulta será introduzido no array criado anteriormente e para ele
assinalamos o array associativo que nos devolverá mysql_fetch_assoc()
desse primeiro array.

Bom, pessoal, espero que esse artigo possa ser útil a vocês. Clique abaixo para poder fazer o download da classe e de um exemplo.

Clique aqui para baixar a classe data grid junto com um exemplo