표 스타일 설정
SpreadJS는 사용자가 스프레드시트에서 작업할 때 표에 다양한 스타일을 구성하고 적용하여 표를 사용자 정의할 수 있도록 지원합니다.
일부 스타일 속성은 기본적으로 표시되지 않거나 스타일 설정이 없는 영역에 적용됩니다. 예를 들어, lastFooterCellStyle 은 showFooter가 true로 설정되지 않으면 표시되지 않습니다.
다음 표는 표 스타일이 표에 표시되기 위해 true로 설정되어야 하는 Table 메서드를 보여줍니다.
표 스타일 설정
사용자는 전체 표에 대해 기본 스타일을 사용할 수 있으며, 행 또는 열과 같은 특정 영역에 대해 스타일을 설정할 수도 있습니다. 기본 제공 스타일 목록은 TableThemes 클래스를, 특정 영역에 설정할 수 있는 스타일은 TableThemes 클래스를 참조하세요.
아래 이미지는 다크 테마가 적용된 표에 기본 스타일을 적용한 예시입니다.
다음 코드 샘플은 표를 생성하고 기본 스타일을 설정하는 방법을 보여줍니다:
activeSheet.tables.add("Table1", 0, 0, 3, 3, GC.Spread.Sheets.Tables.TableThemes.dark1);
activeSheet.getCell(0,0).text("Name");
activeSheet.getCell(0,1).text("Value");
activeSheet.getCell(0,2).text("T/F");
activeSheet.getCell(1,0).text("AW");
activeSheet.getCell(1,1).text("5");
activeSheet.getCell(1,2).text("T");표 요약 행 스타일 설정
사용자는 새 표 스타일을 정의하고 배경색, 글꼴 색, 테두리, 글꼴 등의 속성을 설정하여 사용자 지정 표 요약 행 스타일을 쉽게 구성할 수 있습니다.
아래 이미지는 표 스타일과 함께 사용자 정의 요약 행 스타일이 적용된 예시입니다.
다음 코드 샘플은 표 요약 행에 사용자 정의 스타일을 적용하는 예를 보여줍니다:
window.onload = function(){
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
var activeSheet = spread.getActiveSheet();
// 데이터 추가
for (var col = 1; col < 6; col++) {
for (var row = 2; row < 11; row++) {
activeSheet.setValue(row, col, row + col);
}
}
var tableStyle = new GC.Spread.Sheets.Tables.TableTheme();
var thinBorder = new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.dotted);
tableStyle.wholeTableStyle(new GC.Spread.Sheets.Tables.TableStyle("aliceblue", "green", "bold 10pt arial", thinBorder, thinBorder, thinBorder, thinBorder, thinBorder, thinBorder, GC.Spread.Sheets.TextDecorationType.none));
var tStyleInfo = new GC.Spread.Sheets.Tables.TableStyle();
tStyleInfo.backColor = "green";
tStyleInfo.foreColor = "red";
tStyleInfo.borderBottom = new GC.Spread.Sheets.LineBorder("green", GC.Spread.Sheets.LineStyle.thin);
tStyleInfo.borderLeft = new GC.Spread.Sheets.LineBorder("yellow", GC.Spread.Sheets.LineStyle.medium);
tStyleInfo.borderTop = new GC.Spread.Sheets.LineBorder("green", GC.Spread.Sheets.LineStyle.thin);
tStyleInfo.borderRight = new GC.Spread.Sheets.LineBorder("green", GC.Spread.Sheets.LineStyle.thin);
tStyleInfo.font = "bold 11pt arial";
tableStyle.footerRowStyle(tStyleInfo);
var sTable = activeSheet.tables.add("Custom", 1, 1, 10, 5, tableStyle);
sTable.showFooter(true);
// 요약 행 값 설정
sTable.setColumnValue(0, "Total");
// 요약 행 수식 설정
sTable.setColumnFormula(4, "SUM(F3:F11)");
}표 요약 행 드롭다운 표시
요약 행 스타일 설정 외에도, useFooterDropDownList 메서드를 사용하여 표 요약 행에 드롭다운 목록을 표시할 수 있습니다. 해당 목록은 드롭다운 표시기를 클릭할 때 표시되며, "None", "Average", "Count", "Count Numbers", "Max", "Min", "Sum", "StdDev", "Var" 등 다양한 옵션이 포함됩니다.
아래 이미지는 요약 행 드롭다운이 표시된 예시입니다.
다음 코드 샘플은 스프레드시트에서 표 요약 행 드롭다운 목록을 표시하는 방법을 보여줍니다.
// Spread 초기화
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
// activesheet 가져오기
var activeSheet = spread.getActiveSheet();
// 표 추가
var table = activeSheet.tables.add("table1", 1, 1, 4, 4, GC.Spread.Sheets.Tables.TableThemes.light1);
// showFooter 메서드를 사용하여 표의 요약 행을 활성화
table.showFooter(true);
// useFooterDropDownList를 true로 설정하여 표 요약 행에 드롭다운 목록 표시
table.useFooterDropDownList(true);
activeSheet.getCell(1, 1).text("First Name");
activeSheet.getCell(1, 2).text("Last Name");
activeSheet.getCell(1, 3).text("Score");
activeSheet.getCell(1, 4).text("Position");
activeSheet.getCell(2, 1).text("Alexa");
activeSheet.getCell(2, 2).text("Wilder");
activeSheet.getCell(2, 3).text("90");
activeSheet.getCell(2, 4).text("Web Developer");
activeSheet.getCell(3, 1).text("Victor");
activeSheet.getCell(3, 2).text("Wooten");
activeSheet.getCell(3, 3).text("70");
activeSheet.getCell(3, 4).text(".NET Developer");
activeSheet.getCell(4, 1).text("Ifeoma");
activeSheet.getCell(4, 2).text("Mays");
activeSheet.getCell(4, 3).text("85");
activeSheet.getCell(4, 4).text("Sales Manager");
for (var i = 0; i < 3; i++)
activeSheet.setColumnWidth(i, 90.0, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setColumnWidth(4, 120);