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

Posted

技术标签:

【中文标题】Twitter Bootstrap 在表格单元格上使用 collapse.js [几乎完成]【英文标题】:Twitter Bootstrap Use collapse.js on table cells [Almost Done] 【发布时间】:2013-04-29 16:17:40 【问题描述】:

我正在处理列出交易(贷记和借记)的帐户页面。 我希望用户能够点击表格行并展开显示更多信息。

我正在使用 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/

干杯,感谢您的帮助

【问题讨论】:

【参考方案1】:

我不确定你是否已经克服了这个问题,但我今天必须做一些非常相似的事情,我让你的小提琴按照你的要求工作,基本上我所做的就是在它下面创建另一个表格行,然后使用手风琴控制。我尝试使用 just collapse 但无法使其正常工作,并在 SO 上的某个地方看到了一个使用手风琴的示例。

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

因为我需要在这里发布代码,所以每个可折叠“部分”应该是这样的 ->

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

【讨论】:

双边框折叠时如何去掉? 添加.hiddenRow padding: 0 !important; 我想知道如何维护这些列。在示例中,只有一个跨栏可用。 数据目标实际上采用了一个 css 选择器,因此您可以使用一个类并让每一列都具有该类,而不是使用一个 id,这是一个示例:jsfiddle.net/whytheday/QLfMU/1。不同之处在于每列都有一个带有类 demo1 的 div,并且父行上的数据目标现在是“.demo1”而不是“#demo1”。如果你把它弄乱了,我相信你可以想出一个比我的例子更干净的解决方案。 是否可以使行可排序,以便附加的DemoX 仍留在正确的行?【参考方案2】:

在 Tony 的 answer 上展开,并回答 Dhaval Ptl 的 question,以获得真正的手风琴效果并且一次只允许展开一行,可以添加 show.bs.collapse 的事件处理程序,如所以:

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

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

【讨论】:

如何折叠一行,当点击另一行时,前面的行会解折叠? 快速点击两个表格行可以同时打开两个折叠窗格,知道如何停止吗? 完美,只需一个问题,行(可折叠数据)边框就让它看起来很丑,任何方法让它消失【参考方案3】:

如果您使用 Angular 的 ng-repeat 来填充表,则 hackel 的 jquery sn-p 将无法通过将其放置在文档加载事件中来工作。在 angular 完成表格渲染后,您需要运行 sn-p。

要在 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 [几乎完成]的主要内容,如果未能解决你的问题,请参考以下文章

对 Bootstrap 中的单元格使用表格行着色

为啥 Twitter Bootstrap 表格总是有 100% 的宽度?

如何在表格视图单元格上应用复选标记

仅在表格视图的特定单元格上显示和隐藏视图

达到固定宽度后防止在表格单元格上输入?

在表格视图单元格上添加标签文本[关闭]