FlexSheetを活用する機能
以下では、リスト1を元に記述を追加してFlexSheetの機能を活用する例をいくつか紹介します。
FlexSheetのプロパティ設定
FlexSheetはFlexGridの拡張クラスとして定義されているので、FlexGridで利用できるさまざまなプロパティを設定できます。FlexGridのプロパティについては過去記事も参照してください。FlexGridから継承したプロパティとは別に、FlexSheet固有の主なプロパティを表3に示します。
| プロパティ名（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が数式や関数を解釈して計算結果を画面表示します。
