Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加

 本連載では、グレープシティが提供する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ページより)
図1 .NET向けにも提供されるFlexGrid(グレープシティのWebページより)

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


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2012年2月時点での登録メンバは37名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

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

もっと読む

All contents copyright © 2006-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5