AdminLTELogo

展開可能なテーブルプラグイン

展開可能なテーブルプラグインは、展開可能なテーブルを作成するためのシンプルな機能を提供します。

コードの例
<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は、開発者が1つのテーブル行の可視性状態を切り替えることができるよりカスタマイズ可能なオプションを提供します。

$('#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)