はじめに
100万行扱えるJavaScriptのグリッドライブラリとしてはSlickGridもあるのですが、ソースコードが複雑で、理解したりカスタマイズしたりするのが相当困難な印象でした。
そこで、他にも良いグリッドライブラリは無いかと探していた所、機能的に良さそうなのを2つ見つけたので紹介します。コードはまだパッと見ただけです。
w2ui Grid
w2uiというJavaScriptで書かれたUIライブラリにGridが含まれています。
IE9以上、Chrome、Firefox、Safariで動きます。Operaも文中には書いてないですがアイコンが貼ってあるので動くようです。MITライセンスです。
デモページのトップに、機能概要が書かれています。[More Demos]のボタンからさらに様々なデモを試せます。
-
全カラムにまたがった検索のデモ
- 検索ワードを入れてリターンを押すとマッチした箇所が黄色くハイライト表示されます。
- 複数カラムでのソートするデモ
- カラム幅調整のデモ
- 2つのグリッドを左右に並べて行を移動するデモ
左のツリーでGrid以外にもCombinationのところにもグリッドのデモがあります。
-
無限スクロールのデモ
- 最終行を超えてスクロールしようとするとデータがロードされて追加されます。
デモページの下の質問スレッドでの作者のコメントによると、無限スクロールをサポートしたのでページングは廃止したそうです。
JavaScript Grid with One Million Records | JavaScript UI - w2uiのブログ記事を見ると100万行のデータでも問題なく動くようです。
デモページをChromeのデベロッパーツールで確認した所、w2uiのGridはHTMLのtable要素を使っていますが、td要素内のセルはdiv要素でラッピングするという方式になっていました。
スクロールバーはブラウザネイティブのUIを使っています。
Handsonable
Handsontable - jQuery grid editor. Excel-like grid editing with HTML & JavaScript
GitHubのレポジトリwarpech/jquery-handsontableによるとIE8〜11、Firefox、Chrome、Safari、Operaで動き、MITライセンスです。
SlickGridとw2ui Gridは列のみヘッダがあって行ヘッダはありませんが、Handsontableは行ヘッダもつけることが出来て、Excelライクなグリッドを実現しています。
HandsontableのグリッドはHTMLのtable要素で実装されていて、セルも単にtd要素となっています。スクロールバーはブラウザネイティブのUIではなくHTMLで実現しています。
-
スクロールのデモ
- 100万行のデータでもスクロールバーで軽やかにスクロールできます。
-
単一カラムソートのデモ
- Understanding column sorting plugin · warpech/jquery-handsontable Wikiを見ると複数カラムソートは標準では非対応のようです
- カラム幅調整のデモ
-
固定行・固定列ありのスクロールのデモ
- 上2行、左2列が固定になっています。
-
列の順序をドラッグで入れ替えるデモ
- 列ヘッダの左端付近でマウスが十字矢印カーソルになったときにドラッグできます。
- ページングのデモ
- Backbone.jsのモデルを扱うデモ
- Polymerを使ったWeb Componentのデモ（ベータ）
- Live search filter for jquery handsontable