Tabela Pai x Filho - Fixar cabeçalho

TOTVS Fluig Páginas (WCM)
, ,
1

Bom dia, preciso fixar o cabeçalho da tabela pai x filho, de maneira que o cabeçalho com as descrições das colunas fique fixo, conforme o exemplo aqui:

http://mkoryak.github.io/floatThead/#download

Existe algo padrão ou devo implementar este plugin mesmo?

2

@William você pode estar usando a biblioteca Jquery Datatable. Será necessário baixar somente os módulos que você precisa e colocar na sua tabala.

Dentro de outras opções de customização, para o fixedHeader é assim que você irá utilizar.


$("body", document.parent).addClass("fluig-style-guide");

var table = $('#example').DataTable( {
    fixedHeader: {
        header: true
    }
} ).draw();
//96px é a altura do cabelho do Fluig do tema snowflake. Se tiver usando a versão classica precisa medir;
    table.fixedHeader.headerOffset(96);

Jquery Datatable

Abraço;

3

@Marcos
Eu uso esse datatables nos meus projetos em PHP e em algumas widgets e funcionam certinho.
Mas pra usar isso no formulário de um processo em uma tabela pai x filho, não está dando certo.
Não fixa o cabeçalho por exemplo. e também se clicar em uma das colunas, o formulário se perde e some todas as linhas.
Você já usou isso e tem exemplo disso funcionando?

4

@William, eu percebi que o problema está relacionado onde a biblioteca coloca a tabela que servirá de cabeçalho. A saída foi no ready do jquery adicionar a classe fluig-style no body do document.parent, pois assim ele pega todas as propriedades do bootstrap e respeita o tamanho das colunas.
Outra coisa que não pode se esquecer é que o Fluig tem o cabeçalho, então você tem usar o headerOffset() para tirar a diferença do cabeçalho. Vou editar o código acima para facilitar como finz

5

@Marcos
Ainda assim não dá certo, continua “bugando” a tabela toda =/ No meu fluig não funciona de jeito nenhum aqui