Segunda Parte
Chegamos a parte dois do nosso mini-tutorial.
Os pré-requisitos para essa parte são :
(1) Ter acompanhado os exemplos da parte 1
(2) Saber o que é JSON e as funções do Harbour para manipulação (encode/decode)
(3) Entender os métodos POST/GET do protocolo HTTP
(4) Básico de JQuery (Básico mesmo)
Se vc não souber, mesmo assim dá para acompanhar, eu acho...
O objetivo dessa etapa é criar um grid usando AJAX e com paginação.
Nada de mod_harbour será usado nessa primeira etapa. Iremos somente criar um modelo para as etapas posteriores.
**
A ideia é essa :
Código: Selecionar todos
HTML5 + JQuery ------AJAX--------> arquivo.json
(VIEW) (DATA)
São dois arquivos, o principal (contendo a view) e o segundo só com o json.
Nas etapas seguintes nós iremos gerar o arquivo json com mod_harbour.
A equipe do mod_harbour (indiretamente) indica uma biblioteca para
geração de grids que pode ser baixada gratuitamente em
https://datatables.net/
Nós não iremos usar essa biblioteca. As vezes baixamos coisa demais que não vamos usar.
Nesses exemplos a seguir, com pouco código, já dá para ter um ótimo resultado.
**
O código json estático é bem simples :
Código: Selecionar todos
[
{ "id":9, "nome":"João Marcelo" },
{ "id":1, "nome":"Jefferson" },
{ "id":2, "nome":"Daniel" }
]
A leitura desse arquivo é bem simples, primeiro vamos criar um "id" no html para informar
o ponto onde os dados serão escritos. Vou chamar esse "id" de "registros"
Agora o código Javascript (JQuery) que vai pegar o JSON e colocar na tabela.
Código: Selecionar todos
<script>
$( document ).ready( function(){
$.ajax({
type: 'GET',
url: "dados.json",
async: true,
dataType: 'json',
success: function( data ){
$.each( data, function( key, val ) {
$('<tr>').html( "<td>" + val.id + "</td>" +
"<td>" + val.nome + "</td>" ).appendTo("#registros tbody");
});
}
}); // ajax
}); // $( document ).ready
</script>
Rápidos comentários sobre o código acima para quem não trabalhou com JQuery ainda.
Código: Selecionar todos
(1) $( document ).ready( // Aguarda o documento carregar para executar o código
(2) $.ajax // Inicio da chamada ajax
(3) type : 'GET' // Tipo de método usado (não faz diferença porque não tem dados para enviar)
(4) dataType: 'json' // O tipo de dado que será convertido.
(5) url // Endereço onde eu devo pegar os dados (aceita endereços relativos)
(6) success // Bloco de código que será executado em caso de sucesso (a página existe)
Essa função chamada por success é simples, basta lembrar da função de usuário do
DBEDIT. É a mesma ideia.
O parâmetro data é o valor lido do arquivo já devidamente convertido para JSON (eu disse que era um JSON em dataType)
Esse $.each é um laço disfarçado de função que vai percorrer todos os elementos do JSON (agora devidamente convertido para um hash data).
E para cada elemento vai chamar um bloco de código function( key , val )
* o segundo parâmetro "val" é o que interessa. Ele já contém a chave e o valor de cada hash. Tudo automático.
* o método appendTo coloca os dados na marca que eu criei no início.
Você pode achar que eu compliquei com o AJAX, mas é até mais fácil.
Na próxima etapa vamos gerar o dados.json com mod_harbour.
