BOOTSTRAP SOLUTION

Question

我知道有一种方法可以在bootstrap中折叠表行，例如this。但是我有可能有一个按钮/链接/等。我可以单击，折叠整个表而不仅仅是表行？

我目前正在根据数据库信息构建表，这些表可能会变得非常大。如果我有4-5个表，我希望用户能够按照他/她的选择来折叠/扩展这些表。

这有可能吗？我google时似乎找不到任何答案。

Answer 1

如果您能够将表放在panel内（例如使用Bootstrap 3.2），则可以在不使用javascript的情况下折叠panel-body元素。这是一个例子：

<div class="panel panel-primary accordion"> <!-- Panel (collapasable) -->

    <div class="panel-heading"> <!-- Panel head -->
        <a class="accordion-toggle" data-toggle="collapse" data-parent=".accordion" href="#collapseOne">
            Collapse Me On Click!
        </a>           
    </div> <!-- END Panel head -->

    <div id="collapseOne" class="panel-collapse collapse in"> <!-- Collapsable section -->

        <div class="panel-body"> <!-- Panel body -->

            <table>
                <thead>
                    <tr>
                        <th>Col1</th>
                        <th>Col2</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Data</td>
                        <td>Data</td>
                    </tr>
                </tbody>

            </table>

        </div> <!-- END Panel body -->

    </div> <!-- END Collapse section -->

</div>

CSS（不是真的需要）：

a {
    color: white;
}

table {
    width: 100%;
}

tr {
   border: solid 1px; 
}

和Fiddle

Answer 2

我可以提供两个解决方案，JQuery和Bootstrap。

如果您对JQuery解决方案持开放态度，请查看此内容。

JQUERY SOLUTION

<强> HTML

<div class="collapsable">
   <table>
      <tr><td> word </td><td> another word </td></tr>
      <tr><td> word </td><td> another word </td></tr>
    </table>
</div><br />
<button> Click me </button>

<强> CSS

table, th, td
{
    border: 1px solid black;
}

<强> JQuery的

$("button").on("click", function()
{
    $(".collapsable").slideToggle();
});

Fiddle使用按钮可以上下滑动表格以隐藏/显示。

如果您使用的是Bootstrap 3.0，那么这个例子怎么样？

BOOTSTRAP SOLUTION

<强> HTML

<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
      <table>
          <tr><td> word </td><td> another word </td></tr>
          <tr><td> word </td><td> another word </td></tr>
      </table>
  </div>
</div>

<强> CSS

与上述相同。

Boostrap collapse Fiddle

Answer 3

也许是这样的？使用bootstrap手风琴：http://jsfiddle.net/swm53ran/30/

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Table 1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        <table class="table">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Description</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Bob</td>
                    <td>is cool</td>
                    <td>50</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Jane</td>
                    <td>is cool</td>
                    <td>50</td>
                </tr>
            </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

你可以添加css来使表格本身可折叠：

.panel-body {
    padding:0px;
}
.table {
    margin-bottom:0px;
}

Bootstrap折叠整个表

3 个答案:

JQUERY SOLUTION

BOOTSTRAP SOLUTION