はじめに
Wijmo(ウィジモ)は、グレープシティがHTML/JavaScript環境に向けて提供しているJavaScriptライブラリで、WebサイトやWebアプリケーションで活用できるUI部品を利用者に提供します。
2015年1月に提供開始されたWijmoの新版「Wijmo 5」には、グリッド部品「FlexGrid」が含まれています。FlexGridはグレープシティが.NET環境向けに提供している同名コンポーネントのJavaScript版で、十分な実績を持つグリッド部品と類似の作法で、表データの表示・編集、ソートやフィルタなどさまざまな機能を利用することができます。
本記事ではWijmo 5のFlexGridが備える機能のいくつかを、サンプルを交えて説明していきます。
対象読者
- WebサイトやWebアプリケーションのレベルをワンランク上げたい方
- より軽量/高速なJavaScriptのUI部品を探している方
- Webページ上で表データを簡単に表示・操作したい方
必要な環境
Wijmo 5はECMAScript 5をサポートする、いわゆるモダンブラウザをターゲットにしており、WijmoのWebサイトでは以下のブラウザがサポート対象として案内されています。
- Internet Explorer:9以上
- Google Chrome:5以上
- Mozilla Firefox:4以上
- Safari:5以上
- Opera:12以上
今回は以下の環境で動作を確認しています。
-
Windows 7 64bit版
- Internet Explorer 11
なお本記事のサンプルコードは、AngularJS(バージョン1.2.1)およびWijmo 5のAngularJS連携機能を利用しています。
FlexGridの紹介
FlexGridはグレープシティが提供するグリッド部品で、現在では同社のコンポーネント製品「ComponentOne Studio」の一部として.NET向け(Windows フォーム、WPF、Silverlight、WinRTの各環境用が存在)に提供されています。
Wijmo 5のFlexGridはこれらのJavaScript版となり、.NET版のFlexGridが持つデータ表示や編集、ソートやフィルタ、ページングなどのデータ操作など、表型式データを取り扱うさまざまな機能をHTML/JavaScript環境でも使用することができます。