Usando FlexiGrid com CakePHP
Depois de escrever sobre como usar o TableSorter com CakePHP, vou escrever agora sobre o FlexiGrid. Mostrar como implementar o exemplo mais sofisticado que eles apresentam no site deles.
Primeiramente, vamos baixar os arquivos necessários:
- jQuery: http://jquery.com (mais recente no momento é a 1.2.6)
- FlexiGrid: http://www.webplicity.net/flexigrid/ (estou me baseando na versão 1.0b3)
Colocar os arquivos (jquery.js e flexigrid.js) na pasta vendors\js ou webroot\js, conforme sua preferência.
Agora na view que vai mostrar a tabela:
Carregar os javascripts:
<?php $javascript->link(array('jquery', 'flexigrid'), false); ?>Feito isso, incluir o seguinte código na página para exibir a tabela (PS: esse código eu copiei exatamente como está na página do Flexigrid):
<style><br /> .flexigrid div.fbutton .add {<br /> background: url(css/images/add.png) no-repeat center left;<br /> } <br /><br /> .flexigrid div.fbutton .delete {<br /> background: url(css/images/close.png) no-repeat center left;<br /> } <br /></style><br /><br /><table id="flex1" style="display:none"></table><br /><br /><script type="text/javascript"><br /> $("#flex1").flexigrid({<br /> url: '<?php echo Router::url(array('controller' => 'flexi', 'action' => 'index'), true); ?>',<br /> dataType: 'json',<br /> colModel : [<br /> {display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},<br /> {display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},<br /> {display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},<br /> {display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},<br /> {display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}<br /> ],<br /> buttons : [<br /> {name: 'Add', bclass: 'add', onpress : test},<br /> {name: 'Delete', bclass: 'delete', onpress : test},<br /> {separator: true}<br /> ],<br /> searchitems : [<br /> {display: 'ISO', name : 'iso'},<br /> {display: 'Name', name : 'name', isdefault: true}<br /> ],<br /> sortname: "iso",<br /> sortorder: "asc",<br /> usepager: true,<br /> title: 'Paises',<br /> useRp: true,<br /> rp: 15,<br /> showTableToggleBtn: true,<br /> width: 700,<br /> height: 200,<br /> pagestat: 'Mostrando {from} até {to} de {total} itens',<br /> procmsg: 'Processando, aguarde...',<br /> nomsg: 'Nenhum item'<br /> });<br /><br /> function test(com,grid) {<br /> if (com == 'Delete') {<br /> confirm('Excluir ' + $('.trSelected',grid).length + ' itens?')<br /> } else if (com == 'Add') {<br /> alert('Adicionar novo item');<br /> }<br /> }<br /></script>Pronto, nossa view está pronta para exibir os dados. Agora vamos para a parte dos dados:
Vamos começar pelo controller (controllers/flexi_controller.php):
<?php<br /><br />class FlexiController extends AppController {<br /><br /> var $name = 'Flexi';<br /> var $uses = array('Country');<br /><br /> function index() {<br /> Configure::write('debug', 0);<br /> extract($this->params['form']);<br /> $this->paginate = array(<br /> 'limit' => $rp,<br /> 'page' => $page,<br /> 'order' => array(<br /> $sortname => $sortorder<br /> )<br /> );<br /> if ($query) {<br /> $this->paginate['conditions'][$qtype . ' LIKE'] = '%' . $query . '%';<br /> }<br /> $this->header('Content-type: text/x-json');<br /> $this->set('paises', $this->paginate('Country'));<br /> $this->layout = 'ajax';<br /> }<br /><br />}<br /><br />?>Duas considerações: desativar o debug é para que ele não exiba erros/warnings de PHP e o tempo de carregamento no final. O layout ajax é para ele não incluir nada a mais que o que eu colocar na view.
Bem, feito isso no controller, vamos para a view (views/flexi/index.ctp), montar nosso JSON na mão 🙂
<?php $params = $paginator->params(); ?><br />{ page: <?php echo $params['page']; ?>, total: <?php echo $params['count']; ?>, rows: [<br /><?php<br />$registros = array();<br />foreach ($paises as $pais) {<br /> <br /> $registros[] = "{id: '" . $pais['Country']['iso'] . "', cell: ['" .<br />$pais['Country']['iso'] . "', '" . $pais['Country']['name'] . "', '" .<br />$pais['Country']['printable_name'] . "', '" . $pais['Country']['iso3']<br />. "', '" . $pais['Country']['numcode'] . "']}";<br />}<br />echo implode(',', $registros);<br />?> ] }Pronto, isso aí vai gerar o JSON necessário para o Flexigrid. Já dá para brincar com ordenação, troca de páginas, filtro
Qualquer coisa, só comentar!
é analista de sistemas e programador, graduado em Ciência da Computação pela Universidade do Estado de Santa Catarina (UDESC). Trabalha com as linguagens PHP (com grande conhecimento no framework CakePHP), XHTML/CSS/JS, C/C++ (desenvolvimento de aplicativos para Windows com MFC), Objective-C (com foco no desenvolvimento para iPhone) e sempre busca desenvolver baseado em design-patterns. Atualmente trabalha na empresa Dígitro Tecnologia, em Florianópolis.
