「Wijmo（ウィジモ） 5」が提供する万能グリッド部品FlexGrid

ECMAScript 5に準拠した高速・軽量なJavaScript UIライブラリ「Wijmo 5」の活用 第3回

　本連載では、グレープシティが提供するJavaScriptライブラリ「Wijmo（ウィジモ）」について、サンプルとともに利用例を紹介します。今回は最新版Wijmoである「Wijmo 5」が提供するグリッド部品「FlexGrid」について、さまざまな機能の利用法をサンプルで説明していきます。

はじめに

　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の各環境用が存在）に提供されています。

図1　.NET向けにも提供されるFlexGrid（グレープシティのWebページより）

　Wijmo 5のFlexGridはこれらのJavaScript版となり、.NET版のFlexGridが持つデータ表示や編集、ソートやフィルタ、ページングなどのデータ操作など、表型式データを取り扱うさまざまな機能をHTML／JavaScript環境でも使用することができます。