30歳からはじめる雑記ブログ

日々あった出来事、考えたことを書いていきます。

jQueryプラグイン:Grid.js

これから学んだ技術についてはメモ程度でもいいからブログ記事に残しておこうと思う。

 

今回はjQueryプラグインでテーブル生成用のGrid.jsです。

gridjs.io

 

マテリアルデザインのようなシンプルでおしゃれな感じのテーブルUIを作ることができます。

次のような機能がそろってます。

 

・ソート

・検索フィルター

・カラムのサイズ動的変更

・ページング

・ヘッダーの固定

 

ただネックなのが検索フォームやページングの位置を調整するのが難しいということ。

それにチェックボックスをテーブルのセル内に埋め込むこと自体はホームページのExampleを参考に実装できるのだけど、そのチェックボックスを押したときのJSによるイベントリスナーの登録が難しい。

 

jQueryプラグイン全般に言えることなのかもしれないけど、そのプラグインが生成する要素に対してカスタムのHTMLを組み込んだりするのが難しい。最初から形が決まっていてプラグイン内部で生成しているものだから、細かい調整がやりにくい。

 

特に困るのが、検索フォームやページングの位置を調整できないこと。

独自実装のボタンをテーブルの近くに置きたいのに、そのプラグインが生成するHTMLの範囲が決まっているから、その範囲内をいじくれない。

 

実装したい機能をそのプラグインがすべて満たしているならいいけど、足りない部分を独自実装しないといけないとなると、すべて独自実装でやるよりも難しかったりする。

そのプラグインの細かい仕様を把握しないと、カスタマイズができないから。