jQuery Twitter Bootstrap 在表格单元格上使用 collapse.js [几乎完成]
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16389775/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap Use collapse.js on table cells [Almost Done]
提问by JamesWatling
I am working on an accounts page that lists transactions (credits and debits). I would like the user to be able to click on a table row and it expands showing more information.
我正在处理列出交易（贷方和借方）的帐户页面。我希望用户能够单击表格行并展开显示更多信息。
I am using twitter bootstrap and have looked over the documentation and this is the result I have
我正在使用 twitter bootstrap 并查看了文档，这是我的结果
<table class="table table-striped" id="account-table">
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Description</th>
<th>Credit</th>
<th>Debit</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#demo1" data-parent="#account-table" class="">
<td>1</td>
<td>05 May 2013</td>
<td>Credit Account</td>
<td class="text-success">0.00</td>
<td class="text-error"></td>
<td class="text-success">0.00</td>
<div id="demo1" class="demo out collapse">Demo1</div>
</tr>
See: http://jsfiddle.net/2Dj7Y/
The only issue is that it displays the "dropdown information" in the wrong place, I would like to add in a new row, instead of printing at the top of the table
唯一的问题是它在错误的地方显示了“下拉信息”，我想添加一个新行，而不是在表格顶部打印
I have also tried adding in a new table row (which just displays the row, and no collapse action (only applied to first row)
我还尝试添加一个新的表格行（只显示该行，没有折叠操作（仅适用于第一行）
<tr data-toggle="collapse" data-target="#demo1" data-parent="#account-table" >
<td>1</td>
<td>05 May 2013</td>
<td>Credit Account</td>
<td class="text-success">0.00</td>
<td class="text-error"></td>
<td class="text-success">0.00</td>
<tr id="demo1" class="demo out collapse">
<td>1</td>
<td>05 May 2013</td>
<td>Credit Account</td>
<td class="text-success">0.00</td>
<td class="text-error"></td>
<td class="text-success">0.00</td>
</tr>
</tr>
See http://jsfiddle.net/ypuEj/
Cheers, and thanks for your help
干杯，感谢您的帮助
回答by Tony
I'm not sure you have gotten past this yet, but I had to work on something very similar today and I got your fiddle working like you are asking, basically what I did was make another table row under it, and then used the accordion control. I tried using just collapse but could not get it working and saw an example somewhere on SO that used accordion.
我不确定你是否已经解决了这个问题，但我今天必须做一些非常相似的事情，我让你的小提琴像你问的那样工作，基本上我所做的是在它下面再做一排桌子，然后使用手风琴控制。我尝试使用仅折叠但无法使其正常工作，并在 SO 某处看到了一个使用手风琴的示例。
Here's your updated fiddle: http://jsfiddle.net/whytheday/2Dj7Y/11/
这是您更新的小提琴：http: //jsfiddle.net/whytheday/2Dj7Y/11/
Since I need to post code here is what each collapsible "section" should look like ->
因为我需要在这里发布代码，所以每个可折叠的“部分”应该是什么样子 ->
<tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle">
<td>1</td>
<td>05 May 2013</td>
<td>Credit Account</td>
<td class="text-success">0.00</td>
<td class="text-error"></td>
<td class="text-success">0.00</td>
</tr>
<tr>
<td colspan="6" class="hiddenRow">
<div class="accordion-body collapse" id="demo1">Demo1</div>
</td>
</tr>
回答by hackel
Expanding on Tony's answer, and also answering Dhaval Ptl's question, to get the true accordion effect and only allow one row to be expanded at a time, an event handler for show.bs.collapse can be added like so:
扩展 Tony 的回答，并回答 Dhaval Ptl 的问题，为了获得真正的手风琴效果并且一次只允许展开一行，可以像这样添加 show.bs.collapse 的事件处理程序：
$('.collapse').on('show.bs.collapse', function () {
$('.collapse.in').collapse('hide');
});
I modified his example to do this here: http://jsfiddle.net/QLfMU/116/
我修改了他的例子来做到这一点：http: //jsfiddle.net/QLfMU/116/
回答by Subie
If you're using Angular's ng-repeat to populate the table hackel's jquery snippet will not work by placing it in the document load event. You'll need to run the snippet after angular has finished rendering the table.
如果您使用 Angular 的 ng-repeat 来填充表，hackel 的 jquery 片段将无法通过将其放置在文档加载事件中来工作。在 angular 完成表格渲染后，您需要运行代码片段。
To trigger an event after ng-repeat has rendered try this directive:
要在 ng-repeat 呈现后触发事件，请尝试以下指令：
var app = angular.module('myapp', [])
.directive('onFinishRender', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$emit('ngRepeatFinished');
});
}
}
}
});
Complete example in angular: http://jsfiddle.net/ADukg/6880/
完整的角度示例：http: //jsfiddle.net/ADukg/6880/
I got the directive from here: Use AngularJS just for routing purposes
我从这里得到指令： Use AngularJS just for routing purpose
