スプレッドシートの変更をデータベースに保存

次のセクションは、スプレッドシートの変更をデータベースに保存する手順について説明します。

「スプレッドシートに加えられた変更の格納」のトピックで作成したサンプルに、以下の手順を追加します。

SpreadJSにはデータベースを直接更新する機能はありませんが、以下の方法で、変更されたデータを取得することができるので、変更されたデータをもとに、データベースの更新処理を適宜実装してください。

手順1：ダーティセル情報を取得してJSON文字列に変換する

saveToDB 関数を作成し、 getDirtyCells メソッドを使用して、ダーティセル情報と呼ばれる変更されたセルの情報を取得します。

JSON.stringifyメソッドを使用して、ダーティセル情報をJSON文字列に変換します。

//1: saveToDB()を作成します。
function saveToDB() {
    // DOM要素「ss」からactivesheetを取得します。
    var ss = GC.Spread.Sheets.findControl(document.getElementById("ss"));
    var sheet = ss.getActiveSheet();
    // ダーティセル情報をダーティセル変数に格納します。
    var dirtyCells = sheet.getDirtyCells();
    // HTMLの<div>要素「msg」をidで取得します。これは手順2で作成されます。
    var div = document.getElementById("msg");
    // div要素にJSON文字列を表示して、変更されたセル情報を視覚化します。
    div.innerHTML = JSON.stringify(dirtyCells, null, 4);
    // メモ：データベースに変更を投稿します。
}

手順2：データベースへの変更を保存する

SpreadJS<div>要素の後に msg idを持つHTML<div>要素を作成して、JSON文字列を表示します。

saveToDB 関数が呼び出される「 DBに保存 」入力ボタンを作成します。キャプチャされてJSON文字列に変換された変更は、 [DBに保存] ボタンをクリックすると、id msg で<div>に表示されます。

すべてのボタンと<div>要素を含む新しいHTML<body>は次のように表示します。

<body>
    <h1>スプレッドシートに加えられた変更をデータベースに保存します</h1>
    <p>
        このセクションでは、[DBに保存]ボタンとDIVを作成して、
        [DBに保存]ボタンをクリックしたときに変更をJSON文字列として表示します。
    </p>
    <!-- 更新ボタンを作成します。 -->
    <input type="button" value="更新" onclick="refresh()" />
    <!-- [DBに保存] <div>とボタンを作成します。 -->
    <input type="button" value="DBに保存" onclick="saveToDB()" />
    <br />
    <br />
    <div id="ss" style="height:400px;width:900px"></div>
    <!-- <div>を変更します。 -->
    <div class="options-container">
        <h4> データベースに保存された変更: </h4>
        <div id="msg" style="width: 100%; height: 260px; border: 1px solid grey;"></div>
    </div>
</body>

変更を含み、データベースに投稿されるJSON文字列は、次のように表示されます。