セルの操作

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));
     });

});

アクティブセルの設定

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

$("#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);
     }
});