CodeZine(コードジン)

特集ページ一覧

JavaScriptスプレッドシート部品「SpreadJS」最新版V14Jの新機能を紹介

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

データ操作に関する新機能

 以下では、スプレッドシートのデータ操作に関するV14Jの新機能を紹介していきます。

スプレッドシートをHTMLに出力

 スプレッドシートの内容をそのままHTMLとして出力する機能が追加されました。

図7 HTML出力のサンプル(p008-html)
図7 HTML出力のサンプル(p008-html)

 実装はリスト10の通りで、activeSheet.getRangeメソッドで選択した領域に対してtoHtmlメソッドを実行するとHTMLを取得できます。このサンプルでは取得したHTMLをdiv領域に設定して画面表示させています。

[リスト10]スプレッドシートをHTML出力するJavaScript実装(p008-html/main.js)
var html = activeSheet.getRange('A1:C4').toHtml();
document.getElementById('output-html-div').innerHTML = html;

データサイズが大きなスプレッドシートで便利な増分ロード

 スプレッドシートを少しずつロードする増分ロード機能に対応しました。特にデータサイズが大きいスプレッドシートロードする際にロード過程が見えるため、ユーザーが感じるストレスを低減できます。

図8 増分ロードのサンプル(p009-incremental-load)
図8 増分ロードのサンプル(p009-incremental-load)

 実装はリスト11の通りです。スプレッドシートを読み込むfromJSONメソッドの第2引数に、増分ロードを表すincrementalLoadingオプション(2)を指定します。loadingにはロード中に呼び出される関数、loadedにはロード完了後に呼び出される関数を指定して、ロード率やロード完了を表示するようにできます。

[リスト11]増分ロードを行うJavaScript実装(p009-incremental-load/main.js)
// ワークシートをロード
workbook.fromJSON(json, { ...(1)
  // 増分ロードの指定 ...(2)
  incrementalLoading: {
    loading: function (progress) { // ロード中に呼ばれる(progressはロード率)
      // ロード率を%で表示
      progress = progress * 100;
      document.getElementById('status-div').innerText =
       'ロード中:' + progress.toFixed(2) + '%';
    },
    loaded: function () { // ロード完了時に呼ばれる
      // ロード完了を表示
      document.getElementById('status-div').innerText = 'ロード完了';
    }
  }
});

まとめ

 本記事では、SpreadJSの新バージョンV14Jで導入された新機能について紹介しました。リボンコンテナのような大規模な追加機能から、増分ロードのような使い勝手を高める気の利いた機能まで、さまざまな改善が行われたバージョンアップとなっています。

参考資料

関連リンク



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

あなたにオススメ

著者プロフィール

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

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

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

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

バックナンバー

連載:高機能JavaScriptグリッド部品「SpreadJS」の活用

もっと読む

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