CakePHP Brasil

30 julho 2008

Usando FlexiGrid com CakePHP

Arquivado em: CakePHP, Tutoriais — Tags:, , , , , — Juan Basso @ 12:05 am

Pessoal,

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:

    ?View Code PHP
    1

    <?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):

    ?View Code PHP
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

    <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):

    ?View Code PHP
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

    <?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… :)

    ?View Code PHP
    1
2
3
4
5
6
7
8
9

    <?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!

    Powered by WordPress