Question

我正在制作一个列出交易（点数和借方）的帐户页面。我希望用户能够点击表格行并展开更多信息。

我正在使用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">$150.00</td>
        <td class="text-error"></td>
        <td class="text-success">$150.00</td>
        <div id="demo1" class="demo out collapse">Demo1</div>
    </tr>

请参阅： http://jsfiddle.net/2Dj7Y/

唯一的问题是它在错误的地方显示“下拉信息”，我想添加一个新行，而不是在表格的顶部打印

我还尝试添加一个新的表行（只显示行，没有崩溃操作（仅适用于第一行）

 <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/

干杯，谢谢你的帮助

Answer 1

我不确定你是否已经过了这个，但是今天我必须做一些非常相似的事情，并且让你的小提琴像你要问的那样工作，基本上我做的就是在它下面做另一个表行，然后使用手风琴控制。我尝试使用只是崩溃，但无法使其工作，并在SO上看到一个使用手风琴的例子。

这是你的更新小提琴： http://jsfiddle.net/whytheday/2Dj7Y/11/

因为我需要在这里发布代码，每个可折叠的“部分”应该是什么样的 - ＆gt;

<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>
    <td colspan="6" class="hiddenRow">
        <div class="accordion-body collapse" id="demo1">Demo1</div>
    </td>
</tr>

Answer 2

扩展Tony的answer，并回答Dhaval Ptl的question，以获得真正的手风琴效果，并且只允许一行扩展，可以像这样添加show.bs.collapse的事件处理程序：

$('.collapse').on('show.bs.collapse', function () {
    $('.collapse.in').collapse('hide');
});

我在这里修改了他的例子：http://jsfiddle.net/QLfMU/116/

Answer 3

如果你正在使用Angular的ng-repeat来填充表hackel的jquery片段将无法通过将其置于文档加载事件中来工作。在角度渲染完表格后，您需要运行代码段。

要在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');
            });
        }
    }
}
});

有角度的完整示例： http://jsfiddle.net/ADukg/6880/

我从这里得到了指令： Use AngularJS just for routing purposes

Twitter Bootstrap在表格单元格上使用collapse.js [几乎完成]

3 个答案: