Boa tarde. Tenho um form com uma tabela pai-filho que preciso ordenar de acordo com o conteúdo de duas colunas.
Alguém sabe como fazer?
Att
Boa tarde. Tenho um form com uma tabela pai-filho que preciso ordenar de acordo com o conteúdo de duas colunas.
Alguém sabe como fazer?
Att
A ordenação pode ser feita apenas se você montar a tabela filho pelo DataSet ordenando os campos ou se você ordenanar pelo JavaScript apoós o carregamento.
Para a primeira opção aqui tem um link que pode lhe ajudar http://forum.fluig.com/641-campos-pai-e-filho-no-dataset.
Para a segunda opção você terá que criar um código que atenda suas necessidades.
O que você pode fazer é percorrer os campos Pai x Filho ao abrir o formulário, gravar os registros no json, ordernar o json, percorrer o Pai x Filho novamente e substituir os valores do formulário.
Segue abaixo um exemplo:
HTML
<table>
<thead>
<tr>
<th>Campo1</th>
<th>Campo2</th>
<th>Campo3</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="campo1___1" id="campo1___1"></td>
<td><input type="text" name="campo2___1" id="campo2___1"></td>
<td><input type="text" name="campo3___1" id="campo3___1"></td>
</tr>
<tr>
<td><input type="text" name="campo1___2" id="campo1___2"></td>
<td><input type="text" name="campo2___2" id="campo2___2"></td>
<td><input type="text" name="campo3___2" id="campo3___2"></td>
</tr>
<tr>
<td><input type="text" name="campo1___3" id="campo1___3"></td>
<td><input type="text" name="campo2___3" id="campo2___3"></td>
<td><input type="text" name="campo3___3" id="campo3___3"></td>
</tr>
</tbody>
</table>
<input type="button" name="btn_ordenar" id="btn_ordenar" value="Ordenar"/>
Javascript
$("#btn_ordenar").on("click", function(e){
ordenar();
});
// Função para Ordernar JSON
function ordenar() {
var filhos = new Array(); // variável para armazenar o json dos Filhos
// percorrer um campo do da Tabela Pai x Filho para pegar o ID
$("input[id^='campo1___']").each(function(index, value){
var id = $(this).attr("id").split("___");
// adicionar todos os campos do Pai x Filho no json
filhos.push({"campo1": $("#campo1___" + id[1]).val(),
"campo2": $("#campo2___" + id[1]).val(),
"campo3": $("#campo3___" + id[1]).val()});
});
filhos.sort(SortCampo2); // função do Jquery qye faz a ordenação do json. O parâmetro passado é a chamada de outra função
carregaFilhosOrd(filhos); // chamada da função que carrega o Pai x Filho ordenado
}
function carregaFilhosOrd(filhos) {
var i = 0;
// percorre os campos da tabela Pai x Filho para preencher os valores ordenados
$("input[id^='campo1___']").each(function(index, value){
var id = $(this).attr("id").split("___");
// preenche os campos com os valores ordenados no json
$("#campo1___" + id[1]).val(filhos[i].campo1);
$("#campo2___" + id[1]).val(filhos[i].campo2);
$("#campo3___" + id[1]).val(filhos[i].campo3);
i++
});
}
// função para ordenar o campo1. Chamado nesse momento -> filhos.sort(SortCampo1);
function SortCampo1(x,y) {
return x.campo1 - y.campo1;
}
// função para ordenar o campo2. Chamado nesse momento -> filhos.sort(SortCampo2);
function SortCampo2(x,y) {
return x.campo2 - y.campo2;
}
// função para ordenar o campo3. Chamado nesse momento -> filhos.sort(SortCampo3);
function SortCampo3(x,y) {
return x.campo3 - y.campo3;
}
Você precisa permitir que os usuários possam escolher qual coluna será ordenada? Ou a ordenação poderia ser feita no onload do formulário?
— Guilherme Juliano Hardt 08 de May de 2017Boa tarde. Os usuários não podem escolher, o form tem que ordenar pela primeira coluna sempre.
— Ricardo Andrade 08 de May de 2017Entendi.. O fluig não disponibliza atualmente métodos que permitam alterar a ordem dos elementos de um formulário pai filho, contudo, creio que você consiguirá manipular via JQuery. Da uma olhada no stackoverflow e procura por 'sort jquery elements'
— Guilherme Juliano Hardt 11 de May de 2017