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

yiyan • • 问答 • 272 阅读

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>
<thead>
    <tr>
        <th>#</th>
        <th>Date</th>
        <th>Description</th>
        <th>Credit</th>
        <th>Debit</th>
        <th>Balance</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>05 May 2013</td>
        <td>Credit Account</td>
        <td>$150.00</td>
        <td></td>
        <td>$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>
            <td>1</td>
            <td>05 May 2013</td>
            <td>Credit Account</td>
            <td>$150.00</td>
            <td></td>
            <td>$150.00</td>
             <tr>
                    <td>1</td>
                    <td>05 May 2013</td>
                    <td>Credit Account</td>
                    <td>$150.00</td>
                    <td></td>
                    <td>$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>
    <td>1</td>
    <td>05 May 2013</td>
    <td>Credit Account</td>
    <td>$150.00</td>
    <td></td>
    <td>$150.00</td>
</tr>

<tr>
    <td colspan="6">
        Demo1
    </td>
</tr>

相关讨论

  • 折叠时如何删除双边框？
  • 添加 .hiddenRow {padding: 0 !important;}
  • 但是我想知道如何维护这些列。在示例中，只有一个跨栏可用。
  • 数据目标实际上采用了一个 css 选择器，因此您可以使用一个类并使每一列都具有该类，而不是使用一个 id，这是一个示例：jsfiddle.net/whytheday/QLfMU/1。不同之处在于每一列都有一个带有类 demo1 的 div，并且父行上的数据目标现在是 ".demo1" 而不是 "#demo1"。如果你把它弄乱了，我相信你可以想出一个比我的例子更干净的解决方案。
  • 是否可以使行可排序，以便附加的 DemoX 仍留在正确的行？
  • 不错，但如何制作手风琴风格(一次只能展开一个)
  • @isherwood，如果隐藏行中有多个 <td> ，我将如何调整它？谢谢！
  • 这不是我的答案，但请考虑在折叠 div 中使用嵌套表。
  • 有谁知道如何应用上述内容来显示来自Flask sqlalchemy 占位符的动态内容，其中每一行的可折叠内容从数据库返回数据而不是示例中的静态数据？我在这里发布了我的问题：stackoverflow.com/questions/53317916/...

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

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

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

相关讨论

  • 如何折叠一行，当另一行单击时，前一行将取消折叠？
  • 快速单击两个表格行可以让您同时打开两个手风琴窗格，知道如何停止它吗？
  • 完美，只有一个问题，行(可折叠数据)边框使它看起来很难看，任何让它消失的方法

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

要在 ng-repeat 渲染后触发事件，请尝试以下指令：

1
2
3
4
5
6
7
8
9
10
11
12
13
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');
            });
        }
    }
}
});

angular的完整示例：
http://jsfiddle.net/ADukg/6880/

我从这里得到指令：
仅将 AngularJS 用于路由目的

以上是关于 jquery：Twitter Bootstrap 在表格单元格上使用 collapse.js [几乎完成]的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>