SpreadJS製品ヘルプ
スプレッドシートに加えられた変更の格納
はじめに > クイックスタート > スプレッドシートに加えられた変更の格納

次のセクションは、スプレッドシートの変更を格納し、スプレッドシートを更新してすべての変更を消える手順について説明します。

手順1：スプレッドシートを変更して保護する

  1. データ連結トピックで作成されたrefresh機能を変更します。 loadTable関数を呼び出した後、suspendDirtyメソッドとresumeDirtyメソッドを実行して、列Fに加えられた変更が格納されないようにします。
  2. スプレッドシートのF1セルの値、背景色、および水平方向の配置を設定します。
  3. スプレッドシートを保護するには、isProtectedオプションをtrueに設定します。
  4. スプレッドシートのセルがロックされないようにするには、lockedメソッドをfalseに設定します。
    JavaScript
    コードのコピー 
    //1: 列Fの値、背景色、および水平方向の配置を設定します。
function refresh() {
    var ss = GC.Spread.Sheets.findControl(document.getElementById("ss"));
    // activesheetを取得します。
    var sheet = ss.getActiveSheet();
    // シートをリセットし、列数を設定します。
    sheet.reset();
    sheet.setColumnCount(7);
    // サンプルデータを使用して、テーブルをSpreadインスタンスにロードします。
    var data = createSampleData();
    loadTable(ss, data);
    // 値、背景色、水平方向の配置を設定します。
    // ダーティセルを一時停止します。
    sheet.suspendDirty();
    // セルF1の値、背景色を設定します。
    sheet
        .getCell(0, 5)
        .backColor("yellow")
        .value("変更")
        .hAlign(GC.Spread.Sheets.HorizontalAlign.center);
    // ダーティセルを再開します。
    sheet.resumeDirty();
    
    // シートを保護し、列Fをロックします。
    sheet.options.isProtected = true;
    // 4.1) セルをロックしないようにシートのデフォルトスタイルを設定します。
    var s = sheet.getDefaultStyle();
    s.locked = false;
    sheet.setDefaultStyle(s);
    // 4.1) 新しい値と古い値を表示するために列Fをロックするように指定します（列インデックス5）。
    sheet.getRange(-1, 5, -1, 1).locked(true);

  5. refresh関数を実行するために「更新」HTML入力ボタンを作成します。
    JavaScript
    コードのコピー 
    <!--更新ボタンを作成します。-->
<input type="button" value="更新" onclick="refresh()" />


手順2：ダーティセル情報を取得する

  1. showChanges関数を作成し、getDirtyCellsメソッドとhasPendingChangesメソッドを使用して、保留中の変更とともにダーティセルに関する情報を取得します。
  2. データ配列（dirtyDataArrayという）を作成して、row、col、rowCount、およびcolCountに関するダーティセル情報を格納します。
  3. setValueメソッドを使用して、列Fのセルの値を設定し、ダーティセルの古い値と新しい値を表示するようにします。
    JavaScript
    コードのコピー 
    // 手順2: showChanges()を作成します。
function showChanges(ss, row, col, rowCount, colCount) {
    // activesheetを取得します。
    var sheet = ss.getActiveSheet();
    // activesheetに保留中の変更がある場合、
    if (sheet.hasPendingChanges()) {
        // ペイント、イベント、ダーティを一時停止します。
        ss.suspendPaint();
        ss.suspendEvent();
        sheet.suspendDirty();
        // ダーティセルコレクションをdirtyDataArrayというデータ配列に格納します。
        var dirtyDataArray = sheet.getDirtyCells(row, col, rowCount, colCount);

        // 列Fのダーティな変更をスキップします。
        for (var i = 0; i < dirtyDataArray.length; i++) {
            // ダーティセルデータをダーティデータ配列に格納します。
            var dirtyCell = dirtyDataArray[i];

            // dirtyDataArray値から新しい値と古い値を表示します。
            // 行インデックス --> dirtyCell.rowは、変更が加えられた行の行インデックスを返します。
            // 列インデックス --> 5は列Fの行インデックス用です。
            sheet.setValue(
                dirtyCell.row,
                5,
                "古い値: " + dirtyCell.oldValue + "新しい値: " + dirtyCell.newValue
            );
        }
        // ペイント、イベント、ダーティを再開します。
        sheet.resumeDirty();
        ss.resumeEvent();
        ss.resumePaint();
    }
}

 

手順3：ダーティセルの値を表示する

CellChangedイベントとRangeChangedイベントをアクティブなシートに連結して、スプレッドシートが変更されるときにshowChange関数を実行します。

JavaScript
コードのコピー 
// 手順3：CellChangedイベントとRangeChangedイベントをシートに連結します。
$(document).ready(function () {
    // Spreadを初期化します。
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
    // refresh関数を呼び出します。
    refresh();
    // CellChangedを連結します。
    spread.bind(GC.Spread.Sheets.Events.CellChanged, function (event, data) {
        var row = data.row,
            col = data.col;
        if (
            data.propertyName !== "value" ||
            row === undefined ||
            col === undefined
        ) {
            return;
        }
        // showChanged関数を実行します。
        showChanges(spread, row, col);
    });
    // RangeChangedを連結します。
    spread.bind(GC.Spread.Sheets.Events.RangeChanged, function (event, data) {
        var row = data.row,
            col = data.col,
            rowCount = data.rowCount,
            colCount = data.colCount;
        if (
            row === undefined ||
            col === undefined ||
            rowCount === undefined ||
            colCount === undefined
        ) {
            return;
        }
        // showChanged関数を実行します。
        showChanges(spread, row, col, rowCount, colCount);
    });
});

古い値と新しい値が列Fに表示されます。また、列Fはロックされているため、内容は変更できません。 [更新]ボタンを使用してスプレッドのインスタンスを更新し、すべての変更を削除することもできます。上記の手順に従うと、以下のような出力が生成されます。

 

 

Copyright © 2016 GrapeCity inc. All rights reserved.