SpreadJS製品ヘルプ
スタイルの設定
機能 > セル > スタイルの設定

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

コードの使用

次のサンプルコードは、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
コードのコピー

 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");
     });
関連トピック
色
オブジェクトの継承
Style クラス
［ホーム］タブ
getNamedStyle メソッド
removeNamedStyle メソッド

 

 

Copyright © 2016 GrapeCity inc. All rights reserved.