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

셀 스타일 변경

리포트를 생성할 때, 리포트의 UI를 향상시키기 위해 일부 셀에 배경색이나 테두리를 설정하는 것이 중요합니다. 리포트 시트(ReportSheet)에서는 셀의 스타일이 해당 템플릿 셀의 스타일과 일치합니다. 강조해야 하는 콘텐츠에 대해 템플릿 시트(TemplateSheet)에서 셀 스타일을 설정할 수 있으며, 확장된 셀이든 확장되지 않은 셀이든 설정이 가능합니다.

참고:

  • 템플릿 시트에서 확장되지 않은 셀에 스타일을 설정하면, 리포트 시트(ReportSheet)의 DataEntryPreview 렌더 모드에서는 스타일이 적용된 영역의 범위는 변경되지 않지만, 스타일이 표시되는 위치는 오프셋(offset)됩니다.

  • 템플릿 시트에서 확장된 셀에 스타일을 설정하면, 리포트 시트(ReportSheet)의 DataEntryPreview 렌더 모드에서는 스타일이 적용되는 영역의 범위가 변경되며, 스타일이 표시되는 위치도 오프셋됩니다.

다음 코드 샘플은 서로 다른 셀 스타일을 설정하는 방법을 보여줍니다:

// 헤더 스타일
const headerStyle = new GC.Spread.Sheets.Style();
headerStyle.backColor = '#bfdbd8';
headerStyle.foreColor = '#424242';
headerStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
headerStyle.vAlign = GC.Spread.Sheets.HorizontalAlign.center;
headerStyle.font = '12px Maine';

// Column 1 스타일
const style1 = new GC.Spread.Sheets.Style();
style1.vAlign = GC.Spread.Sheets.VerticalAlign.center;
style1.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style1.backColor = "lightgrey";

// Column 2 스타일
const style2 = new GC.Spread.Sheets.Style();
style2.vAlign = GC.Spread.Sheets.VerticalAlign.center;
style2.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style2.borderTop = new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin);
style2.borderBottom = new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin);
style2.font = '12px Maine';
style2.backColor = '#edebeb';

// Column 3 스타일
const style3 = new GC.Spread.Sheets.Style();
style3.backColor = 'whitesmoke';
style3.borderLeft = new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin);
style3.borderTop = new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin);
style3.borderRight = new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin);
style3.borderBottom = new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin);

// 스타일 설정
templateSheet.getRange('A1:C1').setStyle(headerStyle);

// 템플릿 시트에서 설정한 스타일은 현재 셀의 확장과 함께 적용됨
templateSheet.getRange('A2').setStyle(style1);
templateSheet.getRange('B2').setStyle(style2);
templateSheet.getRange('C2').setStyle(style3);

위 코드의 출력은 아래와 같습니다:


image