スタイルの設定

Styleオブジェクトを使用してスタイルを作成できます。また、Styleオブジェクトを使用する、独自の名前付きスタイルを作成することもできます。

スタイルには、罫線、色、フォントなどの設定を含めることができます。スタイルを設定できるのは、セル、行、列、およびシートです。

セルのスタイルは、優先順位に基づいて適用された各種設定の組み合わせです。セルに対するスタイルは、優先度が最高となります。次に優先度が高いのは、このセルが属する行のスタイルであり、このセルが属する列のスタイルがその次、最後はシートのデフォルトスタイルです。

Styleオブジェクトを割り当てるには、setStyleメソッドを使用します。行全体または列全体を指定するには、「-1」を使用します。

独自の名前付きスタイルを作成して、シートまたはSpreadに追加するには、addNamedStyleメソッドを使用します。スタイル設定を変更することも、名前付きスタイルを削除することもできます。セルにスタイルを適用するには、setStyleNameメソッドを使用します。行全体または列全体を指定するには、「-1」を使用します。

名前付きスタイルは、1つのスタイルを何度も使用する場合、または多数のセル内で使用する場合に便利です。名前付きスタイルは、使用するデータ量が少なくて済むため、JSONデータストアやExcelインポートおよびエクスポートでの使用に適します。

次の図は、セルB2に適用されたスタイルを示します。

コードの使用

次のサンプルコードは、setStyleメソッドを使用して、スタイルをセルに割り当てます。

JavaScript	コードのコピー
var style = new GC.Spread.Sheets.Style(); style.backColor = "red"; style.borderLeft = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium); style.borderTop = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium); style.borderRight = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium); style.borderBottom = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium); activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport); //行 //activeSheet.setStyle(1,-1,style,GC.Spread.Sheets.SheetArea.viewport); //列 //activeSheet.setStyle(-1,2,style,GC.Spread.Sheets.SheetArea.viewport);

JavaScript

コードのコピー

var style = new GC.Spread.Sheets.Style();
style.backColor = "red";
style.borderLeft = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
style.borderTop = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
style.borderRight = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
style.borderBottom = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
//行
//activeSheet.setStyle(1,-1,style,GC.Spread.Sheets.SheetArea.viewport);
//列
//activeSheet.setStyle(-1,2,style,GC.Spread.Sheets.SheetArea.viewport);

コードの使用

次のサンプルコードは、setDefaultStyleメソッドを使用します。

JavaScript	コードのコピー
//setDefaultStyle activeSheet.setRowCount(5, GC.Spread.Sheets.SheetArea.viewport); activeSheet.setColumnCount(5, GC.Spread.Sheets.SheetArea.viewport); //デフォルトのスタイルを設定します。 var defaultStyle = new GC.Spread.Sheets.Style(); defaultStyle.backColor = "LemonChiffon"; defaultStyle.foreColor = "Red"; defaultStyle.formatter = "0.00"; defaultStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center; defaultStyle.borderLeft = new GC.Spread.Sheets.LineBorder("Green",GC.Spread.Sheets.LineStyle.medium); defaultStyle.borderTop = new GC.Spread.Sheets.LineBorder("Green",GC.Spread.Sheets.LineStyle.medium); defaultStyle.borderRight = new GC.Spread.Sheets.LineBorder("Green",GC.Spread.Sheets.LineStyle.medium); defaultStyle.borderBottom = new GC.Spread.Sheets.LineBorder("Green",GC.Spread.Sheets.LineStyle.medium); activeSheet.setDefaultStyle(defaultStyle, GC.Spread.Sheets.SheetArea.viewport); var rowCount = activeSheet.getRowCount(); var colCount = activeSheet.getColumnCount(); for(var i = 0; i < rowCount; i++){ for(var j = 0; j < colCount; j++){ activeSheet.setValue(i, j, i+j, GC.Spread.Sheets.SheetArea.viewport); } }

JavaScript

コードのコピー

//setDefaultStyle
activeSheet.setRowCount(5, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setColumnCount(5, GC.Spread.Sheets.SheetArea.viewport);

//デフォルトのスタイルを設定します。
var defaultStyle = new GC.Spread.Sheets.Style();
defaultStyle.backColor = "LemonChiffon";
defaultStyle.foreColor = "Red";
defaultStyle.formatter = "0.00";
defaultStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
defaultStyle.borderLeft = new GC.Spread.Sheets.LineBorder("Green",GC.Spread.Sheets.LineStyle.medium);
defaultStyle.borderTop = new GC.Spread.Sheets.LineBorder("Green",GC.Spread.Sheets.LineStyle.medium);
defaultStyle.borderRight = new GC.Spread.Sheets.LineBorder("Green",GC.Spread.Sheets.LineStyle.medium);
defaultStyle.borderBottom = new GC.Spread.Sheets.LineBorder("Green",GC.Spread.Sheets.LineStyle.medium);
activeSheet.setDefaultStyle(defaultStyle, GC.Spread.Sheets.SheetArea.viewport);

var rowCount = activeSheet.getRowCount();
var colCount = activeSheet.getColumnCount();
for(var i = 0; i < rowCount; i++){
     for(var j = 0; j < colCount; j++){
         activeSheet.setValue(i, j, i+j, GC.Spread.Sheets.SheetArea.viewport);
     }
}

コードの使用

次のサンプルコードでは、次の図のような結果となる各スタイルをセル、行、および列に設定します。

JavaScript	コードのコピー
activeSheet.setRowCount(15); activeSheet.setColumnCount(14); var ns = GC.Spread.Sheets; var style = activeSheet.getDefaultStyle(); style.backColor = "lightgray"; style.foreColor = "purple"; style.borderLeft = new ns.LineBorder("red", ns.LineStyle.hair); style.borderTop = new ns.LineBorder("red", ns.LineStyle.hair); style.borderRight = new ns.LineBorder("red", ns.LineStyle.hair); style.borderBottom = new ns.LineBorder("red", ns.LineStyle.hair); 　var cell = activeSheet.getRange(3, 3, 6, 6); cell.value(10); cell.formatter("0.0%"); cell.backColor("lightgreen"); cell.borderLeft(new ns.LineBorder("gray", ns.LineStyle.double)); cell.borderTop(new ns.LineBorder("gray", ns.LineStyle.double)); cell.borderRight(new ns.LineBorder("gray", ns.LineStyle.double)); cell.borderBottom(new ns.LineBorder("gray", ns.LineStyle.double)); var row = activeSheet.getRange(2, -1, 8, -1); row.backColor("lightblue"); row.borderLeft(new ns.LineBorder("green", ns.LineStyle.dashed)); row.borderRight(new ns.LineBorder("green", ns.LineStyle.dashed)); var col = activeSheet.getRange(-1, 2, -1, 8); col.backColor("pink"); col.borderTop(new ns.LineBorder("blue", ns.LineStyle.dashed)); col.borderBottom(new ns.LineBorder("blue", ns.LineStyle.dashed));

JavaScript

コードのコピー

activeSheet.setRowCount(15);
activeSheet.setColumnCount(14);
var ns = GC.Spread.Sheets;
var style = activeSheet.getDefaultStyle();
style.backColor = "lightgray";
style.foreColor = "purple";
style.borderLeft = new ns.LineBorder("red", ns.LineStyle.hair);
style.borderTop = new ns.LineBorder("red", ns.LineStyle.hair);
style.borderRight = new ns.LineBorder("red", ns.LineStyle.hair);
style.borderBottom = new ns.LineBorder("red", ns.LineStyle.hair);

　var cell = activeSheet.getRange(3, 3, 6, 6);
cell.value(10);
cell.formatter("0.0%");
cell.backColor("lightgreen");
cell.borderLeft(new ns.LineBorder("gray", ns.LineStyle.double));
cell.borderTop(new ns.LineBorder("gray", ns.LineStyle.double));
cell.borderRight(new ns.LineBorder("gray", ns.LineStyle.double));
cell.borderBottom(new ns.LineBorder("gray", ns.LineStyle.double));

var row = activeSheet.getRange(2, -1, 8, -1);
row.backColor("lightblue");
row.borderLeft(new ns.LineBorder("green", ns.LineStyle.dashed));
row.borderRight(new ns.LineBorder("green", ns.LineStyle.dashed));

var col = activeSheet.getRange(-1, 2, -1, 8);
col.backColor("pink");
col.borderTop(new ns.LineBorder("blue", ns.LineStyle.dashed));
col.borderBottom(new ns.LineBorder("blue", ns.LineStyle.dashed));

コードの使用

次のサンプルコードは、名前付きスタイルを使用して、いくつかのセルにスタイルを設定します。スタイルを削除するには、ボタンを使用します。

JavaScript	コードのコピー
<input type="button" id="button1" value="button1"/> var namedStyle = new GC.Spread.Sheets.Style(); namedStyle.name = "style1"; namedStyle.backColor = "green"; activeSheet.addNamedStyle(namedStyle); activeSheet.setStyleName(1, 1, "style1"); // セル(1,1)の背景色は緑となります。 activeSheet.setStyleName(2, 1, "style1"); var style = activeSheet.getNamedStyle("style1"); style.foreColor = "red"; // 名前付きスタイルの前景色を赤とします。 activeSheet.repaint(); // セル(1,1)およびセル(2,1)の前景色は赤となります。 activeSheet.getCell(1,1).value("test"); $("#button1").click(function () { activeSheet.removeNamedStyle("style1"); });

JavaScript

コードのコピー

var namedStyle = new GC.Spread.Sheets.Style();
namedStyle.name = "style1";
namedStyle.backColor = "green";
activeSheet.addNamedStyle(namedStyle);
activeSheet.setStyleName(1, 1, "style1"); // セル(1,1)の背景色は緑となります。
activeSheet.setStyleName(2, 1, "style1");

var style = activeSheet.getNamedStyle("style1");
style.foreColor = "red"; // 名前付きスタイルの前景色を赤とします。
activeSheet.repaint(); // セル(1,1)およびセル(2,1)の前景色は赤となります。
activeSheet.getCell(1,1).value("test");

$("#button1").click(function () {
activeSheet.removeNamedStyle("style1");
});