Ordenar Tabela Pai-Filho

TOTVS Fluig Documentos (ECM)
,
1

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

2

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?

3

Boa tarde.
Os usuários não podem escolher, o form tem que ordenar pela primeira coluna sempre.

4

Entendi… 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’

5

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.

6

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; 
}