Exibir Datatable Pai x Filho

TOTVS Fluig Páginas (WCM)
, , ,
1

Tenho um pai x filho que recebo os dados do comprador, ao clicar no botão "Ver Itens", ele traz um datatable (descarregado no id="target") associado ao comprador.

O problema é que esse datatable está sendo exibido antes da linha do comprador. Gostaria que fosse abaixo.


<div class="panel panel-info">
  <div class="panel-heading">
    <h3 class="panel-title">Dados do Comprador</h3>
  </div>
  <div class="panel-body">
    <div class="row">
      <div class="row">
        <div class="col-md-12">
          <div class="form-field table-responsive" data-type="tabledetail" data-field-name="tabledetail">
            <table class="table table-hover" cellspacing="0" tablename="tbl_comprador" noaddbutton="true"
              nodeletebutton="true">
              <thead>
                <tr class="tableHeadRow">
                  <th class="tableColumn">Comprador</th>
                  <th class="tableColumn">Qtdd Itens</th>
                  <th class="tableColumn">Valor</th>
                  <th class="tableColumn">Botão Itens</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="col-md-4 col-xs-12">
                    <div class="form-field">
                      <input type="text" class="form-control" name="nm_comprador" readonly />
                    </div>
                    <br>
                  </td>
                  <td class="col-md-3 col-xs-12">
                    <div class="form-field">
                      <input type="text" class="form-control" name="vl_qtd_itens" readonly />
                    </div>
                  </td>
                  <td class="col-md-3 col-xs-12">
                    <div class="form-field">
                      <input type="text" class="form-control" name="vl_valor_itens" readonly />
                    </div>
                  </td>
                  <td class="col-md-2 col-xs-12">
                    <div class="form-field">
                      <input type="hidden" name="nm_cod_comprador" id="nm_cod_comprador">
                      <button style="cursor:pointer;" class="btn btn-info" name='btn_itens'
                        id="btn_itens" onclick="buscaItensComprador(this);" title="Ver Itens"
                        value="Ver Itens">Ver Itens</button>
                    </div>
                  </td>
                </tr>
                <tr>
                  <div id="target"></div> 
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

:warning: Atenção: Esta publicação foi transferida automaticamente do fórum antigo, mas os anexos não foram incluídos.

2

A técnica Pai x Filho pega a primeira TR da tabela para servir de template para os novos itens. Essa segunda TR pode dar problema.

Para você inserir no local que gostaria teria que criar, via JS, a TR logo após a de onde está o botão e, provavelmente, teria que remover a TR antes de prosseguir com o processo para não afetar os itens dela.

Como a intenção é exibir os detalhes não seria mais simples fazer isso em uma modal ao invés de preencher a tabela Pai x Filho?

Exemplo para adicionar a TR na tabela, mas antes precisa remover aquela segunda TR do tbody:


function buscaItensComprador(botao) {
    // Remove a TR que já existe
    $("#wrapper").remove();

    // Pega a TR do botão clicado
    const tr = $(botao).closest("tr");

    // Adiciona a TR wrapper
    tr.after('<tr id="wrapper"><td colspan="4"><div id="target"></div></td></tr>');

    // continua o processamento da sua função
}

Neste exemplo é exibido somente 1 detalhe por vez.

Exemplo da forma automática que você pediu:


function buscaItensComprador(index, input) {
    const codComprador = input.value,
          targetId = `target_${index}`;

    // Adiciona a TR que conterá a dataTable
    $(input).closest("tr").after(`<tr><td colspan="4"><div id="${targetId}"></div></td></tr>`);

    // continua o processamento da sua função usando a variável targetId pra ser o id da dataTable
}

$(function () {
    $("input[id^='nm_cod_comprador___']").each(buscaItensComprador);
});

Aí você precisa alterar a parte que configura a dataTable pra apontar pro id correto que está na variável targetId.

3

Não entendi a parte de remover a TR antes de prosseguir com o processo, poderia explicar melhor?
Então, o modal foi minha primeira opção, mas as vezes são muitos itens e o scroll do modal não descia até o último.

4

Bom, primeiro o certo seria ter uma TD dentro da TR com o target da datatable. Na função buscaItensComprador você criaria uma TR irmã da TR clicada, coloca o target ali e então manda exibir. Quanto a remover a TR extra antes de prosseguir é por que o Fluig processa a “Pai x Filho” quando submete o formulário e talvez ter essa TR nela só pra exibir outros dados pode influenciar nesse processamento e desconfigurar os itens. Mas nunca tentei isso pra saber como prosseguir corretamente. Mas pra exibir novos detalhes teria que remover a TR ou mudar o ID do target (IDs não podem ser repetidos).

5

Entendi. Eu queria fazer algo tipo desse tópico Tabela Pai Filho dentro de outra tabela Pai Filho, mas sem sucesso, não exibiu o datatable.

6

coloquei um exemplo de como inserir a TR após a linha onde clicou pra ver os detalhes. Não testei no Fluig por estar sem acesso a ele nesse momento.

7

Obrigada, dessa forma funcionou, mas agora querem isso de forma automática, sem clique no botão. Utilizei o each para percorrer, mas dessa forma ele exibe apenas os itens do último comprador. Tem como startar sem sobrescrever os dados?


$("input[id^='nm_cod_comprador___']").each(function (index, value) {})
8

tenta com o novo exemplo que inseri na resposta. Lembrando só que terá que adaptar a configuração da dataTable pra usar a targetId

9

Desculpe, acabei não vendo a sua resposta. Dessa forma automática não funcionou, os datatables não são carregados.

10

Funcionou alterando a tr. Obrigada.


 var tr = $(input).closest("tr");
 tr.after('<tr id="wrapper"><td colspan="4"><div id="' + targetId + '"></div></td></tr>');