「Wijmo（ウィジモ） 5」のExcelライクスプレッドシートFlexSheet

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

FlexSheetを活用する機能

　以下では、リスト1を元に記述を追加してFlexSheetの機能を活用する例をいくつか紹介します。

FlexSheetのプロパティ設定

　FlexSheetはFlexGridの拡張クラスとして定義されているので、FlexGridで利用できるさまざまなプロパティを設定できます。FlexGridのプロパティについては過去記事も参照してください。FlexGridから継承したプロパティとは別に、FlexSheet固有の主なプロパティを表3に示します。

表3　FlexSheet固有の主なプロパティ

プロパティ名（JavaScript）	プロパティ名（ディレクティブ属性）	内容	デフォルト値
isTabHolderVisible	is-tab-holder-visible	TabHolderの表示制御	true（表示）
selectedSheetIndex	selected-sheet-index	現在表示しているシート番号	（現在の番号）

　表4のプロパティを操作する例（003_wijmo_flexsheet3.html）を、本記事からダウンロードできるサンプルに含めているので参考にしてください。

シートにデータを読み込む

　FlexSheetのシートにデータを読み込むには、バインドするデータオブジェクト名をwj-sheetディレクティブのitems-source属性に指定します。リスト2は1枚目のシートSheet1に変数sheet1Dataをバインドする記述です。

リスト2　シートにデータを初期設定（003_wijmo_flexsheet3.html）

<wj-sheet name="Sheet1" items-source="sheet1Data"></wj-sheet>

　バインドするデータsheet1Dataはリスト3になります。データには文字や数値のほか、Excelライクな数式や関数を含めることができます。リスト3には身長と体重からBMIを計算する数式と、身長・体重・BMIの平均をaverage関数で計算する記述が含まれています。

リスト3　シートにデータを初期設定（003_wijmo_flexsheet3.html）

// シートのデータ
$scope.sheet1Data = [
    {
        "ID":"1",
        "名前":"田中",
        "身長":176.0,
        "体重":75.0,
        "BMI":"=D2/(C2/100)/(C2/100)"
    },
    {
        "ID":"2",
        "名前":"佐藤",
        "身長":155.0,
        "体重":60.0,
        "BMI":"=D3/(C3/100)/(C3/100)"
    },
（中略）
    {
        "ID":"-",
        "名前":"平均",
        "身長":"=average(C2:C6)",
        "体重":"=average(D2:D6)",
        "BMI":"=average(E2:E6)"
    }
];

　リスト2、3をWebブラウザで表示すると、FlexSheetが数式や関数を解釈して計算結果を画面表示します。

図3　FlexSheetにデータや数式を設定して表示（003_wijmo_flexsheet3.html）