Bootstrapのテーブルで、詳細表示と詳細フィルタリングを実装する方法を教えてください。

2年 ago
夏樹, 風
2 minutes

Bootstrapでは、Table detailViewとdetailFilterを利用することで、テーブルの詳細を表示・フィルタリングすることができます。

  1. テーブルの各行をクリックすると、詳細情報が表示されます。

DetailView を使用するには、まずテーブルに詳細を表示可能な列を追加する必要があります。例えば、各行の最後の列に「詳細」ボタンを追加し、クリックされたときにその行の詳細を表示します。

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>名称</th>
      <th>详情</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>产品A</td>
      <td><button class="btn btn-primary" data-toggle="modal" data-target="#detailModal">详情</button></td>
    </tr>
    <tr>
      <td>2</td>
      <td>产品B</td>
      <td><button class="btn btn-primary" data-toggle="modal" data-target="#detailModal">详情</button></td>
    </tr>
  </tbody>
</table>

そして、ページの下部に詳細を表示するためのモーダルを追加する。

<div class="modal fade" id="detailModal" tabindex="-1" aria-labelledby="detailModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="detailModalLabel">产品详情</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>产品详细信息...</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>
  1. テーブル詳細フィルタ：キーワードを入力して、一致する表の行を抽出する。

テーブルの上部にテキストボックスを追加し、キーワードを入力することで、Table detailFilter でテーブルのフィルタ処理を行えます。

<input type="text" id="filterInput" class="form-control" placeholder="输入关键字进行过滤">

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>名称</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>产品A</td>
    </tr>
    <tr>
      <td>2</td>
      <td>产品B</td>
    </tr>
  </tbody>
</table>

<script>
  $(function() {
    $('#filterInput').on('keyup', function() {
      var value = $(this).val().toLowerCase();
      $('table tbody tr').filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
      });
    });
  });
</script>

このコードでは、jQuery を使用して入力ボックスのキーボードイベントをリッスンしています。入力ボックスの値が変更されると、テーブルの各行を反復処理し、行テキストの内容が入力ボックスの値を含んでいるかどうかによって、その行を表示するかどうかの判断を行っています。

この記事が参考になれば幸いです！

bannerAds