tabela « CakePHP Brasil

30 julho 2008

Usando FlexiGrid com CakePHP

Arquivado em: CakePHP, Tutoriais — Tags:ext, flexigrid, jquery, lista, sort, tabela — 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

<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

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

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

Comentários (4)

28 julho 2008

Usando o TableSorter com CakePHP

Arquivado em: CakePHP, Tutoriais — Tags:jquery, ordernar, plugin, sorter, tabela, table, tablesorter, vendor — Juan Basso @ 9:26 pm

Pessoal, depois de um tempo sumido devido a alguns trabalhos que me consumiram muito tempo, estou voltando…

Hoje vou falar de uma experiência que tive com o TableSorter com CakePHP na construção de uma página, não me atendo muito a detalhes de design, mas da parte funcional. No grupos de CakePHP PT eu tinha falado que ia fazer, mas fazem quase dois meses e nada, porém agora lá vai… Bill: desculpe a demora.

Primeiro, baixem o jQuery (http://jquery.com) e o plugin TableSorter (http://tablesorter.com).

Extraia os arquivos baixados (jquery.js e jquery.tablesorter.js) em alguma vendors\js ou webroot\js. Eu particularmente prefiro deixar na pasta vendors, pois são plugins de terceiros ou que não são exclusivos da aplicação. Em contra partida, deixar na pasta webroot polpa o trabalho do servidor executar o cake para procurar, reduzindo o tempo de resposta. Aí vai do gosto de cada um. Eu prefiro perder tempo para deixar as coisas nos seus devidos lugares…

No controller, você precisa apenas declarar que vai usar o helper Javascript:

^?View Code PHP

1	var $helpers = array(..., 'Javascript');

Feito isso, criamos uma tabela na view do que queremos mostar:

^?View Code PHP

<table border="0" id="detalhe_compra">
	<caption><?php __('Detalhe por compra'); ?></caption>
	<thead>
		<tr>
			<th><?php __('Pedido'); ?></th>
			<th><?php __('Data'); ?></th>
			<th><?php __('Cliente'); ?></th>
			<th><?php __('Valor'); ?></th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td colspan="3">&nbsp;</td>
			<td><?php echo $number->currency($totalPedidos); ?>
		</tr>
	</tfoot>
	<tbody>
<?php foreach ($pedidos as $pedido): ?>
		<tr>
			<td><?php echo $pedido['Pedido']['numero']; ?></td>
			<td><?php echo $pedido['Pedido']['data']; ?></td>
			<td><?php echo $pedido['Cliente']['nome']; ?></td>
			<td><?php echo $pedido['Pedido']['valor']; ?></td>
		</tr>
<?php endforeach; ?>
	</tbody>
</table>

Depois, ainda na mesma view, basta colocar o seguinte código para carregar os arquivos de javascript no head:

^?View Code PHP

1	<?php $javascript->link(array('jquery', 'jquery.tablesorter'), false); ?>

Em seguida, configurar o TableSorter para agir sobre a tabela:

^?View Code PHP

<?php
$javascript->codeBlock('
	$(document).ready(function(){
		$("#detalhe_compra").tablesorter({decimal: ",", dateFormat: "uk"});
	});', array('inline' => false));
?>

Nas configurações da tabela, defini que os números possuem o vírgula como separador decimal e a data no formato inglês (similar ao nosso).

Pronto, só isso já faz funcionar o TableSorter. Outras configurações, podem olhar no site do TableSorter e ver. Lá é bem documentado e tranquilo.

Abraços e boa sorte a todos, qualquer coisa, é só comentar.

Comentários (7)