JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】

下面是详细讲解“JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】”的完整攻略。

1. 父子表

父子表是指在一张表格中，某些行可以展开后显示子表格。Bootstrap table提供了父子表的插件，使用起来非常方便。

1.1 配置插件

要使用父子表的插件，首先要配置插件。可以使用data 属性来设置子表的数据和表头信息，使用data-field 属性来匹配父子表信息，使用data-index 属性来匹配父、子表的数据和表头信息。

示例代码：

<table data-toggle="table">
  <thead>
    <tr>
      <th data-field="name">Name</th>
      <th data-field="email">Email</th>
      <th data-field="gender">Gender</th>
      <th data-field="rank">Rank</th>
    </tr>
  </thead>
  <tbody>
    <tr data-index="0">
      <td>Steve Waters</td>
      <td>[e-mail]</td>
      <td>Male</td>
      <td>2</td>
    </tr>
    <tr data-index="1" data-parent-index="0">
      <td colspan="4">
        <table data-toggle="table" data-parent-index="0" data-parent-key="name">
          <thead>
            <tr>
              <th data-field="name">Name</th>
              <th data-field="email">Email</th>
              <th data-field="rank">Rank</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Jon Richards</td>
              <td>[e-mail]</td>
              <td>3</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

1.2 设置父子表的匹配条件

具有父子表的行必须要包含属性"data-parent-index"，并且它的值应该等于它的父行属性"data-index"的值。在子表格中，可以使用"data-parent-key"属性指定匹配子表和父表所需的数据字段，这里是"name"。

示例代码：

<table id="table" data-toggle="table" data-url="data1.json" data-pagination="true" data-search="true">
  <thead>
    <tr>
      <th data-field="name">Name</th>
      <th data-field="email">Email</th>
      <th data-field="gender">Gender</th>
      <th data-field="rank">Rank</th>
    </tr>
  </thead>
  <tbody>
    <tr data-parent-index="1">
      <td>David Johnson</td>
      <td>[e-mail]</td>
      <td>Male</td>
      <td>3</td>
    </tr>
    <tr data-parent-index="1" data-index="2">
      <td aria-describedby="table2-0" id="table2-0">Tommy Brown</td>
      <td aria-describedby="table2-1" id="table2-1">[e-mail]</td>
      <td aria-describedby="table2-2" id="table2-2">Male</td>
      <td aria-describedby="table2-3" id="table2-3">4</td>
    </tr>
    <tr data-parent-index="1" data-index="3">
      <td colspan="4">
        <table data-toggle="table" data-parent-index="2" data-parent-key="name">
          <thead>
            <tr>
              <th data-field="name">Name</th>
              <th data-field="email">Email</th>
              <th data-field="rank">Rank</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Jon Richards</td>
              <td>[e-mail]</td>
              <td>3</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

2. 行列调序

虽然Bootstrap table默认按照列的顺序来显示数据，但是可以使用插件来实现列的调序和行的拖拽调序。

2.1 调序列

可以使用column-switch插件来调序列。该插件需要放在table标签外，而且需要指定需要调序的表格的id。调序后的结果会实时反映在表格中，而且可以使用localStorage来保留用户的排序。

示例代码：

<table id="table" data-toggle="table" data-url="data3.json" data-search="true">
  <thead>
    <tr>
      <th data-field="id" data-switchable="false">ID</th>
      <th data-field="name">Name</th>
      <th data-field="email">Email</th>
      <th data-field="gender">Gender</th>
      <th data-field="age">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Steve Waters</td>
      <td>[e-mail]</td>
      <td>Male</td>
      <td>22</td>
    </tr>
    <tr>
      <td>2</td>
      <td>David Johnson</td>
      <td>[e-mail]</td>
      <td>Male</td>
      <td>25</td>
    </tr>
  </tbody>
</table>
<script>
  $('#table').bootstrapTable();
  $('#table').bootstrapTable('refreshOptions', {columnSwitch: true});
</script>

2.2 调序行

可以使用drag-table插件来调序行。该插件需要放在table标签外，而且需要指定需要调序的表格的id。拖拽调序后的结果会实时反映在表格中，而且可以使用localStorage来保留用户的排序。

示例代码：

<table id="table" data-toggle="table" data-url="data2.json" data-pagination="true" data-sort-name="name" data-sort-order="asc">
  <thead>
    <tr>
      <th data-field="name" data-sortable="true">Name</th>
      <th data-field="email" data-sortable="true">Email</th>
      <th data-field="gender" data-sortable="true">Gender</th>
      <th data-field="age" data-sortable="true">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Steve Waters</td>
      <td>[e-mail]</td>
      <td>Male</td>
      <td>22</td>
    </tr>
    <tr>
      <td>David Johnson</td>
      <td>[e-mail]</td>
      <td>Male</td>
      <td>25</td>
    </tr>
    <tr>
      <td>Tommy Brown</td>
      <td>[e-mail]</td>
      <td>Male</td>
      <td>24</td>
    </tr>
    <tr>
      <td>Jon Richards</td>
      <td>[e-mail]</td>
      <td>Male</td>
      <td>23</td>
    </tr>
  </tbody>
</table>
<script>
  $('#table').bootstrapTable();
  $('#table').dragtable();
</script>

以上就是“JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】”完整攻略的详细说明。

阅读剩余 76%