[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

스타일

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와 해당 스타일 속성입니다:

플래그 적용

영향 받는 속성

applyNumberFormat

formatter

applyFont

foreColor

font

themeFont

textDecoration

applyFill

backColor

applyBorder

borderLeft

boderRight

borderTop

borderBottom

diagonalDown

diagonalUp

applyAlignment

vAlign

hAlign

textIndent

wordWrap

isVerticalText

applyProtection

locked

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