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

Fonte: Imasters