Tutorial Flexigrid
Autor: Guilherme Passos | Publicado: 2011-09-01T16:29:00-03:00

Lista quase completa de todos os parâmetros disponíveis no Flexigrid.





Propriedades e Documentação



Como você pode ver o componente é muito intuitivo e inclui recursos para:


Busca de registros que satisfazem os seus critérios fornecidos (clicando primeiro no ícone de pesquisa).


Classificar em ordem ascendente ou descendente por uma coluna selecionada.


Ocultar e mostrar colunas para fazer o melhor uso do espaço disponível.


Navegar entre páginas usando os ícones de navegação ou pular direto para uma página particular.



Como usar



Adicionando o Flexigrid a sua página não poderia ser mais fácil. Basta baixar o código de&nbsp;http://www.flexigrid.info e copiar os arquivos necessários em diretórios do seu site. Você também deve ter uma versão do jQuery em execução no seu site para este trabalho, que pode ser encontrada em jquery.com.




Você vai encontrar um arquivo flexigrid.js no arquivo baixado. Incluir este arquivo na seção head do seu site como você faria normalmente, junto com o arquivo CSS (você precisará copiar todo o conteúdo inteiro do 'css' diretório incluindo as imagens).




Depois de criar um elemento de tabela em sua página com um id 'flex1' para este exemplo, você pode criar e incluir um arquivo javascript que consiste no seguinte código. A Flexigrid será então criada no carregamento da página.



$(function() {
&nbsp; &nbsp; &nbsp; &nbsp; $("#flex1").flexigrid({
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: 'staff.php',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataType: 'json',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; colModel : [
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {display: 'ID', name : 'id', width : 40, sortable : true, align: 'left'},
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {display: 'First Name', name : 'first_name', width : 150, sortable : true, align: 'left'},
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {display: 'Surname', name : 'surname', width : 150, sortable : true, align: 'left'},
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {display: 'Position', name : 'email', width : 250, sortable : true, align: 'left'}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ],
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; buttons : [
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {name: 'Edit', bclass: 'edit', onpress : doCommand},
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {name: 'Delete', bclass: 'delete', onpress : doCommand},
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {separator: true}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ],
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; searchitems : [
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {display: 'First Name', name : 'first_name'},
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {display: 'Surname', name : 'surname', isdefault: true},
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {display: 'Position', name : 'position'}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ],
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sortname: "id",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sortorder: "asc",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; usepager: true,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: "Staff",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; useRp: true,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rp: 10,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; showTableToggleBtn: false,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; resizable: false,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 700,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 370,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; singleSelect: true
&nbsp; &nbsp; &nbsp; &nbsp; });
});

Propriedades
Usando o script acima como base para a sua rede, você pode personalizá-lo para atender às suas necessidades usando as propriedades javascript diversas. Por exemplo, você pode especificar em qual coluna os resultados devem ser classificados inicialmente e se classificar em ordem crescente ou decrescente. As propriedades mais comuns são mostrados abaixo.&nbsp;



PropriedadeDescrição
url 
Esta é uma URL do script do lado do servidor que fornece uma representação JSON ou XML dos resultados a serem exibidos na grade usando AJAX. 

dataType 
Você pode optar por ter o seu retorno do script de servidor ou de dados JSON ou XML. 

colModel 
Este é um array contendo uma lista de colunas a utilizar. Você pode definir o nome de exibição, a largura, se a coluna pode ser ordenada e alinhamento do texto. 

buttons 
É  possível utilizar essa matriz para adicionar botões na parte superior do  Flexigrid especificando uma função de callback, por exemplo, você pode  querer criar botões para adicionar, editar e excluir registros.  A propriedade bClass é a classe CSS usada para definir a imagem de fundo para o botão, etc

searchItems 
Usando isso, você pode especificar quais colunas a serem usadas para procurar os resultados usando a área de "pesquisa rápida". Você simplesmente especifica um nome de exibição para a opção de pesquisa, o nome da coluna, e se a coluna é a opção padrão de busca. 

sortname Esta propriedade é usada para especificar a coluna inicial para classificar. 
sortorder 
Especificando o 'asc' ou 'desc' para esta propriedade irá definir a ordem de classificação inicial. 

usepager 
Os botões de navegação da página pode ser ligado ou desligado usando essa propriedade. 

title Este é o título que aparecerá no topo da Flexigrid. 
useRp Se permite ao usuário especificar o número de resultados por página. 
rp O número inicial de resultados por página. 
showTableToggleBtn Isso irá ativar / desativar a minimização dos Flexigrid com um ícone no canto superior direito. 
width A largura da Flexigrid. 
height A altura da Flexigrid. 
singleSelect 
Esta propriedade não documentada é usado para indicar que apenas uma linha pode ser selecionada por vez. Isto é útil se você quiser criar botões, como editar ou apagar o que só se aplicam a uma única linha.






O script de servidor

Para este exemplo vou usar um script PHP para retornar os resultados JSON filtrados pelos critérios especificados no Flexigrid.




Os seguintes dados são enviados para o nosso script usando AJAX e pode ser encontrado no array do PHP $_POST:&nbsp;






ParâmetrosDescrição
page Número da página atual. 
sortname O nome da coluna para classificar.
sortorder A ordem de classificar por: 'asc' ou 'desc'. 
qtype A coluna selecionada durante "busca rápida". 
query O texto usado dentro de uma pesquisa. 
rp O número de registros a serem retornados. 



Agora que temos esta informação podemos ir em frente e criar o script:
php// Connect to MySQL database
mysql_connect('server', 'username', 'password');
mysql_select_db('dbname');
$page = 1; // The current page
$sortname = 'id'; // Sort column
$sortorder = 'asc'; // Sort order
$qtype = ''; // Search column
$query = ''; // Search string
// Get posted data
if (isset($_POST['page'])) {
&nbsp; &nbsp; &nbsp; &nbsp; $page = mysql_real_escape_string($_POST['page']);
}
if (isset($_POST['sortname'])) {
&nbsp; &nbsp; &nbsp; &nbsp; $sortname = mysql_real_escape_string($_POST['sortname']);
}
if (isset($_POST['sortorder'])) {
&nbsp; &nbsp; &nbsp; &nbsp; $sortorder = mysql_real_escape_string($_POST['sortorder']);
}
if (isset($_POST['qtype'])) {
&nbsp; &nbsp; &nbsp; &nbsp; $qtype = mysql_real_escape_string($_POST['qtype']);
}
if (isset($_POST['query'])) {
&nbsp; &nbsp; &nbsp; &nbsp; $query = mysql_real_escape_string($_POST['query']);
}
if (isset($_POST['rp'])) {
&nbsp; &nbsp; &nbsp; &nbsp; $rp = mysql_real_escape_string($_POST['rp']);
}
// Setup sort and search SQL using posted data
$sortSql = "order by $sortname $sortorder";
$searchSql = ($qtype != '' &amp;&amp; $query != '') ? "where $qtype = '$query'" : '';
// Get total count of records
$sql = "select count(*)
from staff
$searchSql";
$result = mysql_query($sql);
$row = mysql_fetch_array($result);
$total = $row[0];
// Setup paging SQL
$pageStart = ($page-1)*$rp;
$limitSql = "limit $pageStart, $rp";
// Return JSON data
$data = array();
$data['page'] = $page;
$data['total'] = $total;
$data['rows'] = array();
$sql = "select id, first_name, surname, position
from staff
$searchSql
$sortSql
$limitSql";
$results = mysql_query($sql);
while ($row = mysql_fetch_assoc($results)) {
$data['rows'][] = array(
'id' =&gt; $row['id'],
'cell' =&gt; array($row['id'], $row['first_name'], $row['surname'], $row['position'])
);
}
echo json_encode($data);
?&gt;




Não há nada muito complicado aqui. Nós simplesmente conectamos a um banco de dados MySQL (substitua as variáveis de conexão para os valores correspondentes ao seu próprio banco de dados), criamos o SQL a partir dos dados fornecidos pela Flexigrid, obtemos o número de registros em todo o resultado e retornamos os resultados em formato JSON usando a função json_encode que está disponível para versões do PHP 5.2.0 e posterior.


Flexigrid requer alguns parâmetros a serem passados de volta na matriz JSON. Estes são:&nbsp;



ParâmetrosDescrição
page O número da página atual. 
total 
O número total de registros no conjunto de resultados. Usado por Flexigrid para calcular o número de páginas. 

rows Este é um array contendo os dados para as linhas. Cada linha precisa de um ID único (usado dentro do id para o elemento 'tr' o HTML) e uma série de dados da coluna. 



 


Botões




Na listagem acima, javascript especifica que a função DoCommand deve ser chamado quando um&nbsp;botão&nbsp;"editar" ou 'delete' é clicado. Como é que Flexigrid sabe qual botão foi clicado? Dois parâmetros são passados para a função. Estes são o nome do comando que neste caso pode ser tanto "Editar" ou "Delete", e o objeto grid.




Todos estamos preocupados neste tutorial é&nbsp;em&nbsp;encontrar um id para a linha selecionada. Quando tivermos isso, podemos facilmente executar qualquer operação que desejamos nos dados para o registro selecionado usando técnicas AJAX por exemplo, que estão além do escopo deste tutorial.



function doCommand(com, grid) {
if (com == 'Edit') {
$('.trSelected', grid).each(function() {
var id = $(this).attr('id');
id = id.substring(id.lastIndexOf('row')+3);
alert("Edit row " + id);
});
} else if (com == 'Delete') {
$('.trSelected', grid).each(function() {
var id = $(this).attr('id');
id = id.substring(id.lastIndexOf('row')+3);
alert("Delete row " + id);
});
}
}



Como você pode ver é apenas um caso de encontrar a linha selecionada usando jQuery. Em seguida, extrair o ID numérico do registro do elemento 'tr' do HTML. Você é livre a partir deste ponto para implementar as funções de edição e exclusão. Você pode pesquisar exemplos usando caixas de diálogo jQuery UI. 


Este tutorial é uma tradução livre baseada no tutorial de Eric Caron encontrado aqui.&nbsp;