133
144

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

100万行扱えるグリッドw2ui GridとHandsontableの紹介

Last updated at Posted at 2014-03-23

はじめに

100万行扱えるJavaScriptのグリッドライブラリとしてはSlickGridもあるのですが、ソースコードが複雑で、理解したりカスタマイズしたりするのが相当困難な印象でした。

そこで、他にも良いグリッドライブラリは無いかと探していた所、機能的に良さそうなのを2つ見つけたので紹介します。コードはまだパッと見ただけです。

w2ui Grid

w2uiというJavaScriptで書かれたUIライブラリにGridが含まれています。

IE9以上、Chrome、Firefox、Safariで動きます。Operaも文中には書いてないですがアイコンが貼ってあるので動くようです。MITライセンスです。

デモページのトップに、機能概要が書かれています。[More Demos]のボタンからさらに様々なデモを試せます。

左のツリーで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で実現しています。

133
144
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
133
144

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?