05/03/2012

Faça RIA com JQuery utilizando flexigrid.js


Para aqueles temerosos com o fim do Flash, e consequentemente do Flex, podem se deliciar com o Flexigrid. Um plugin do JQuery que cria tabelas dinâmicas, ricas em opções para paginação, classificação, busca, entre outras opções.

Para que você possa implementar Flexigrid em seu site, você deve baixar o plugin em www.flexigrid.info, colocando os arquivos em nos diretórios do seu site e ter uma versão atualizada do JQuery.


Para iniciar, crie um componente de tabela em seu site, como segue abaixo:



Logo abaixo, você deve inserir o seguinte script (dentro da tag script)

jQuery("#table").flexigrid({
    url:'pesquisa.php',
 dataType: "json",
    colModel:[
     {display: 'ID', name:'id', sortable: true, width:70, align: 'center', hide: true},
     {display: 'Matrícula', name:'matricula', sortable: true, width:70, align: 'center'},
     {display: 'Nome', name:'nome', width:80, sortable: true, align: 'center'}
    ],
 buttons:[
  {name: 'Incluir', bclass: 'add', onpress: doCommand},
  {name: 'Alterar', bclass: 'edit', onpress: doCommand},
  {name: 'Excluir', bclass: 'delete', onpress: doCommand},
  {separator: true}
 ],
 searchitems: [
  {display: 'Matrícula', name : 'matricula', isdefault: true},
  {display: 'Nome', name : 'nome'}
 ],
    sortname: "codigo",
        sortorder: "DESC",
 usepager: true,
 useRp: true,
 rp: 15,
 singleSelect: true,
    title:"Cadastro de Usuários",
 width: 900,
 height: 'auto',
 showTableToggleBtn: true
});

Personalização
O script acima pode ser personalizado, para isso basta modificar o valor de algumas variáveis, são elas:

url: é o script pelo lado do servidor onde retornará os dados XML ou JSON
dataType: é o tipo dos dados retornados (XML ou JSON)
colModel: é o modelo da tabela em questão.
buttons: são os botões de eventos para interagir com os dados da referida tabela.
searchitems: são os itens pesquisáveis de sua tabela.
sortname: é a coluna padrão de classificação da tabela.
sortorder: é a ordem inicial de classificação (ascendente ou descendente).
usepager: você pode definir se utiliza ou não os botões de navegação, atualização e pesquisa.
useRp: você define se o usuário poderá definir resultados por página;
rp: número inicial de resultados por página.
singleSelect: define se pode ser utilizada seleção simples ou múltipla.
title: título da tabela.
width e height: largura e altura da tabela, respectivamente.
showTableToggleBtn: define se a tabela pode ser minimizada ou não.

Personalização do colModel
display: nome que aparecerá no topo da tabela.
name: nome do campo na tabela do banco de dados, referente à coluna.
sortable: define se a coluna pode ser ordenada ou não.
width: largura da coluna.
align: alinhamento da coluna.
hide: visibilidade da coluna.

Retorno de dados em formato JSON para a tabela (pesquisa.php)
Ao carregar a tabela, algumas variáveis são passadas via POST para o script no lado do servidor, seja ela uma página em ASP, PHP ou JSP, etc. Para este exemplo, vamos utilizar o PHP. As variáveis retornadas via POST, são:

page: página atual.
sortname: nome da coluna que deverá ser classificada.
sortorder: ordem da classificação.
qtype: coluna selecionada durante a pesquisa.
query: texto pesquisado.
rp: quantidade de registros que deverão ser retornados.

// Conexão com o Banco de Dados
mysql_connect('server', 'username', 'password');
mysql_select_db('dbname');

$page = 1; // A página atual
$sortname = 'id'; // coluna de classificação inicial
$sortorder = 'asc'; // ordem de classificação inicial
$qtype = ''; // coluna pesquisada
$query = ''; // pesquisa

// Retorno do POST
if (isset($_POST['page'])) {
 $page = mysql_real_escape_string($_POST['page']);
}
if (isset($_POST['sortname'])) {
    $sortname = mysql_real_escape_string($_POST['sortname']);
}
if (isset($_POST['sortorder'])) {
    $sortorder = mysql_real_escape_string($_POST['sortorder']);
}
if (isset($_POST['qtype'])) {
    $qtype = mysql_real_escape_string($_POST['qtype']);
}
if (isset($_POST['query'])) {
    $query = mysql_real_escape_string($_POST['query']);
}
if (isset($_POST['rp'])) {
    $rp = mysql_real_escape_string($_POST['rp']);
}

// Configuração da ordenação e da pesquisa utilizando o POST retornado 
$sortSql = "order by $sortname $sortorder";
$searchSql = ($qtype != '' && $query != '') ? "where $qtype = '$query'" : '';

// Retornando o total de resultados pesquisados
$sql = "select count(*) from usuarios $searchSql";
$result = mysql_query($sql);
$row = mysql_fetch_array($result);
$total = $row[0];

// Configuração da paginação
$pageStart = ($page-1)*$rp;
$limitSql = "limit $pageStart, $rp";

// Retornando dados em JSON
$data = array();
$data['page'] = $page;
$data['total'] = $total;
$data['rows'] = array();
$sql = "select id, matricula, nome from usuario $searchSql $sortSql $limitSql";
$results = mysql_query($sql);

while ($row = mysql_fetch_assoc($results)) {
 $data['rows'][] = array(
  'id' => $row['id'],
  'cell' => array($row['id'], $row['matricula'], $row['nome'])
 );
}
echo json_encode($data);


Parâmetros que devem ser retornados em JSON
page: número da página atual
total: número total de resultados
rows: array de resultados com ID (único) que será associado ao tr da tabela.

Implementando os método dos botões
Para que os botões possam funcionar perfeitamente, você deve criar, dentro da mesma tag script, o método dos botões, observe que utilizaremos uma "artimanha" para retornar o ID.

function doCommand(com, grid) {

 if (com == 'Incluir') {
  $('.trSelected', grid).each(function() {
   var id = $(this).attr('id');
   id = id.substring(id.lastIndexOf('row')+3);
   //Implementar função de edição
  });
 } else if (com == 'Alterar') {
  $('.trSelected', grid).each(function() {
   var id = $(this).attr('id');
   id = id.substring(id.lastIndexOf('row')+3);
   //Implementar função de edição
  });
 } else if (com == 'Excluir') {
  $('.trSelected', grid).each(function() {
   var id = $(this).attr('id');
   id = id.substring(id.lastIndexOf('row')+3);
   //Implementar função de remoção
  });
 }
 
}

Este post foi baseado no tutorial criado por Eric Caron, na página de apoio do Flexigrid.
Obrigado a todos e até o próximo post! Não esqueçam de curtir nossa FanPage e divulgar nosso trabalho nas redes sociais.

3 comentários:

Alysson Vinicius disse...

Parabéns muito bacana esse plugin.

gostaria de saber como faço para pegar o id do grid ou outro campo para fazer uma manutenção no registro.
Obrigado alysson

Alysson Vinicius disse...

Parabéns pelo artigo muito bom, eu já utilizo, mas estou com um problema, como faço para pegar o id do grid e mais um outro campo para fazer a manutenção no registro
Obrigado

M Lucia Figueiredo disse...

Ótimo artigo, porém fiquei desejosa de saber como posso passar um parâmetro para a flexgrid acrestendar no meu seletc EX:

Quero que a grid traga todos os produtos da categoria x
Eu quero passar essa categoria (que pode variar) como paramento da url p hp