セルの操作

SpreadJSは、以下で説明するような、さまざまなセルの操作を提供します。

セル値の取得と設定

Cell values

次のサンプルコードは、セル値を取得します。

$(document).ready(function ()
{
    var spread =
    new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
    var sheet = spread.getActiveSheet();
    sheet.getCell(0, 0).formatter("0.00_);(0.00)");
    sheet.getCell(1, 0).formatter("0.00_);(0.00)");
    sheet.getCell(0, 1).formatter("0.00_);(0.00)");
    sheet.getCell(1, 1).formatter("0.00_);(0.00)");
   
    // Textプロパティに値を設定します。
    sheet.getCell(0, 0).text("10");
   
    // SetTextメソッドを呼び出して値を設定します。
    sheet.setText(1, 0, "10");
   
    // Valueプロパティに値を設定します。
    sheet.getCell(0, 1).value(10);
   
    // SetValueメソッドを呼び出して値を設定します。
    sheet.setValue(1, 1, 10);

    //セル値を取得します。
    $("#button1").click(function()
     {
       alert("Obtaining cell values by referring to Text property: " +
       sheet.getCell(0, 0).text() + "\n" +
       "Obtaining cell values by calling GetText method: " + sheet.getText(1, 0) + "\n" +
       "Obtaining cell values by referring to Value property: " +
       sheet.getCell(0, 1).value() + "\n" +
       "Obtaining cell values by calling GetValue method: " + sheet.getValue(1, 1));
     });

});

セルのデフォルト値の取得と設定

SpreadJSでは、セルに値が存在しない場合、そのセルは空白として表示されます。このような場合は、セルのデフォルト値を設定することができます。任意の値や数式をセルのデフォルト値として設定できます。セルに数式をデフォルト値として設定すると、そのセルは通常の数式と同じように動作します。また、デフォルト値はワークシート内のビューポート領域にのみ設定されます。ただし、行全体や列全体にデフォルト値を設定することはできません。

セルが空白であり、既にデフォルト値が設定されている場合、以下の条件が適用されることに注意してください。

再計算時にそのセルのデフォルト値または数式のみが含まれます。
編集モードでは、セルにデフォルト値またはデフォルトの数式を使用して再計算された値が表示されます。
Excel へのエクスポートする際、デフォルト値がセルの値としてエクスポートされます。
ユーザーはセルの値を変更できますが、デフォルト値は上書きされません。

次のメソッドを使用して、セルのデフォルト値を設定または取得できます。

GC.Spread.Sheets.CellRange クラスの defaultValue メソッドを使用します。

// defaultValue() メソッドを使用してセルのデフォルト値・数式を設定または取得します。
activeSheet.getCell(0, 0).defaultValue(20);
console.log("DefaultValue of cell(0,0) using defaulValue method: " + activeSheet.getCell(0, 0).defaultValue());
activeSheet.getCell(0, 1).defaultValue("=IF(A1>10, A1*3)");
console.log("DefaultValue of cell(0,1) using defaulValue method: " + activeSheet.getCell(0, 1).defaultValue());

GC.Spread.Sheets.WorkSheet クラスの getDefaultValue および setDefaultValueメソッドを使用します。

// Set or get the default value/formula of a cell using setDefaultValue or getDefaultValue() method
activeSheet.setDefaultValue(0, 0, 20);
activeSheet.setDefaultValue(1, 0, 40);
console.log("DefaultValue of cell(0,0) using getDefaultValue method is: " + activeSheet.getDefaultValue(0, 0));
activeSheet.setDefaultValue(2, 0, "=SUM(A1,A2)");
console.log("DefaultValue of cell(2,0) using getDefaultValue method is: " + activeSheet.getDefaultValue(2, 0));

さらに、セルのデフォルト値をコピーするには、CopyToOptions 列挙体の defaultValueオプションを使用することができます。

// CopyToOption 列挙体を使用して、セルのデフォルト値・数式をコピーします。
activeSheet.getCell(0, 0).defaultValue("2048");
activeSheet.copyTo(0, 0, 1, 1, 2, 2, GC.Spread.Sheets.CopyToOptions.defaultValue);
activeSheet.getCell(0, 1).defaultValue("=A1 + 1000");
activeSheet.copyTo(0, 1, 1, 1, 2, 2, GC.Spread.Sheets.CopyToOptions.defaultValue);

type=warning
メモ：SpreadJSでは、数式をセルのデフォルト値として設定する場合、動的配列と配列数式をサポートしていません。このシナリオでは、セルには左上の値だけが表示されます。

デザイナの使用

デザイナを使用して、セルのデフォルト値を設定することができます。セルのコンテキストメニューから［デフォルト値...］オプションを選択します。これにより、［デフォルト値ダイアログ］ボックスが開き、選択したセルのデフォルト値を設定できます。

次のGIFは、デザイナを使用してセルのデフォルト値を設定する方法を示します。

SetDefaultCellValue

アクティブセルの設定

次のサンプルコードは、アクティブセルを設定します。

$("#button1").click(function ()
{  
     // セル(3,3)をアクティブセルとして設定します。
     activeSheet.setActiveCell(3, 3);
 });

アクティブセルを特定の位置に設定

Active cell

次のサンプルコードは、アクティブセルの位置を設定します。

$("#button1").click(function ()
{
   // セル(3,3)をアクティブセルとして設定します。
   sheet.setActiveCell(3, 3);
    
   // アクティブセルを左上に表示します。
   sheet.showCell(3, 3,
    GC.Spread.Sheets.VerticalPosition.top,
    GC.Spread.Sheets.HorizontalPosition.left);
});

複数の選択領域の作成

Multiple selections in a worksheet

次のサンプルコードは、複数の選択領域を作成します。

$(document).ready(function ()
{
    var spread =
    new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
    var sheet = spread.getActiveSheet();
   
    // 複数のセル範囲の選択を有効にします。
    sheet.selectionPolicy(GC.Spread.Sheets.SelectionPolicy.MultiRange);
   
    // 2つの選択領域を作成します。
    sheet.addSelection(0, 0, 2, 2);
    sheet.addSelection(3, 3, 2, 2);
});

選択されたセル範囲の取得

次のサンプルコードは、複数の選択領域を取得します。

window.onload = function()
{
   var spread =
   new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
   var activeSheet = spread.getActiveSheet();
   activeSheet.setRowCount(5);
   activeSheet.setColumnCount(5);
   $("#button1").click(function()
   {       
     // 選択領域を取得します。
     var selectedRanges = spread.getActiveSheet().getSelections();
     for(var i = 0; i < selectedRanges.length; i++)
        {
             console.log("---------------------------");
             console.log("Using Range class");
             console.log("-------------------------");
             console.log("Selected top row index: " + selectedRanges[i].row);
             console.log("Number of selected rows: " + selectedRanges[i].rowCount);
             console.log("Selected first column index: " + selectedRanges[i].col);
             console.log("Number of selected columns: " + selectedRanges[i].colCount);
         }
   });
}

条件付き書式の設定

次のサンプルコードは、条件付き書式を設定します。

window.onload = function()
{
  var spread =
  new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
  var activeSheet = spread.getActiveSheet();

  // それぞれの条件付きスタイルを作成します。
  var styleBlue = new GC.Spread.Sheets.Style();
  var stylePink = new GC.Spread.Sheets.Style();
  var styleLime = new GC.Spread.Sheets.Style();
  var styleYellow = new GC.Spread.Sheets.Style();
  var styleEmpty = new GC.Spread.Sheets.Style();
  styleBlue.backColor = "blue";
  styleBlue.foreColor = "white";
  stylePink.backColor = "pink";
  styleLime.backColor = "lime";
  styleYellow.backColor = "yellow";
  styleEmpty.backColor = undefined;
  styleEmpty.foreColor = undefined;

  // それぞれのセルに条件付き書式を設定します。
  activeSheet.conditionalFormats.addCellValueRule(
  GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.EqualsTo,
  0, undefined, styleEmpty,
  [new GC.Spread.Sheets.Range(1, 1, 1, 1)]);
  activeSheet.conditionalFormats.addCellValueRule(
  GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.LessThan,
  10,undefined,styleBlue,
  [new GC.Spread.Sheets.Range(1, 1, 1, 1)]);
  activeSheet.conditionalFormats.addCellValueRule(
  GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.Between,
  20,50,stylePink,
  [new GC.Spread.Sheets.Range(2, 1, 1, 1)]);
  activeSheet.conditionalFormats.addCellValueRule(
  GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.Between,
  50,80,styleLime,
  [new GC.Spread.Sheets.Range(3, 1, 1, 1)]);
  activeSheet.conditionalFormats.addCellValueRule(
  GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.GreaterThan,
  80, undefined, styleYellow,
  [new GC.Spread.Sheets.Range(4, 1, 1, 1)]);
  activeSheet.getCell(2, 1).value(25);
  activeSheet.getCell(3, 1).value(77);
  activeSheet.getCell(4, 1).value(88);
}

セルの位置とサイズの取得

次のサンプルコードは、セルの位置とサイズを取得します。

spread.getActiveSheet().bind(GC.Spread.Sheets.Events.CellClick, function (e, info)
{
     if(info.sheetArea ===GC.Spread.Sheets.SheetArea.viewport)
   {
     console.log("Clicked cell index (" + info.row + "," + info.col + ")");
    
     // 指定のインデックスに位置する標準セルの座標情報を取得します。

     var cellRect = spread.getActiveSheet().getCellRect(info.row, info.col);
     console.log("X coordinate:" + cellRect.x);
     console.log("Y coordinate:" + cellRect.y);
     console.log("Cell width:" + cellRect.width);
     console.log("Cell height:" + cellRect.height);
     }
 });

マウスでクリックされたセルのインデックスの取得

次のサンプルコードは、セルのインデックスを取得します。

var spread = new GC.Spread.Sheets.Workbook($("#ss")[0]);
var activeSheet = spread.getActiveSheet();
$("#ss").click(function (e)
{
    
 // マウスでクリックされた、固定行/列または行/列ヘッダ以外の標準セルに対し、セルインデックスを取得します。

     var offset = $("#ss").offset();
     var x = e.pageX - offset.left;
     var y = e.pageY - offset.top;
     var target = spread.getActiveSheet().hitTest(x, y);
     if(target &&
     (target.rowViewportIndex === 0 || target.rowViewportIndex === 1) &&
     (target.colViewportIndex === 0 || target.colViewportIndex === 1))
     {
         console.log("Row index of mouse-clicked cells: " + target.row);
         console.log("Column index of mouse-clicked cells: " + target.col);
     }
});