2016年9月6日火曜日

[MDL] テーブルのデータの検索と並べ替えを行う

イメージ

Google が提唱するマテリアル デザインの開発キット、Material Design Lite (以下、MDL) の Tips です。

今回は、テーブルのデータの検索と並べ替えを行うサンプル コードを紹介します。

環境

  • MDL バージョン: 1.2.0
  • 動作確認ブラウザ (すべて Windows 10):
    • Chrome 53
    • Microsoft Edge
    • Internet Explorer 11

ライブ デモ (サンプル コード)


解説

本サンプル コードでは、List.js というライブラリーを使った次の HTML と JavaScript コードで、データの検索と並べ替えを実現しています。

HTML:

<div id="table">
  <!-- Expandable Textfield -->
  <form action="#">
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
      <label class="mdl-button mdl-js-button mdl-button--icon" for="sample6">
        <i class="material-icons">search</i>
      </label>
      <div class="mdl-textfield__expandable-holder">
        <input class="mdl-textfield__input search" type="text" id="sample6">
        <label class="mdl-textfield__label" for="sample-expandable">Expandable Input</label>
      </div>
    </div>
  </form>

  <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
    <thead>
      <tr>
        <th class="mdl-data-table__cell--non-numeric sort" data-sort="material">Material</th>
        <th class="mdl-data-table__cell--non-numeric sort" data-sort="quantity">Quantity</th>
        <th class="mdl-data-table__cell--non-numeric sort" data-sort="unit-price">Unit price</th>
      </tr>
    </thead>
    <tbody class="list">
      <tr>
        <td class="mdl-data-table__cell--non-numeric material">Acrylic (Transparent)</td>
        <td class="quantity">25</td>
        <td class="unit-price">$2.90</td>
      </tr>
      ...
    </tbody>
  </table>
</div>

JavaScript:

var options = {
  valueNames: [ 'material', 'quantity', 'unit-price' ]
};
new List('table', options);

また、並べ替えを実行した際に表示される、昇順、降順のアイコンは、以下のコードによって設定されます。

var headers = document.querySelectorAll('th.sort');
for (var i = 0; i < headers.length; i++) {
  headers[i].addEventListener('click', function (){
    for (var j = 0; j < headers.length; j++) {
      var classList = headers[j].classList;
      classList.remove('mdl-data-table__header--sorted-ascending');
      classList.remove('mdl-data-table__header--sorted-descending');
      if (classList.contains('asc')) {
        classList.add('mdl-data-table__header--sorted-ascending');
      } else if (classList.contains('desc')) {
        classList.add('mdl-data-table__header--sorted-descending');
      }
    }
  });
}


参考

0 件のコメント:

コメントを投稿