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>
    .flexigrid div.fbutton .add {
        background: url(css/images/add.png) no-repeat center left;
    }    

    .flexigrid div.fbutton .delete {
        background: url(css/images/close.png) no-repeat center left;
    }    
</style>

<table id="flex1" style="display:none"></table>

<script type="text/javascript">
    $("#flex1").flexigrid({
        url: '<?php echo Router::url(array('controller' => 'flexi', 'action' => 'index'), true); ?>',
        dataType: 'json',
        colModel : [
            {display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},
            {display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
            {display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},
            {display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},
            {display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}
        ],
        buttons : [
            {name: 'Add', bclass: 'add', onpress : test},
            {name: 'Delete', bclass: 'delete', onpress : test},
            {separator: true}
        ],
        searchitems : [
            {display: 'ISO', name : 'iso'},
            {display: 'Name', name : 'name', isdefault: true}
        ],
        sortname: "iso",
        sortorder: "asc",
        usepager: true,
        title: 'Paises',
        useRp: true,
        rp: 15,
        showTableToggleBtn: true,
        width: 700,
        height: 200,
        pagestat: 'Mostrando {from} até {to} de {total} itens',
        procmsg: 'Processando, aguarde...',
        nomsg: 'Nenhum item'
    });

    function test(com,grid) {
        if (com == 'Delete') {
            confirm('Excluir ' + $('.trSelected',grid).length + ' itens?')
        } else if (com == 'Add') {
            alert('Adicionar novo item');
        }
    }
</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

class FlexiController extends AppController {

    var $name = 'Flexi';
    var $uses = array('Country');

    function index() {
        Configure::write('debug', 0);
        extract($this->params['form']);
        $this->paginate = array(
            'limit' => $rp,
            'page' => $page,
            'order' => array(
                $sortname => $sortorder
            )
        );
        if ($query) {
            $this->paginate['conditions'][$qtype . ' LIKE'] = '%' . $query . '%';
        }
        $this->header('Content-type: text/x-json');
        $this->set('paises', $this->paginate('Country'));
        $this->layout = 'ajax';
    }

}

?>

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(); ?>
{ page: <?php echo $params['page']; ?>, total: <?php echo $params['count']; ?>, rows: [
<?php
$registros = array();
foreach ($paises as $pais) {
  
 $registros[] = "{id: '" . $pais['Country']['iso'] . "', cell: ['" .
$pais['Country']['iso'] . "', '" . $pais['Country']['name'] . "', '" .
$pais['Country']['printable_name'] . "', '" . $pais['Country']['iso3']
. "', '" . $pais['Country']['numcode'] . "']}";
}
echo implode(',', $registros);
?> ] }

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!

De 0 a 10, o quanto você recomendaria este artigo para um amigo?

Powered by:

Usando FlexiGrid com CakePHP

Juan Basso

Juan Basso