[]
SpreadJS에서는 Style 객체를 사용하여 셀, 셀 범위, 행, 열 또는 시트에 적용할 수 있는 스타일을 생성할 수 있습니다. 또한 Style 객체를 사용하는 사용자 지정 이름 스타일(named style)을 생성할 수도 있습니다. 스타일에는 테두리, 색상, 글꼴 등의 설정을 포함할 수 있습니다.
셀 스타일은 우선순위에 따라 병합된 설정으로 구성됩니다. 셀에 설정된 스타일이 가장 높은 우선순위를 가지며, 그 다음은 셀이 속한 행의 스타일, 열의 스타일, 시트의 기본 스타일 순입니다.
setStyle 및 setStyleName 메서드를 사용하여 셀 및 셀 범위에 스타일 객체를 할당할 수 있습니다. 전체 행 또는 전체 열을 지정하려면 -1
값을 사용하면 됩니다.
setStyle 메서드를 사용하여 스타일을 생성하고 스프레드시트의 셀에 적용할 수 있습니다.
예를 들어, 빨간색 배경색과 다른 스타일의 선 테두리로 구성된 스타일을 정의하고 워크시트 셀에 적용할 수 있습니다.
다음 코드 샘플은 setStyle
메서드를 사용하여 셀에 스타일을 지정하는 방법을 보여줍니다.
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 메서드를 사용하여 스프레드시트의 셀에 기본 스타일을 지정할 수 있습니다. 모든 셀은 setDefaultStyle 메서드로 정의된 동일한 스타일을 따릅니다.
다음 코드 샘플은 setDefaultStyle 메서드를 사용하는 방법을 보여줍니다.
//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);
}
}
CellRange
의 setStyle 메서드를 사용하여 스타일을 지정하고 셀 범위에 적용할 수 있습니다. 예를 들어, 아래 그림은 두 개의 서로 다른 스타일이 셀 범위에 설정된 경우를 보여줍니다.
다음 코드 샘플은 셀 범위에 스타일을 설정하는 방법을 보여줍니다.
Ask ChatGPT
// 셀 범위에 setStyle 메서드 사용
let style1 = new GC.Spread.Sheets.Style();
style1.formatter = "#,##0.00";
style1.backColor = "rgb(124,200,208)";
style1.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style1.font = "bold 12px sans-serif";
style1.borderLeft = new GC.Spread.Sheets.LineBorder("gray", GC.Spread.Sheets.LineStyle.double);
style1.borderTop = new GC.Spread.Sheets.LineBorder("gray", GC.Spread.Sheets.LineStyle.double);
style1.borderRight = new GC.Spread.Sheets.LineBorder("gray", GC.Spread.Sheets.LineStyle.double);
style1.borderBottom = new GC.Spread.Sheets.LineBorder("gray", GC.Spread.Sheets.LineStyle.double);
activeSheet.getRange("I2:J2").setStyle(style1);
let style2 = new GC.Spread.Sheets.Style();
style2.backColor = "rgb(218, 241, 243)";
style2.borderLeft = new GC.Spread.Sheets.LineBorder("gray", GC.Spread.Sheets.LineStyle.double);
style2.borderTop = new GC.Spread.Sheets.LineBorder("gray", GC.Spread.Sheets.LineStyle.double);
style2.borderRight = new GC.Spread.Sheets.LineBorder("gray", GC.Spread.Sheets.LineStyle.double);
style2.borderBottom = new GC.Spread.Sheets.LineBorder("gray", GC.Spread.Sheets.LineStyle.double);
activeSheet.getRange("I3:J7").setStyle(style2);
사용자 지정 명명된 스타일(named style)을 생성하고 addNamedStyle 메서드를 사용하여 시트 또는 스프레드에 추가할 수 있습니다. 스타일 설정을 변경하거나 이름 스타일을 제거할 수 있습니다. Worksheet 또는 CellRange 클래스의 setStyleName 메서드를 사용하여 셀 또는 셀 범위에 스타일을 사용할 수 있습니다. 전체 행 또는 열을 지정하려면 -1
을 사용하세요.
명명된 스타일은 동일한 스타일이 여러 셀에서 반복적으로 사용되는 경우 유용합니다. JSON 데이터 소스 또는 Excel 가져오기/내보내기와 함께 사용할 때도 적은 데이터로 스타일을 유지할 수 있습니다.
다음 코드 샘플은 이름 스타일을 사용하여 테이블 헤더와 테이블 데이터에 스타일을 설정하는 방법을 보여줍니다.
// 셀에 setStyleName 메서드 사용
let styleCell = new GC.Spread.Sheets.Style();
styleCell.name = "header_style";
styleCell.font = "bold 14px sans-serif";
styleCell.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
styleCell.backColor = "rgb(255, 225, 0)";
styleCell.borderLeft = new GC.Spread.Sheets.LineBorder("purple", GC.Spread.Sheets.LineStyle.hair);
styleCell.borderTop = new GC.Spread.Sheets.LineBorder("purple", GC.Spread.Sheets.LineStyle.hair);
styleCell.borderRight = new GC.Spread.Sheets.LineBorder("purple", GC.Spread.Sheets.LineStyle.hair);
styleCell.borderBottom = new GC.Spread.Sheets.LineBorder("purple", GC.Spread.Sheets.LineStyle.hair);
activeSheet.addNamedStyle(styleCell);
activeSheet.setStyleName(1, 1, "header_style");
activeSheet.setStyleName(1, 2, "header_style");
// 셀 범위에 setStyleName 메서드 사용
let style = new GC.Spread.Sheets.Style();
style.name = "score_style";
style.font = "italic 12px sans-serif";
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style.backColor = "rgb(255,149,126)";
style.borderLeft = new GC.Spread.Sheets.LineBorder("red", GC.Spread.Sheets.LineStyle.hair);
style.borderTop = new GC.Spread.Sheets.LineBorder("red", GC.Spread.Sheets.LineStyle.hair);
style.borderRight = new GC.Spread.Sheets.LineBorder("red", GC.Spread.Sheets.LineStyle.hair);
style.borderBottom = new GC.Spread.Sheets.LineBorder("red", GC.Spread.Sheets.LineStyle.hair);
activeSheet.addNamedStyle(style);
activeSheet.getRange("B3:C8").setStyleName("score_style");
정의된 이름 스타일에서 서로 다른 속성의 효과를 제어하기 위해 적용 플래그(apply flags)를 설정할 수도 있습니다. 이를 통해 서로 다른 포맷 옵션에 영향을 주지 않으면서 하나의 셀에 둘 이상의 명명된 스타일을 설정할 수 있습니다.
아래 표는 GC.Spread.Sheets.Style 에서 사용할 수 있는 모든 apply flag와 해당 스타일 속성입니다:
플래그 적용 | 영향 받는 속성 |
---|---|
|
|
|
|
|
|
|
|
|
|
|
|
apply flag의 기본값은 true
로 작동하며, 해당 속성 값이 이름 스타일에 정의되어 있다면 JSON으로 내보낼 때 이 속성도 함께 저장됩니다.
예를 들어, 하나의 셀에 "Font style" 이름 스타일은 글꼴 속성을 제어하고, "Align style" 이름 스타일은 정렬 속성을 제어하도록 두 가지 이름 스타일을 함께 적용할 수 있습니다. 다음 코드 샘플은 이를 구현하는 방법을 보여줍니다.
var style = new GC.Spread.Sheets.Style();
style.name = "Font style";
style.font = "Verdana";
style.backColor = "red";
style.formatter = "yyyy/mm/dd";
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style.applyFill = false;
style.applyAlignment = false;
spread.addNamedStyle(style);
var style2 = new GC.Spread.Sheets.Style();
style2.name = "Align style";
style2.font = "Calibri";
style2.backColor = "yellow";
style2.formatter = "dd/mm/yy";
style2.hAlign = GC.Spread.Sheets.HorizontalAlign.right;
style2.wordWrap = false;
style2.applyFont = false;
style2.applyNumberFormat = false;
spread.addNamedStyle(style2);
//do something
activeSheet.setStyleName(0, 1, "Font style");
activeSheet.setStyleName(0, 1, "Align style");
//another usage
activeSheet.setStyle(0, 0, "Font style");
activeSheet.setStyle(0, 0, "Align style");