Tales Augusto

Como muitos plugins escritos em javascript para o jQuery, o Flexigrid é mais uma opção para os desenvolvedores que procuraram agilidade e qualidade em seus sistemas. Este plugin é capaz de transformar uma simples tabela (isso, aquela mesma…<table></table>) em uma fantástica grade de exibição de dados. Nela é possível acrescentar botões que executam rotinas em javascript, ordenar as colunas, esconder colunas, paginar os registros e outras coisas legais. Após alguns testes com este plugin, surgiu a idéia de integrá-lo com o ZF. Criei as classes para controlar as configurações do Flexigrid e um helper que renderiza as configurações no cabeçalho da página. Procurei tornar as configurações mais genéricas possíveis. Havendo algum problema, entre em contato para tentar-mos solucioná-lo.

Para tentar exemplificar, irei fazer um passo-a-passo da integração. Estou assumindo que seu projeto já esteja funcionando corretamente, ou seja, MVC configurado corretamente e etc.

A primeira coisa a se fazer é adicionar o componente no mesmo nível onde está o ZF:

/library

/library/Tavs

/library/Zend

Feito isso, seu projeto já terá acesso ao componente Flexigrid. Obs: Tomei o cuidado de escrever as classes mantendo o padrão adotado pelo ZF, onde cada “/” é representada por “_” no nome da classe.

Com o componente incluído, já podemos escrever no controller os métodos que farão configuração do Flexigrid.

IndexController.php

<?php

class IndexController extends Zend_Controller_Action
{
/**
* Retorna a instancia do flexigrid
*
* @return Tavs_jQuery_Flexigrid
*/
private function _getFlexigrid()
{
$front = $this-&gt;getFrontController();
$flexigrid = new Tavs_jQuery_Flexigrid($front-&gt;getBaseUrl() . '/index/list');

$flexigrid
-&gt;setTitle('Clientes')
-&gt;orderBy(
$this-&gt;_getParam('sortname', 'cliente_nome'),
$this-&gt;_getParam('sortorder', Tavs_jQuery_Flexigrid::SORT_ASC)
);

$flexigrid
-&gt;addColumn('text', 'cliente_nome', array(
'label' =&gt; 'Nome'
))
-&gt;addColumn('text', 'cliente_email', array(
'label' =&gt; 'Email'
))
-&gt;addColumn('date', 'cliente_nascimento', array(
'label' =&gt; 'Data de Nascimento',
'align' =&gt; Tavs_JQuery_Flexigrid_Column_Abstract::ALIGN_CENTER
))
-&gt;addColumn('checkbox', 'cliente_ativo', array(
'label' =&gt; 'Ativo?',
'align' =&gt; Tavs_JQuery_Flexigrid_Column_Abstract::ALIGN_CENTER
));

//seletor e atributos da tabela
$flexigrid
-&gt;setSelector('#grid-clientes')
-&gt;addTableAttrib('id', 'grid-clientes');

//paginacao
$flexigrid-&gt;configPaginator($this-&gt;_getParam('rp', 20), $this-&gt;_getParam('page', 1));

return $flexigrid;

}

/**
* Recupera e a manda para a view a instancia do Flexigrid
*/
public function indexAction()
{
$this-&gt;view-&gt;flexigrid = $this-&gt;_getFlexigrid();
}

/**
* Faz a busca no banco de dados para listar no flexigrid.
*
*/
public function listAction()
{

Zend_Layout::getMvcInstance()-&gt;disableLayout();
$this-&gt;_helper-&gt;viewRenderer-&gt;setNoRender(true);

//cria o objeto para montar da query
$db = Zend_Db_Table::getDefaultAdapter();
$select = $db-&gt;select();

//monta o select
$select-&gt;from(array('C'=&gt;'cliente'), array('cliente_id', 'cliente_nome', 'cliente_email', 'cliente_nascimento', 'cliente_ativo'));

$field_search = $this-&gt;_getParam('qtype');
$field_search_value = $this-&gt;_getParam('query');

if ( !empty($field_search) &amp;&amp; !empty($field_search_value) )
{
$select-&gt;where($field_search . ' LIKE ?', '%' . $field_search_value . '%');
}

$flexigrid = $this-&gt;_getFlexigrid();

echo $flexigrid-&gt;generateRows($select, 'cliente_id');

}

}

É importante lembrar que a inclusão de colunas no flexigrid é obrigatória. O parâmetro do construtor é a URL que o flexigrid irá chamar para popular o grid com o dados. Lembrando que essa requisição é feita com AJAX.

A principal característica deste componente é a personalização das colunas. No exemplo acima temos 4 colunas: duas com texto normal, uma para exibição de data e outra para checkbox. Atualmente, o componente suporta colunas para:

1. Checkbox
2. Date
3. Link
4. Select
5. Text

Para criar uma coluna personalizada por você, é necessário extender a classe Tavs_JQuery_Flexigrid_Column_Abstract e implementar o método render(). Ainda não tive tempo para documentar a utilização do componente, mas é só fazer uma boa leitura no código que fica trivial.

O método listAction monta a consulta para executar no banco de dados. Depois de criado o objeto $select, este é passado como parametro para o método $flexigrid->generateRows onde será configurada a paginação e trazer somente os registros necessários para a página em questão.

Depois de configurado o flexigrid, ecoamos a instância que foi enviada para a view:

index.phtml

<?php echo $this->flexigrid ?>

Está quase pronto! Agora falta incluirmos os arquivos jquery.js, flexigrid.js e flexigrid.css. Normalmente se faz essas inclusões no layout “master” da aplicação, no meu caso:

main.phtml

<?php

$base = Zend_Controller_Front::getInstance()->getBaseUrl();

$this
->headScript()
->appendFile( $base . '/scripts/jquery-1.2.6.min.js' )
->appendFile( $base . '/scripts/flexigrid.js' );

$this
->headLink()
->appendStylesheet( $base . '/styles/flexigrid.css' );

echo $this->doctype()
?>
<html>

<head>
<meta http-equiv="Content-Type"; content="text/html; charset=UTF-8" />
<?php
echo $this->headScript();
echo $this->headLink();
echo $this->JQuery();
?>
</head>

<body>
<?php echo $this->layout()->content ?>
</body>

</html>

Arquivos utilizados para o tutorial:

* Biblioteca jQuery
* Flexigrid
* Tavs Library baseado em ZF (Classes PHP).

Script de banco de dados usado no tutorial:

CREATE TABLE `cliente` (
`cliente_id` int(11) NOT NULL,
`cliente_nome` varchar(50) NOT NULL,
`cliente_email` varchar(50) NOT NULL,
`cliente_nascimento` datetime NOT NULL,
`cliente_ativo` int(11) NOT NULL default ‘1′,
PRIMARY KEY (`cliente_id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

–
– Extraindo dados da tabela `cliente`
–

INSERT INTO `cliente` VALUES(1, ‘Tales’, ‘tales@gmail.com’, ‘2009-03-29 22:15:00′, 0);
INSERT INTO `cliente` VALUES(2, ‘Tales’, ‘tales@hotmail.com’, ‘2009-03-27 22:15:11′, 1);

Qualquer contribuição é sempre bem vinda. Correção de bugs ou coisas do gênero pode ser informado através do email contato@talesaugusto.com.br

É isso aí pessoal, espero que ter conseguido passar alguma informação útil a vocês.

Abraços.