Tabela Pai Filho dentro de outra tabela Pai Filho

Olá,

Pretendemos desenvolver um fluxo no Fluig para que os colaboradores apontem se as ligações que fizeram foram particulares ou corporativas.

A ideia é exibir as ligações em uma tabela consolidando os números e, caso o colaborador precisar de mais detalhes, possibilitar o drill down.

O resultado esperado assemelha-se a isto:

Capturar.PNG

Para atender esta demanda havia pensado em utilizar uma tabela Pai x Filho dentro de outra, mas não tive sucesso em meus testes.

Alguém sabe se é possível ou tem alguma outra sugestão?

Obrigado,

Gustavo.

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

Atualmente não há suporte há pai x filho x neto no fluig. Se precisas fazer isso terás que ter dois pai x filho separados e manipular a exibição deles.

Após várias tentativas consegui chegar no resultado esperado.

Troquei o ícone da lixeira por uma interrogação e customizei o evento de delete da tabela (ao invés de chamar o método fnWdkRemoveChild() é exibida uma DIV com os detalhes das ligações).

Apont1 (Copy).png


<table tablename="ligacoes" nodeletebutton="false" customFnDelete="detalhesLigacao(this)" id="ligacoes" noaddbutton="true" class="table table-condensed ">
    <thead>
        <tr>        
            <td style="vertical-align: middle;" align="center" class="col-sm-11">
                <div class="form-group hidden-xs">
                    <label class="col-sm-2 text-center">Número</label>                                        
                    <label class="col-sm-2 text-center">Valor</label>
                    <label class="col-sm-1 text-center">Ligação Corporativa</label>
                    <label class="col-sm-3 text-center">Empresa</label>
                    <label class="col-sm-3 text-center">Nome Contato</label>                                    
                </div>                                                                
            </td>                                
        </tr>
    </thead>
    <tbody>
        <tr class="ligacoes">                                
            <td style="vertical-align: middle;" align="center" class="col-sm-11">
                <div class="form-group">
                    <div class="col-sm-2">
                        <div class="visible-xs"><b>Número</b></div>
                        <input type="text" class="form-control" name="numeroTelefone" id="numeroTelefone" readonly="readonly" tabindex="-1" style="text-align:center"/>
                    </div>                        
                    <div class="col-sm-2">
                        <div class="visible-xs"><b>Valor</b></div>
                        <input type="text" class="form-control" name="valorLigacoes" id="valorLigacoes" readonly="readonly" tabindex="-1" style="text-align:center"/>
                    </div>
                    <div class="col-sm-1">
                        <div class="visible-xs"><b>Ligação Corporativa</b></div>
                        <input type="checkbox" class="form-control" name="ligacaoCorporativa" id="ligacaoCorporativa" data-on-text="Sim" data-off-text="Não" data-size="small" onChange="habilitaContato(this)"/>
                    </div>
                    <div class="col-sm-3">
                        <div class="visible-xs"><b>Empresa</b></div>
                        <input type="text" class="form-control" name="empresaContato" id="empresaContato"/>
                    </div>
                    <div class="col-sm-3">
                        <div class="visible-xs"><b>Nome Contato</b></div>
                        <input type="text" class="form-control" name="nomeContato" id="nomeContato"/>
                    </div>
                </div>
                <div class="form-group detalhe" style="display:none">
                    <input type="hidden" name="numInterno" id="numInterno"/>
                    <div class="col-sm-11">
                        <div class="panel panel-primary">                            
                            <div class="panel-body"></div>                        
                        </div>                        
                    </div>
                </div>                                                                    
            </td>
        </tr>
    </tbody>                            
</table>

function detalhesLigacao(oElement)
{
    var row    = null;
    var hasRow = false;

    while (oElement != null) 
    {
        if (oElement.id != null) 
        {            
            if (!hasRow && oElement.nodeName.toUpperCase() == "TR") 
            {
                row = oElement;
                hasRow = true
            }            
        }
        oElement = oElement.parentNode
    }    

    var arrayInput  = $(row).find("input");
    var arrayDiv    = $(row).find("div");
    var elementID, elementClass, elementDIV;

    $.each(arrayDiv, function(index, div) 
    {
        elementClass = $(div).attr("class");        

        if (elementClass == "panel-body")
        {            
            elementDIV = div;                                    
        }
    });

    $.each(arrayInput, function(index, input) 
    {
        elementID = $(input).attr("id");        

        if (elementID.indexOf('numInterno') == 0)
        {            
            if (elementDIV.innerHTML == "")
            {                
                carregaDetalhes(elementDIV, input);                
            }            
            $("#" + elementID).parent().toggle('slow','linear');            
        }
    });
}

function carregaDetalhes(objDIV, objINPUT)
{     
    var conteudo   = objINPUT.value.split(';');

    var mesReferencia = $("#mesReferencia").val();
    var anoReferencia = $("#anoReferencia").val();
    var dddOrigem     = $("#dddOrigem").val();
    var numOrigem     = $("#numOrigem").val();
    var dddDestino    = conteudo[0];
    var numDestino    = conteudo[1];
    var html          = "<table class='table table-condensed'>";

    try 
    {
        var conVetor = new Array();
        conVetor[0] = DatasetFactory.createConstraint("mesReferencia", mesReferencia, mesReferencia, ConstraintType.MUST);
        conVetor[1] = DatasetFactory.createConstraint("anoReferencia", anoReferencia, anoReferencia, ConstraintType.MUST);
        conVetor[2] = DatasetFactory.createConstraint("dddOrigem"    , dddOrigem    , dddOrigem    , ConstraintType.MUST);
        conVetor[3] = DatasetFactory.createConstraint("numOrigem"    , numOrigem    , numOrigem    , ConstraintType.MUST);
        conVetor[4] = DatasetFactory.createConstraint("dddDestino"   , dddDestino   , dddDestino   , ConstraintType.MUST);
        conVetor[5] = DatasetFactory.createConstraint("numDestino"   , numDestino   , numDestino   , ConstraintType.MUST);        

        var resVetor = DatasetFactory.getDataset("al_detalhe_ligacao", null, conVetor, null);

        if (resVetor.values.length > 0)
        {            

            html += "  <thead>";
            html += "    <tr>";
            html += "      <th>Categoria</th>";
            html += "      <th>Descrição</th>";
            html += "      <th>Data</th>";
            html += "      <th>Hora</th>";
            html += "      <th>Duração</th>";
            html += "      <th>Valor</th>";
            html += "    </tr>";
            html += "  </thead>";
            html += "  <tbody>";

        }        
        for (var i=0; i<resVetor.values.length; i++)
        {            
            html += "    <tr>";
            html += "      <td>" + resVetor.values[i]['cod_categoria'] + "</td>";
            html += "      <td>" + resVetor.values[i]['categoria'] + "</td>";
            html += "      <td>" + resVetor.values[i]['data_ligacao'] + "</td>";
            html += "      <td>" + resVetor.values[i]['hr_ligacao'] + "</td>";
            html += "      <td>" + resVetor.values[i]['duracao'] + " min</td>";
            html += "      <td>" + resVetor.values[i]['vlr_ligacao'] + "</td>";
            html += "    </tr>";
        }
    }
    catch(erro)
    {
        html += "<tr><td>Não foi possível carregar as ligações feitas para o número (" + dddDestino + ") " + numDestino + "</td></tr>";
        html += "<tr><td>" + erro + "</td></tr>";        
    }    
    html += "  </tbody>";
    html += "</table>";    

    objDIV.innerHTML = html;    
}

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

No caso ele conseguiu guardar as informações desse pai-filho dentro do pai-filho principal? ou foi apenas campos de visualização?

Gustavo tem como colocar o código da função (detalhesLigacao) ?

Boa tarde @Gustavo, tem como postar o código da detalhesLigacao()?

Desculpe pelo pequeno atraso (de alguns anos, rs), não fui notificado e entrei ao acaso neste tópico. Adicionei as funções, espero que ajude.

Ao invés de remover e customizar a função da lixeira não seria possível colocar um icone novo na tela e fazer uma função específica para ele ?

A solução desenvolvida pode causar problemas para o cliente no futuro. Se a forma como a lixeira é posta e executada nos "Pai filhos" mudar esse formulário vai parar de funcionar.

Sim, você tem razão, com o conhecimento que tínhamos na época foi isso que conseguimos fazer, rs. A parte boa é que está funcionando até hoje :slight_smile: