SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

最先端テクノロジーに対応した高速・軽量なJavaScript UIライブラリ「Wijmo」の活用(AD)

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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)
図3 FlexSheetにデータや数式を設定して表示(003_wijmo_flexsheet3.html)

次のページ
ソートとフィルタ

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
最先端テクノロジーに対応した高速・軽量なJavaScript UIライブラリ「Wijmo」の活用連載記事一覧

もっと読む

この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/9284 2016/03/10 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング