Excelente site com dicas simples e diretas de como usar (e criar) com janelas modais no Bootstrap.
Inclui exemplos de modal sobre modal, modal em posições diferentes, com barra de rolagem, entre outras.
O problema é o seguinte:
Temos uma tabela com dados de pedidos, preenchida dinamicamente com AJAX/PHP/MySQL.
Até aí ok, porém, para facilitar a visualização, pretendemos colorir a linha (cada linha representa um pedido) conforme o valor da célula que contém a informação de estatus do pedido.
Antes da função jQuery, temos:
function colore_tabela() { /* * TEMOS 8 Status possíveis, com sua cores respectivas: * 1-salva; branca * 2-aguardando validação; azul * 3-não validada; amarelo * 4-aguardando aprovação; azul * 5-aprovada; verde * 6-não aprovada; amarelo * 7-cancelada; vermelho * 8-concluida; verde */ $('#t_dados').find('tr').each(function(indice){ switch($(this).children().eq(0).text()) { case 'aguardando validação': case 'aguardando aprovação': $(this).prop('class','info'); break; case 'não validada': case 'não aprovada': $(this).prop('class','warning'); break; case 'aprovada': case 'concluida': $(this).prop('class','success'); break; case 'cancelada': $(this).prop('class','danger'); break; }; }); } |
Foram usadas as classes do Bootstrap 3.0 para tebelas: http://getbootstrap.com/css/#tables-contextual-classes
Após:
Visualização melhorada, com poucos comandos e processamento client-side, certamente uma boa pedida.
Neste caso específico, criamos uma função isolada que é chamada depois da execução do AJAX, porém, caso sua tabela já venha preenchida, podes chamá-la logo ao carregar a página, com esta sugestão (ou mesmo através de função anônima):
$( document ).ready(function(){ colore_tabela(); }); |
Para entender um pouco mais:
Usamos a função .each() para percorrer cada linha da tabela, em seguida, selecionamos com children(), seguido de eq(0) o texto da primeira célula, logo, se quiser alterar qual célula será testada, basta alterar o índice, onde 0 representa a primeira coluna, 1 a segunda e assim por diante.
Até a próxima.