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" 以激活该插件，并在下方放置一个带有.expandable-body-类的新的表格行。

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

提示！

要获得正确的向上/向下滑动动画，请在可扩展表格正文内放置一个 div 或 p 标签。

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)