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 外掛或使用 data API 來啟用。

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