Twitter Bootstrap Use collapse.js on table cells [Almost Done]
我正在创建一个列出交易(贷方和借方)的账户页面。
我希望用户能够单击表格行并展开显示更多信息。
我正在使用 twitter bootstrap 并查看了文档，这是我得到的结果
|
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<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">$150.00</td> <td class="text-error"></td> <td class="text-success">$150.00</td> Demo1 </tr> |
见：
http://jsfiddle.net/2Dj7Y/
唯一的问题是它在错误的位置显示”下拉信息”，我想添加一个新行，而不是在表格顶部打印
我也尝试添加一个新的表格行(仅显示该行，并且没有折叠操作(仅适用于第一行)
|
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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">$150.00</td> <td class="text-error"></td> <td class="text-success">$150.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">$150.00</td> <td class="text-error"></td> <td class="text-success">$150.00</td> </tr> </tr> |
见 http://jsfiddle.net/ypuEj/
干杯，感谢您的帮助
我不确定你是否已经通过了这个，但是我今天必须做一些非常相似的事情，我让你的小提琴按照你的要求工作，基本上我所做的就是在它下面创建另一个表格行，然后使用手风琴控制。我尝试使用 just collapse 但无法使其正常工作，并在 SO 的某个地方看到了一个使用手风琴的示例。
这是你更新的小提琴：
http://jsfiddle.net/whytheday/2Dj7Y/11/
因为我需要在这里发布代码，所以每个可折叠”部分”应该是这样的 ->
|
1
2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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">$150.00</td> <td class="text-error"></td> <td class="text-success">$150.00</td> </tr> <tr> |
扩展 Tony 的答案，并回答 Dhaval Ptl 的问题，以获得真正的手风琴效果并且一次只允许展开一行，可以像这样添加 show.bs.collapse 的事件处理程序： 我在这里修改了他的示例：http://jsfiddle.net/QLfMU/116/ 如果您使用 Angular 的 ng-repeat 来填充表格，则 hackel 的 jquery 片段将无法通过将其置于文档加载事件中来工作。在 Angular 完成表格的渲染后，您需要运行该代码段。 要在 ng-repeat 渲染后触发事件，请尝试以下指令： angular的完整示例：
2
3
$(‘.collapse.in’).collapse(‘hide’);
});
2
3
4
5
6
7
8
9
10
11
12
13
.directive(‘onFinishRender’, function ($timeout) {
return {
restrict: ‘A’,
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$emit(‘ngRepeatFinished’);
});
}
}
}
});
http://jsfiddle.net/ADukg/6880/
我从这里得到指令：
仅将 AngularJS 用于路由目的
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/268733.html