Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

JavaScriptライブラリ「Wijmo(ウィジモ) 5」で1レコード複数行表示のグリッドを実現

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

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

ヘッダー表示の切り替え

 図9のように、MultiRowのヘッダーは、折りたたむなどして表示を切り替えられます。

図9 MultiRowのヘッダー表示を切り替えるサンプル(P004-header)
図9 MultiRowのヘッダー表示を切り替えるサンプル(P004-header)

 ヘッダー表示を切り替えるには、MultiRowのcollapsedHeaders属性を設定します。図9のサンプルでは、ボタン押下でcollapsedHeaders属性の値を変更しています。設定する値によって、ヘッダー表示が表2のように切り替わります。

表2 collapsedHeaders属性の値とヘッダーの表示内容
collapsedHeaders属性の値 表示内容
false ヘッダーを展開(各データ項目名を表示)
true ヘッダーを折りたたみ(グループのheaderプロパティを表示)
null グループのheaderプロパティと、各データ項目名をヘッダーに両方表示

ExcelやPDFファイルへのエクスポート

 MultiRowの内容を、ExcelやPDFファイルにエクスポートする機能が利用できます。Excelへエクスポートすると、図10のようになります。

図10 MultiRowの内容をExcelファイルにエクスポート(P005-export)
図10 MultiRowの内容をExcelファイルにエクスポート(P005-export)

 図11は、PDFへエクスポートした例です。ExcelとPDFいずれの場合も、レイアウトを維持したままエクスポートされていることがわかります。

図11 MultiRowの内容をPDFファイルにエクスポート(P005-export)
図11 MultiRowの内容をPDFファイルにエクスポート(P005-export)

Excelファイルへのエクスポート

 Excelエクスポート機能を利用するには、JavaScriptでZIPファイルを操作するJSZipライブラリが必要です。まず、プロジェクトのsrcフォルダにJSZipのファイル(jszip.min.js)を配置して、プロジェクト設定ファイル(.angular-cli.json)で、リスト9のようにJSZipを読み込む設定を記述します。

リスト9 JSZipを読み込む設定(P005-export/.angular-cli.json)
"scripts": [
  "wijmo.culture.ja.min.js", // Wijmoの言語ファイル
  "jszip.min.js"             // JSZipのファイル
],

 Excelファイルにエクスポートする処理はリスト10です。FlexGridXlsxConverterのsaveAsyncメソッドに、MultiRowオブジェクトとファイル名を指定して実行します。

リスト10 Excelエクスポート処理(P005-export/src/app/app.component.ts)
exportToExcel() {
  FlexGridXlsxConverter.saveAsync(
    this.multiRow,  // MultiRowオブジェクト
    null,           // オプション(ここでは未指定)
    "saved.xlsx"    // ファイル名
  );
}

 saveAsyncメソッドは、JSZipのバージョンが3.xのときに利用できます。JSZipのバージョンが2.xの場合はsaveメソッドを利用します。詳細はドキュメントを参照してください。

PDFファイルへのエクスポート

 PDFファイルにエクスポートする処理は、リスト11のようになります。

リスト11 PDFエクスポート処理(P005-export/src/app/app.component.ts)
exportToPdf() {
  FlexGridPdfConverter.export(
    this.multiRow,  // MultiRowオブジェクト
    "saved.pdf",    // ファイル名
    {
      embeddedFonts: [ // 埋め込みフォントの指定 ...(1)
        {
          source: "assets/fonts/ipag.ttf",
          name: "ipa-gothic",
          style: "normal",
          weight: "normal"
        }
      ],
      styles: {
        cellStyle: { // セルにフォントを指定 ...(2)
          font: {
            family: "ipa-gothic",
            style: "normal",
            weight: "normal"
          }
        }
      }
    }
  );
}

 FlexGridPdfConverterのexportメソッドに、MultiRowオブジェクトと出力ファイル名、オプションを指定して実行します。日本語を出力するためには、埋め込みフォントの指定が必要です。まず(1)のembeddedFonts属性で、フォントファイル(assets/fonts/ipag.ttf)に「ipa-gothic」という名前を付けます。次に(2)のcellStyle属性で、セルにフォントを指定します。

 なお、リスト10、11のthis.multiRowは、Angularの@ViewChildデコレーターを利用して、画面上のMultiRowに対応するオブジェクトを取得しています。詳細はサンプルコードを参照してください。

まとめ

 本記事では、グレープシティのJavaScriptライブラリWijmoのMultiRowコントロールを紹介しました。1レコードを複数行に表示する方法やヘッダー表示の切り替え、ExcelやPDFファイルへのエクスポート方法について説明しました。伝票のように、多数のデータ項目をコンパクトな横幅に収める必要があるケースで便利に使えるコントロールです。

参考資料



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

著者プロフィール

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

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

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

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

バックナンバー

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

もっと読む

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5