Nessa etapa eu criei o atributo width para regular a largura das colunas.
Vou procurar também esclarecer alguns pontos do código javascript.
P. Como vou definir a largura das colunas ?
R. Vou mandar esse dado através do harbour via JSON.
P. Por que é necessário fixar a largura das colunas ?
R. Quando passava de uma página para outra a largura das colunas estava variando ligeiramente.
Faça um teste com os exemplos anteriores para comprovar.
Portanto, vou corrigir esse pequeno problema e ao mesmo tempo rever alguns pontos do javascript, apesar
desse não ser o foco do estudo.
O objetivo principal, portanto, é criar uma propriedade width lá no modHarbour (dados.prg) e enviar junto com os outros dados.
Em dados.prg ficou assim :
// Head
AADD( aHead , "Código" );AADD( aWidth , "20%" ) // <--- aWidth armazena string com largura relativa
AADD( aHead , "Nome" );AADD( aWidth , "70%" ) // <---- Não vai somar 100% por causa dos botões que vão ocupar espaço, é bom deixar uma sobra.
O JSON do modHarbour agora ficou assim :
{"Result":"OK", <--------- Deu certo! Não estou tratando outros casos, mas deixo aqui para posterior mudança.
"NextPage":true, <------- Tem próxima página ? (para habilitar/desabilitar) botões
"PreviousPage":false, <-- Tem página anterior ?
"Header":["Código","Nome",""], <---- O cabeçalho (tem um extra vazio para a coluna dos botões de alteração)
"Width":["20%","70%"], <------------ O tamanho das colunas (a alteração dessa aula)
"Rows":[{"___pk":7566,"id":7566,"nome":"JONES"}, <---- Os dados + valor da chave primária (___pk)
{"___pk":7654,"id":7654,"nome":"MARTIN"},<---+
{"___pk":7698,"id":7698,"nome":"BLAKE"}] <---+
}
Agora vamos parte onde recebo os dados :
No navegador eu recebo esses dados juntamente com as definições do grid. Nada vai mudar, apenas vou referenciar o que fiz em dados.prg no javascript.
Vou repetir o que já coloquei em tópicos anteriores. São pequenas observações sobre o código javascript:
1. O JQuery/Javascript tem funções que recebem automaticamente tudo o que mando pelo modHarbour sem precisar converter nada. O padrão JSON garante isso.
2. Esse recebimento é feito por $.ajax
3. Essa "função de usuário" (lembre-se da DBEDIT) recebe um parâmetro data (ou o nome que eu quiser). Ela será chamada somente se o navegador conseguir acessar a sua página --> success: function( data )
4. Esse parâmetro data [ em function( data ) ] é um hash javascript com o conteúdo do json que eu enviei do harbour.
Você pode achar estranho a notação function( data ), mas é porque o Javascript aceita funções sem nome.
Pense nelas como blocos de código extendidos.
Nesse trecho abaixo eu uso data.Width para preencher a propriedade width de cada coluna (td) da minha tabela.
for ( let elem in val ){
if (elem != "___pk")
row += '<td width="'+ data.Width[++ord] +'">' + val[elem] + '</td>';
}
O contexto do trecho acima é a função $.ajax, que fica no método RefreshGrid, em brw.js :
Vou reproduzir o contexto abaixo e comentar alguns trechos.
RefreshGrid( nSkip = 0 ){ <--- Atualização do grid (ele é chamado a cada passada de página.
$("#page").text( parseInt( $("#page").text() ) + nSkip); <---- Atualizo o número da página para o usuário
$("#registros thead").empty(); <---- Limpo os cabeçalhos
$("#registros tbody").empty(); <---- Limpo os dados (agora a tabela ficou vazia (a partir da linha de baixo vou começar a preencher de novo)
$.ajax({ <---------------------------- Começo a consulta ao modHarbour
type: 'GET', <--------------- Método que vou usar.
O modHarbour vai receber os dados através do GET (não do POST)
url: "dados.prg", <----------- Os script modHarbour que vai receber os dados e retornar o resultado
data: { <--------------------- Aqui é o que estou mandando
pagina: $("#page").text() <----- Só estou mandando um parâmetro (a página)
},
async: false,
dataType: 'json',
success: function( data ){ <- Minha "função de usuário" ( data é o JSON de retorno com o que o modHarbour vai me retornar, aqui ele já "virou" hash javascript)
let head = "";
let row;
let ord;
$("#anterior").attr("disabled", !data.PreviousPage );
$("#proximo").attr("disabled", !data.NextPage );
switch ( data.Result ){
case 'OK':
console.log( data ); <-------- Aqui é o meu "depurador" / Equivale ao alert para ver o conteúdo de uma variável que vc tem dúvida
head += '<tr>';
for ( let elem of data.Header ){
head += '<th>' + elem + '</th>';
}
head += '</tr>';
$( head ).appendTo("#registros thead");
for ( let val of data.Rows ){
if ( typeof val.___pk != "undefined" ) <----- Se tiver chave primária eu preciso guardar ela
row = '<tr ___pk=' + val.___pk + '>';
else
row = '<tr>'; <-------------------- Como não veio chave primária não guardo
ord = -1 <-------------- Posso fazer melhor do que isso :-)
console.log( data.Width ); <-------- Meu "depurador" de novo
for ( let elem in val ){
if (elem != "___pk")
row += '<td width="'+ data.Width[++ord] +'">' + val[elem] + '</td>';
}
row += "</tr>";
console.log( row ); <------- A linha que estou retornando. (Mais depuração / Não esqueça de apagar depois
$( row ).appendTo("#registros tbody"); <--------- Finalmente adiciono as linhas ao tbody do grid #registros (esse nome não era para estar fixo aqui dentro da minha função)
}
break;
}
}
}); // ajax
}
Pare quem nunca viu, o console.log() é uma função especial do Javascript só para servir de depuração.
Pense naqueles avisos ? e ?? que a gente bota dentro do código quando tem alguma dúvida.
Para ver o conteúdo de console.log você precisa ativar o console do seu navegador. No Chrome basta clicar Ctrl+Shift+I e selecionar a aba Console.
Entendo o desconforto de quem nunca viu esses códigos. Mas analisando o arquivo brw.js e index.html dá para ter uma noção melhor.
* VOLTANDO AO ASSUNTO DA LARGURA
Essas larguras são das colunas. A função dela é evitar que elas mudem de tamanho ligeiramente
a cada passada de página.
A largura das colunas é uma coisa, a largura do GRID é outra. A largura do GRID só vai variar se o usuário redimensionar a janela, se acessar
o sistema de um smartphone, tablet, etc.
Em resumo: A largura total do GRID é para permanecer a mesma quando houver uma mudança na página dos registros (botão next/previous).
A princÃpio você não precisa mecher na largura do GRID, mas se precisar alterar, faça nesse trecho do HTML :
<div class="row">
<div class="col-md-12"> <-------------- altere 12 para outro valor inferior (12 é o máximo)
<table id="registros" class="table table-striped">
<thead></thead>
<!-- Dados -->
<tbody>
</tbody>
<!-- Dados -->
</table>
</div>
</div>
Sei que para quem tem pouca experiência é difÃcil, mas nesse caso da largura do GRID, tudo
o que você tem a fazer é mudar "col-md-12" para "col-md-10", por exemplo.
Você pode ter vários col dentro de um row, mas a soma dos col não pode passar de 12.
Exemplos :
<div class="row"> <!-- 4 + 8 = 12 -->
<div class="col-md-4"> </div>
<div class="col-md-8"> </div>
</div>
<div class="row"> <!-- 3 + 6 + 3 = 12 -->
<div class="col-md-3"> </div>
<div class="col-md-6"> </div>
<div class="col-md-3"> </div>
</div>
<div class="row"> <!-- 10 + 2 = 12 -->
<div class="col-md-10"> </div>
<div class="col-md-2"> </div>
</div>
Esse número 12 é uma espécie de largura relativa. Como o sistema vai ter que se adaptar a qualquer tela, eu não posso trabalhar com números absolutos.
Quem quiser saber mais, pesquisa "sistema de grids bootstrap".
O valor máximo é 12, você pode ir diminuindo e dando refresh no navegador (Ctrl+F5).
Nota: O refresh real de um navegador é Ctrl+F5, não somente F5. Ctrl+F5 força a leitura total e não usa o que ficou armazenado no cache do navegador.
Espero não ter complicado mais do que ajudado. Não espere entender tudo de primeira.