使用 Bootstrap Table 根据 row.id 隐藏点击的行

Question

我有一个 Bootstrap Table 设置如下：

<table data-toggle="table" 
      id="table"
      data-id-field="id">
    <thead>
    <tr>
        <th data-field="id">ID</th>
        <th>Name</th>
        ...
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>11</td>
        <td>bootstrap-table</td>
        ...
    </tr>
  </tbody>
</table>

我试图隐藏使用行 ID 单击的行：

$(function () {
    $('#table').on('click-row.bs.table', function (e, row, $element) {
        $table.bootstrapTable('hideRow', { uniqueId: row.id});
    });
});

但是没有任何反应。到目前为止，我的故障排除似乎表明我的 { uniqueId: row.id} 部分不正确。

hideRow 的 Bootstrap Table docs 说：

Hide the specified row. The param must contain at least one of the following properties: index: the row index. uniqueId: the value of the uniqueId for that row.

这里 fiddle 显示了我的问题，即点击时行没有隐藏。

我如何让它工作？

Answer 1

这是解决方案。您需要传递当前行的 index。

因此，第一行的索引为 0，第二行的索引为 1，依此类推..

$(function () {
   var $result = $('#eventsResult');
   var $table = $('#table');

   $table.on('click-row.bs.table', function (e, row, $element) {
      $result.text('Event: click-row.bs.table on: ' + row.id);
      $table.bootstrapTable('hideRow', {index:$element.index(),isIdField:  true});
   });
});

使用 Bootstrap Table 根据 row.id 隐藏点击的行

Hide clicked row based on row.id using Bootstrap Table

jquery

twitter-bootstrap

bootstrap-table