Expandable Table Plugin

可展开表格插件提供简单功能来创建可展开的表格。

示例代码

<table class="table table-bordered table-hover">
  <tbody>
    <tr data-widget="expandable-table" aria-expanded="false">
      <td>183</td>
    </tr>
    <tr class="expandable-body">
      <td>
        <p>
          <!-- YOUR EXPANDABLE TABLE BODY HERE -->
        </p>
      </td>
    </tr>
    <tr data-widget="expandable-table" aria-expanded="true">
      <td>219</td>
    </tr>
    <tr class="expandable-body">
      <td>
        <p>
          <!-- YOUR EXPANDABLE TABLE BODY HERE -->
        </p>
      </td>
    </tr>
    <tr data-widget="expandable-table" aria-expanded="true">
      <td>657</td>
    </tr>
    <tr class="expandable-body">
      <td>
        <p>
          <!-- YOUR EXPANDABLE TABLE BODY HERE -->
        </p>
      </td>
    </tr>
  </tbody>
</table>

提示！

您可以通过 `aria-expanded="false"` 控制默认的可见性。/通过可展开表格的表头设置 `aria-expanded="true"`。

使用方法

该插件可以作为jQuery插件或使用数据API来激活。

数据API

添加data-widget="expandable-table"将其应用于表格行以激活插件，并在其下方放置一个新的表格行，并添加 `-class`。.expandable-body-class。

<tr data-widget="expandable-table" aria-expanded="true">
  <td>657</td>
</tr>
<tr class="expandable-body">
  <td>
    <p>
    </p>
  </td>
</tr>

提示！

为了获得正确的向上/向下滑动动画，请在您的可展开表格体内放置一个div或p-tag。

jQuery

jQuery API 提供了更多可定制的选项，允许开发者切换表格行的可见性状态。

$('#expandable-table-header-row').ExpandableTable('toggleRow')

方法

方法	描述
toggleRow	在可展开表格体之间切换隐藏和可见状态。

示例：$('#expandable-table-header-row').ExpandableTable('toggleRow')

活动

事件类型	描述
expanded.lte.expandableTable	在可展开表格体展开后触发。
collapsed.lte.expandableTable	在可展开表格体折叠后触发。

示例：$('#expandable-table-header-row').on('expanded.lte.expandableTable', handleToggledEvent)