A criar uma tabela de Acordeões com 'Bootstrap'
Tenho uma tabela que é povoada a partir de uma base de dados que tem muitas colunas (cerca de 30). Uma solução que alguém pensou foi criar um acordeão fora da mesa, onde cada linha é clicável e acordeão para baixo com o resto das colunas de informação. Estou a ter dificuldade em arranjar Presilha para fazer isto como deve ser.
<table class="table table-hover">
<thead>
<th></th><th></th><th></th>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#accordion" class="clickable">
<td>Some Stuff</td>
<td>Some more stuff</td>
<td>And some more</td>
</tr>
<tr>
<td>
<div id="accordion" class="collapse">Hidden by default</div>
</td>
</tr>
</tbody>
</table>
Como pode ver no jsfiddle, esta funcionalidade não está a funcionar. Não sei bem o que se passa e os documentos do Bootstrap não entres em muitos detalhes ao entrar em colapso.
Qualquer ajuda seria muito apreciada, obrigado!4 answers
Isto parece já ter sido perguntado antes:
Isto pode ajudar.Twitter Bootstrap usar colapso.js nas células da tabela [quase pronto]
Actualização:
O teu violino não estava a carregar o jQuery, por isso, tudo funcionou.<table class="table table-hover">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#accordion" class="clickable">
<td>Some Stuff</td>
<td>Some more stuff</td>
<td>And some more</td>
</tr>
<tr>
<td colspan="3">
<div id="accordion" class="collapse">Hidden by default</div>
</td>
</tr>
</tbody>
</table>
Tenta este.:
http://jsfiddle.net/Nb7wy/2/
Eu também adicionei colspan='2' à linha de detalhes. Mas é essencialmente o seu violino com jQuery carregado (em frameworks na coluna da esquerda)
Para qualquer pessoa que tenha vindo aqui à procura de como obter o verdadeiro efeito de acordeão e permitir que apenas uma linha seja expandida de cada vez, você pode adicionar um manipulador de eventos para o show.bs. colapse como assim:
$('.collapse').on('show.bs.collapse', function () {
$('.collapse.in').collapse('hide');
});
Modifiquei Este exemplo para o fazer aqui: http://jsfiddle.net/QLfMU/116/
Na resposta aceite, obtém-se um espaçamento irritante entre as linhas visíveis quando a linha expansível está escondida. Você pode se livrar disso adicionando isso ao css:
.collapse-row.collapsed + tr {
display: none;
}
' + ' é o selector de irmãos adjacente , por isso, se quiser que a sua linha expansível seja a próxima linha, isto selecciona o seguinte tr a seguir ao tr chamado filter-row.
Aqui está actualizado fiddle: http://jsfiddle.net/Nb7wy/2372/
<div class="panel">
<table class="table table-hover">
<thead>
<th><img src="/img/gb.svg" height="12" align="top"> Engleski jezik </th><th> <i class="fa fa-spinner" aria-hidden="true"></i> Sati</th><th><i class="fa fa-hourglass-start" aria-hidden="true"></i> 60 min.</th><th> <i class="fa fa-credit-card" aria-hidden="true"></i> Jednokratno</th>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#accordion" class="clickable">
<td>Engleski jezik A1 (početni)</td>
<td>30</td>
<td>60 min.</td>
<td>2200 KN</td>
</tr>
<tr>
<td colspan="4">
<div id="accordion" class="collapse"><i class="fa fa-calendar" aria-hidden="true"></i> <b>Trajanje:</b> 30 sati<br><i class="fa fa-clock-o" aria-hidden="true"></i> <b>Trajanje sata:</b> 60 minuta<br><i class="fa fa-calendar-check-o" aria-hidden="true"></i> <b>Termini: </b>Po dogovoru<br><i class="fa fa-credit-card" aria-hidden="true"></i> <b>Cijena sata: </b>80 KN<br><i class="fa fa-book" aria-hidden="true"></i> <b>Osnovna literatura: </b>English File: Elementary: Student's Book<br><br>