Estilo tabela pai e filho

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

Pessoal,

Alguém tem alguma dica de como melhorar a aparência dessa tabela pai e filho? Como cada filho tem muitos campos a aparência dos checkbox e dos botõs de anexo não ficou boa. Teria alguma forma de quebrar em duas linhas ou alinhar os checkbox e colocar um botão abaixo do outros?

Capturar.PNG

Meu código está da seguinte forma:


<div class="row">
                                            <table tablename="tabelaCotacoes" class="table" noaddbutton=false id="tabelaCotacoes">
                                                <thead>
                                                    <tr>
                                                        <td align="center"><b>Selecionar</b></td>
                                                        <td align="center"><b>Fornecedor</b></td>
                                                        <td align="center"><b>CNPJ</b></td>
                                                        <td align="center"><b>Produto/Serviço</b></td>
                                                        <td align="center"><b>Valor (R$)</b></td>
                                                        <td align="center"><b>Valor total (R$)</b></td>
                                                        <td align="center"><b>Critério para escolha</b></td>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td style="vertical-align:up;"><input class="form-field" type="checkbox" name="selecionar" id="dataDespesa" style="width:20px;height:20px;"></td>
                                                        <td style="vertical-align:up;"><input class="form-control" type="text" name="fornecedor" id="fornecedor" ></td>
                                                        <td style="vertical-align:up;"><input class="form-control" type="text" name="cnpj" id="cnpj" mask="00.000.000/0000-00"></td>
                                                        <td style="vertical-align:up;"><input class="form-control" type="text" name="produto" id="produto"></td>
                                                        <td style="vertical-align:up;"><input class="form-control valor" type="text" name="valor" id="valor"  mask="#00.000.000.000.000,00"></td>
                                                        <td style="vertical-align:up;"><input class="form-control valor" type="text" name="valorTotal" id="valorTotal"  mask="#00.000.000.000.000,00"></td>        
                                                        <td style="vertical-align:up;"> <input class="form-field" type="checkbox" name="preco" id="preco" style="width:20px;height:20px;"><label> Menor Preço</label><br>
                                                                                        <input class="form-field" type="checkbox" name="qualidade" id="qualidade" style="width:20px;height:20px;"><label> Melhor qualidade</label><br>
                                                                                        <input class="form-field" type="checkbox" name="prazo" id="prazo" style="width:20px;height:20px;"><label> Melhor prazo de entrega</label><br>
                                                                                        <input class="form-field" type="checkbox" name="flexibilidade" id="flexibilidade" style="width:20px;height:20px;"><label> Flexibilidade nas negociações</label></td>
                                                        <td style="vertical-align:up;" align="center"><button type="button" class="btn btn-primary" name="anexoComprovante" id="anexoComprovante" onclick="showCamera(this.id);"><span class="fluigicon fluigicon-paperclip fluigicon-xs"></span> Anexar<br>Cotação  <button type="button" class="btn btn-primary" name="anexoContrato" id="anexoContrato" onclick="showCamera(this.id);"><span class="fluigicon fluigicon-paperclip fluigicon-xs"></span> Anexar<br>Contrato</td>
                                                        <td style="vertical-align:up;" align="center"></td>                                                
                                                    </tr>
                                                </tbody>
                                            </table>                                            
                                        </div>

Após a solução encontrada o código ficou da seguinte forma:


                                        <div class="row">
                                            <table tablename="tabelaCotacoes" class="table" noaddbutton=false id="tabelaCotacoes">
                                                <thead>
                                                    <tr>
                                                        <th>
                                                            <div class="row">
                                                                <div class="form-group col-md-2 col-xs-4">
                                                                    Selecionar
                                                                </div>
                                                                <div class="form-group col-md-2 col-xs-4">
                                                                    Fornecedor
                                                                </div>
                                                                <div class="form-group col-md-2 col-xs-4">
                                                                    CNPJ
                                                                </div>
                                                                <div class="form-group col-md-2 col-xs-4">
                                                                    Produto/Serviço
                                                                </div>
                                                                <div class="form-group col-md-2 col-xs-4">
                                                                    Valor (R$)
                                                                </div>
                                                                <div class="form-group col-md-2 col-xs-4">
                                                                    Valor total (R$)
                                                                </div>
                                                            </div>
                                                        </th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td style="vertical-align:middle;">

                                                            <div class="row">
                                                                <div class="form-group col-xs-4 col-sm-4 col-md-2 col-lg-2">
                                                                    <input class="form-field" type="checkbox" name="selecionar" id="dataDespesa" style="width:20px;height:20px;">
                                                                </div>
                                                                <div class="form-group col-xs-4 col-sm-4 col-md-2 col-lg-2">
                                                                    <input class="form-control" type="text" name="fornecedor" id="fornecedor" >
                                                                </div>
                                                                <div class="form-group col-xs-4 col-sm-4 col-md-2 col-lg-2">
                                                                    <input class="form-control" type="text" name="cnpj" id="cnpj" mask="00.000.000/0000-00">
                                                                </div>
                                                                <div class="form-group col-xs-4 col-sm-4 col-md-2 col-lg-2">
                                                                    <input class="form-control" type="text" name="produto" id="produto">
                                                                </div>
                                                                <div class="form-group col-xs-4 col-sm-4 col-md-2 col-lg-2">
                                                                    <input class="form-control valor" type="text" name="valor" id="valor"  mask="#00.000.000.000.000,00">
                                                                </div>
                                                                <div class="form-group col-xs-4 col-sm-4 col-md-2 col-lg-2">
                                                                    <input class="form-control valor" type="text" name="valorTotal" id="valorTotal"  mask="#00.000.000.000.000,00">
                                                                </div>
                                                            </div>

                                                            <div class="row">
                                                                <div class="form-group col-xs-4 col-sm-4 col-md-2 col-lg-2">,
                                                                </div>
                                                                <div class="form-group col-xs-8 col-sm-8 col-md-4 col-lg-4">
                                                                    <label>Critérios para escolha:</label><br>
                                                                    <input class="form-field" type="checkbox" name="preco" id="preco" style="width:20px;height:20px;"><label style="vertical-align: middle;">Menor Preço</label><br>
                                                                    <input class="form-field" type="checkbox" name="qualidade" id="qualidade" style="width:20px;height:20px;"><label style="vertical-align: middle;">Melhor qualidade</label><br>
                                                                    <input class="form-field" type="checkbox" name="prazo" id="prazo" style="width:20px;height:20px;"><label style="vertical-align: baseline;">Melhor prazo de entrega</label><br>
                                                                    <input class="form-field" type="checkbox" name="flexibilidade" id="flexibilidade" style="width:20px;height:20px;"><label style="vertical-align: baseline;">Flexibilidade nas negociações</label>
                                                                </div>
                                                                <div class="form-group col-xs-8 col-sm-8 col-md-4 col-lg-4" style="vertical-align: middle;">
                                                                    <div class="row">
                                                                        <button type="button" class="btn btn-primary" name="anexoComprovante" id="anexoComprovante" onclick="showCamera(this.id);"><span class="fluigicon fluigicon-paperclip fluigicon-xs"></span> Anexar Cotação  </button>
                                                                    </div>
                                                                    <br>
                                                                    <div class="row">
                                                                        <button type="button" class="btn btn-primary" name="anexoContrato" id="anexoContrato" onclick="showCamera(this.id);"><span class="fluigicon fluigicon-paperclip fluigicon-xs"></span> Anexar Contrato </button>
                                                                    </div> 
                                                                </div>
                                                            </div>
                                                        </td>                                                
                                                    </tr>
                                                </tbody>
                                            </table>                                            
                                        </div>

Agradeço a atenção,

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

1 curtida
2

Boa Noite Pedro,

Poderia postar o seu código fonte, para que possamos analisar a estrutura do seu código HTML e assim ajudá-lo de forma mais efetiva na solução que deseja.

Abraço.

3

Adicionei o código @Rodrigo! Abraço,

4

Caro(a), Você pode usar botões de deletar personalizado com as classes do style guide btn btn-success, você pode criar funções personalizadas de adicionar linhas e contar linhas. e colocar seu botão de forma alinhada a direita da tabela para ficar esteticamente melhor.



<button id="delrow" onClick="deRow()" class="btn btn-class"><span class="classe dos icones do style guide></span></button>

//Deleta filhos da tabela
function delRow(Objeto){
            fnWdkRemoveChild(Objeto);
        }

function addLinhaTabela(tabela) {

            if($("#" + tabela + " tr").length <= 6) index=wdkAddChild(tabela); 
            document.getElementById('txtItemId___'+index).value = index ;

        }

        //Limita o tamanho do campo.
        function contaItens(tabela) {

            if($("#" + tabela + " tr").length == 6) {
                  FLUIGC.toast({
                        title: 'Mensagem: ',
                        message: 'Só é permitido a inclusão de 5 linhas',
                        type: 'warning'
                    });
            }
        }
5

Bom dia @Italo, O meu problema maior não está no número de linhas. O problema é que eu preciso de muitas colunas na tabela e isso acaba prejudicando seu visual. Agradeço a atenção.

6

@Italo, tenho uma tabela com nome “itens”, fiz a função function contaItens(itens) { if($("#" + itens + " tr").length == 2) { displaymodal("Só é permitido a inclusão de 2(dois) itens"); } }
Porém não funcionou, está sempre me retornando indice 0

7

index=wdkAddChild(tabela); você tem que referenciar o indice da tabela pai x filho usando a função wdkAddchild

8

Assim deu certo obg. Só outro dúvida, por exemplo se eu excluo a linha(2) e adiciono outra linha fica sendo a linha(3), porém só tenho duas linhas na tabela. Tenho como atualizar o index qndo excluo uma linha?

9

tem sim você precisa realizar um laço de repetição para renomear os índices com base nos itens atuais após remover, coloque essa ação na remoção.

10

você tem um exemplo Ítalo?

11

Segue um exemplo de como voce pode fazer com o jquery

var contador = 0;
$( “.classeDaLinha” ).each(function() {
$(this).find(“#Laudo_ExameID”).prop(“name”, “Laudo[”+contador+“].ExameID”);
$(this).find(“#Laudo_TipoExameID”).prop(“name”, “Laudo[”+contador+“].TipoExameID”);
$(this).find(“#ListLaudo_Nome”).prop(“name”, “ListLaudo[”+contador+“].Nome”);
contador++;
});

12

@Pedro,

Você pode criar somente 1 e estruturar dentro dele os campos.

Segue um exemplo:


<div class="row">
    <table tablename="tabelaCotacoes" class="table" noaddbutton=false id="tabelaCotacoes">
        <thead>
            <tr>
                <th>
                    <div class="row">
                        <div class="form-group col-xs-12 col-sm-12 col-md-3 col-lg-3">
                            Selecionar
                        </div>
                        <div class="form-group col-xs-12 col-sm-12 col-md-9 col-lg-9">
                            Fornecedor
                        </div>
                    </div>

                    <div class="row">
                        <div class="form-group col-xs-12 col-sm-12 col-md-3 col-lg-3">
                            CNPJ
                        </div>
                        <div class="form-group col-xs-12 col-sm-12 col-md-9 col-lg-9">
                            Produto/Serviço
                        </div>
                    </div>

                    <div class="row">
                        <div class="form-group col-xs-12 col-sm-12 col-md-3 col-lg-3">
                            Valor (R$)
                        </div>
                        <div class="form-group col-xs-12 col-sm-12 col-md-9 col-lg-9">
                            Valor total (R$)
                        </div>
                    </div>

                    <div class="row">
                        <div class="form-group col-xs-12 col-sm-12 col-md-3 col-lg-3">
                            Critério para escolha
                        </div>
                    </div>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="vertical-align:up;">

                    <div class="row">
                        <div class="form-group col-xs-12 col-sm-12 col-md-3 col-lg-3">
                            <input class="form-field" type="checkbox" name="selecionar" id="dataDespesa" style="width:20px;height:20px;">
                        </div>
                        <div class="form-group col-xs-12 col-sm-12 col-md-9 col-lg-9">
                            <input class="form-control" type="text" name="fornecedor" id="fornecedor" >
                        </div>
                    </div>

                    <div class="row">
                        <div class="form-group col-xs-12 col-sm-12 col-md-3 col-lg-3">
                            <input class="form-control" type="text" name="cnpj" id="cnpj" mask="00.000.000/0000-00">
                        </div>
                        <div class="form-group col-xs-12 col-sm-12 col-md-9 col-lg-9">
                            <input class="form-control" type="text" name="produto" id="produto">
                        </div>
                    </div>

                    <div class="row">
                        <div class="form-group col-xs-12 col-sm-12 col-md-3 col-lg-3">
                            <input class="form-control valor" type="text" name="valor" id="valor"  mask="#00.000.000.000.000,00">
                        </div>
                        <div class="form-group col-xs-12 col-sm-12 col-md-9 col-lg-9">
                            <input class="form-control valor" type="text" name="valorTotal" id="valorTotal"  mask="#00.000.000.000.000,00">
                        </div>
                    </div>

                    <div class="row">
                        <div class="form-group col-xs-12 col-sm-12 col-md-3 col-lg-3">
                            <input class="form-field" type="checkbox" name="preco" id="preco" style="width:20px;height:20px;"><label> Menor Preço</label><br>
                            <input class="form-field" type="checkbox" name="qualidade" id="qualidade" style="width:20px;height:20px;"><label> Melhor qualidade</label><br>
                            <input class="form-field" type="checkbox" name="prazo" id="prazo" style="width:20px;height:20px;"><label> Melhor prazo de entrega</label><br>
                            <input class="form-field" type="checkbox" name="flexibilidade" id="flexibilidade" style="width:20px;height:20px;"><label> Flexibilidade nas negociações</label>
                        </div>
                        <div class="form-group col-xs-12 col-sm-12 col-md-9 col-lg-9">
                            <button type="button" class="btn btn-primary" name="anexoComprovante" id="anexoComprovante" onclick="showCamera(this.id);"><span class="fluigicon fluigicon-paperclip fluigicon-xs"></span> Anexar<br>Cotação  <button type="button" class="btn btn-primary" name="anexoContrato" id="anexoContrato" onclick="showCamera(this.id);"><span class="fluigicon fluigicon-paperclip fluigicon-xs"></span> Anexar<br>Contrato
                        </div>
                    </div>

                </td>                                                
            </tr>
        </tbody>
    </table>                                            
</div>
13

Obrigado @Gabriel. Fiz utilizando apenas uma td porém fiz algumas alterações para melhor organização da tabela.

1 curtida