スプレッドシートに加えられた変更の格納

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

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

1. データ連結トピックで作成された refresh 機能を変更します。 loadTable 関数を呼び出した後、 suspendDirty メソッドと resumeDirty メソッドを実行して、列Fに加えられた変更が格納されないようにします。

2. スプレッドシートのF1セルの値、背景色、および水平方向の配置を設定します。

3. スプレッドシートを保護するには、 isProtected オプションをtrueに設定します。

4. スプレッドシートのセルがロックされないようにするには、 locked メソッドをfalseに設定します。

   //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入力ボタンを作成します。

   <!--更新ボタンを作成します。-->
   <input type="button" value="更新" onclick="refresh()" /> 

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

1. showChanges 関数を作成し、 getDirtyCells メソッドと hasPendingChanges メソッドを使用して、保留中の変更とともにダーティセルに関する情報を取得します。

2. データ配列（ dirtyDataArray という）を作成して、row、col、rowCount、およびcolCountに関するダーティセル情報を格納します。

3. setValue メソッドを使用して、列Fのセルの値を設定し、ダーティセルの古い値と新しい値を表示するようにします。

   // 手順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 関数を実行します。

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