헤더
SpreadJS에서는 셀 머리글에 다양한 작업을 수행할 수 있습니다.
머리글 높이 및 너비 설정
다음 예제에서는 열 머리글 높이와 행 머리글 너비를 변경합니다.
document.addEventListener("DOMContentLoaded", function () {
// Spread 초기화
var spread =new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
// 활성 시트 가져오기
var sheet = spread.getActiveSheet();
// 열 머리글 높이를 변경합니다.
sheet.setRowHeight(0, 90.0,GC.Spread.Sheets.SheetArea.colHeader);
// 행 머리글 너비를 변경합니다.
sheet.setColumnWidth(0, 90.0,GC.Spread.Sheets.SheetArea.rowHeader);
});머리글 텍스트 설정
다음 예제에서는 머리글에 사용자 지정 텍스트를 입력합니다.
document.addEventListener("DOMContentLoaded", function () {
// Spread 초기화
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
// 활성 시트 가져오기
var sheet = spread.getActiveSheet();
// 머리글에 원하는 문자열 설정
sheet.setValue(0, 1, "Column Header", GC.Spread.Sheets.SheetArea.colHeader);
sheet.setValue(1, 0, "Row Header", GC.Spread.Sheets.SheetArea.rowHeader);
sheet.setColumnWidth(1, 120.0,GC.Spread.Sheets.SheetArea.colHeader);
sheet.setColumnWidth(0, 90.0,GC.Spread.Sheets.SheetArea.rowHeader);
});머리글 색 설정
다음 예제에서는 머리글의 배경색과 전경색을 설정합니다.
document.addEventListener("DOMContentLoaded", function () {
// Spread 초기화
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
// 활성 시트 가져오기
var sheet = spread.getActiveSheet();
// 전체 열 머리글의 배경색과 전경색을 설정합니다.
var row = sheet.getRange(0, -1, 1, -1, GC.Spread.Sheets.SheetArea.colHeader);
row.backColor("Red");
row.foreColor("White");
// 두 번째 행 머리글의 배경색을 설정합니다.
sheet.getCell(1, 0, GC.Spread.Sheets.SheetArea.rowHeader).backColor("Yellow");
});머리글에 둥근 테두리 설정
머리글의 행 및 열 영역에서 둥근 테두리가 지원됩니다. borderRadius 스타일 속성을 설정하거나 해당 머리글 시트 영역과 함께 borderRadius 및 setBorderRadius 메서드를 사용하여 머리글 셀에 둥근 테두리를 적용할 수 있습니다.
var sheet = spread.getActiveSheet();
var style = new GC.Spread.Sheets.Style();
style.backColor = "#D3F0E0";
style.borderTop = new GC.Spread.Sheets.LineBorder("#7da6ff", GC.Spread.Sheets.LineStyle.thin);
style.borderBottom = new GC.Spread.Sheets.LineBorder("#7da6ff", GC.Spread.Sheets.LineStyle.thin);
style.borderLeft = new GC.Spread.Sheets.LineBorder("#7da6ff", GC.Spread.Sheets.LineStyle.thin);
style.borderRight = new GC.Spread.Sheets.LineBorder("#7da6ff", GC.Spread.Sheets.LineStyle.thin);
style.borderRadius = "8";
sheet.setStyle(0, 0, style, GC.Spread.Sheets.SheetArea.colHeader);
머리글의 둥근 테두리는 기존 머리글 테두리, 배경 및 눈금선 동작을 따릅니다. 둥근 테두리 값과 범위 수준 적용에 대한 자세한 내용은 테두리, 눈금선 및 대각선을 참조하세요.
머리글 숨기기
다음 예제에서는 머리글을 숨깁니다.
document.addEventListener("DOMContentLoaded", function () {
// Spread 초기화
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
// 활성 시트 가져오기
var activesheet = spread.getActiveSheet();
// 열 머리글을 숨깁니다.
activeSheet.options.colHeaderVisible = false;
// 행 머리글을 숨깁니다.
activeSheet.options.rowHeaderVisible = false;
});머리글 셀 범위 지정 또는 병합
다음 코드는 머리글의 셀 범위를 지정합니다.
document.addEventListener("DOMContentLoaded", function () {
// Spread 초기화
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
// 활성 시트 가져오기
var activeSheet = spread.getActiveSheet();
// 열 머리글의 행 개수를 3으로 설정합니다.
activeSheet.setRowCount(3, GC.Spread.Sheets.SheetArea.colHeader);
// 열 머리글 셀 (0,0)을 시작점으로 세 열의 범위를 지정합니다.
activeSheet.addSpan(0, 0, 1, 3, GC.Spread.Sheets.SheetArea.colHeader);
// 열 머리글 셀 (1,0)을 시작점으로 두 행을 병합합니다.
activeSheet.addSpan(1, 0, 2, 1, GC.Spread.Sheets.SheetArea.colHeader);
// 병합된 셀에 문자열을 설정합니다.
activeSheet.setValue(0, 0, "Combined Columns", GC.Spread.Sheets.SheetArea.colHeader);
activeSheet.setValue(1, 0, "Combined Rows", GC.Spread.Sheets.SheetArea.colHeader);
// 행 머리글의 열 개수를 2로 설정합니다.
activeSheet.setColumnCount(2, GC.Spread.Sheets.SheetArea.rowHeader);
// 행 머리글 셀 (1,0)을 시작점으로 두 열과 두 행을 병합합니다.
activeSheet.addSpan(1, 0, 2, 2, GC.Spread.Sheets.SheetArea.rowHeader);
// 병합된 셀에 문자열을 설정합니다.
activeSheet.setValue(1, 0, "Combined rows and columns", GC.Spread.Sheets.SheetArea.rowHeader);
});머리글에 여러 열 및 행 만들기
여러 열 및 행 머리글을 표시하고 기본 머리글에 문자, 숫자 또는 아무것도 표시하지 않을지 지정할 수 있습니다. 머리글에 사용자 지정 텍스트를 입력할 수도 있습니다. setRowCount 및 setColumnCount 메서드를 사용하여 개수를 지정할 수 있습니다.
기본적으로 머리글을 클릭하면 해당 행이나 열이 선택됩니다. 머리글 가장자리의 선 위로 포인터를 이동하여 열이나 행의 크기를 조정할 수도 있습니다. 포인터가 양방향 화살표로 변경되면 열이나 행을 끌어서 새 너비 또는 높이로 조정할 수 있습니다.
코드에서 options.colHeaderAutoTextIndex , options.colHeaderAutoText , options.rowHeaderAutoTextIndex , options.rowHeaderAutoText 속성을 사용하여 기본 머리글 텍스트를 변경할 수 있습니다.
코드 사용
다음 예제에서는 머리글에 여러 행과 열을 만듭니다.
// Spread 초기화
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
// 활성 시트 가져오기
var activeSheet = spread.getActiveSheet();
// 열 머리글의 행 개수를 3으로 설정합니다.
activeSheet.setRowCount(3, GC.Spread.Sheets.SheetArea.colHeader);
// 행 머리글의 열 개수를 4로 설정합니다.
activeSheet.setColumnCount(4, GC.Spread.Sheets.SheetArea.rowHeader);});다음 예제에서는 머리글 텍스트의 유형과 위치를 지정하고 사용자 지정 머리글 텍스트를 만듭니다.
activeSheet.setRowCount(2,GC.Spread.Sheets.SheetArea.colHeader);
activeSheet.setColumnCount(2,GC.Spread.Sheets.SheetArea.rowHeader);
activeSheet.setValue(0, 2,"Column",GC.Spread.Sheets.SheetArea.colHeader);
activeSheet.options.rowHeaderAutoTextIndex = 1;
activeSheet.options.rowHeaderAutoText = GC.Spread.Sheets.HeaderAutoText.numbers;
activeSheet.options.colHeaderAutoTextIndex = 1;
activeSheet.options.colHeaderAutoText = GC.Spread.Sheets.HeaderAutoText.letters;머리글에 행 및 열 추가/삭제
addRows 및 addColumns 메서드를 사용하여 머리글의 특정 위치에 행이나 열을 추가할 수 있습니다. 이러한 메서드는 행 또는 열 인덱스와 추가할 행 및 열 개수와 같은 매개 변수를 사용합니다.
마찬가지로 deleteRows 및 deleteColumns 메서드를 사용하여 특정 위치에서 머리글 행과 열을 삭제할 수 있습니다.
다음 코드 예제에서는 열 머리글의 특정 위치에 행을 추가하는 방법을 보여 줍니다.
// 열 머리글에 행 추가
activeSheet.addRows(0, 1, GC.Spread.Sheets.SheetArea.colHeader);
// 행 머리글에 열 추가
activeSheet.addColumns(1, 3, GC.Spread.Sheets.SheetArea.rowHeader); 참고: colHeaderAutoTextIndex 및 rowHeaderAutoTextIndex 옵션은 addRows/ addColumns/ deleteRows/ deleteColumns 메서드에 의해 자동으로 조정되지 않습니다.
마우스 클릭으로 머리글 셀 인덱스 가져오기
다음 예제에서는 마우스로 머리글 셀을 선택할 때 해당 셀의 인덱스를 가져옵니다.
document.addEventListener("DOMContentLoaded", function () {
var spreadElement = document.getElementById("ss");
var spread = new GC.Spread.Sheets.Workbook(spreadElement);
var activeSheet = spread.getActiveSheet();
activeSheet.setRowCount(4, GC.Spread.Sheets.SheetArea.colHeader);
spreadElement.addEventListener("click", function (e) {
// 마우스로 클릭한 열 머리글 셀의 지점에서 셀 인덱스를 가져옵니다.
var rect = spreadElement.getBoundingClientRect();
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
var target = spread.getActiveSheet().hitTest(x, y);
if (
target &&
target.rowViewportIndex === -1 &&
(target.colViewportIndex === 0 || target.colViewportIndex === 1)
) {
console.log(
"Row index of mouse-clicked column header cells: " + target.row
);
console.log(
"Column index of mouse-clicked column header cells: " + target.col
);
}
});
});머리글에 수식 및 스파크라인 추가
스프레드시트의 행 머리글 영역과 열 머리글 영역 모두에 수식(평균, 최솟값, 최댓값 등) 및 SparklineEx(LineSparkline, ColumnSparkline, WinlossSparkline, CascadeSparkline, PieSparkline 등)를 추가할 수 있습니다. 사용자는 데이터 원본을 간편하게 바인딩하여 머리글 영역에서 데이터를 시각화하고 집계할 수 있습니다. 또한 모든 데이터 값을 일일이 확인하지 않고도 전체 진행 상황을 표시하고 데이터의 오류를 분석하는 데 도움이 됩니다. 머리글에 추가된 수식은 틀 고정된 행 및 열처럼 동작하므로 사용자가 어디로 스크롤하더라도 항상 표시됩니다.
조직 내 세 직원 Andrey, Michael, John의 2012년부터 2019년까지 지난 8년간의 성과를 평가하는 예제를 살펴보겠습니다. 아래 사용 사례 이미지에서 "Actual Sales"는 특정 연도에 세 직원이 달성한 매출의 합계를 나타내고 "Sales Target"은 특정 연도의 회사 목표 매출을 나타냅니다. 또한 "Sales Deficit"은 Actual Sales와 Sales Target의 차이를 나타냅니다.
여기에서는 영업 성과 분석을 위한 대시보드를 나타내며, 열 머리글에서 LineSparkline 수식을 사용하여 지난 8년간 직원의 매출을 나타내고 ColumnSparkline 수식을 사용하여 Actual Sales와 Sales Target을 나타냅니다. 또한 Sales Deficit 열 머리글의 WinLossSparkline 수식은 Actual Sales와 Sales Target의 차이를 나타냅니다.
또한 열 머리글에 데이터 집계를 표시하기 위해 기본 제공 함수 수식을 사용하여 직원, Actual Sales, Sales Target 및 Sales Deficit의 최소, 평균 및 최대 매출을 나타냅니다.
대시보드 형식에서 SparklineEx 및 데이터 집계 수식을 사용하면 사용자는 실제 값을 일일이 확인하지 않고도 다양한 매개 변수에 따른 성과를 쉽게 파악할 수 있습니다.
코드 사용
다음 코드 조각에서는 머리글에서 SparklineEx 및 수식을 사용하는 방법을 보여 줍니다.
document.addEventListener("DOMContentLoaded", function () {
// Spread 초기화
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 2 });
spread.suspendPaint();
// 활성 시트 가져오기
var activeSheet = spread.sheets[0];
// sheetAreaOffset 옵션 설정
activeSheet.options.sheetAreaOffset = { left: 1, top: 1 };
// 눈금선 숨기기
activeSheet.options.gridline = { showVerticalGridline: false, showHorizontalGridline: false };
// 행 머리글 숨기기
activeSheet.options.rowHeaderVisible = false;
// 행 및 열 개수 설정
activeSheet.setRowCount(8, 3);
activeSheet.setColumnCount(8, 3);
// 열 너비 설정
activeSheet.setColumnWidth(0, 100);
for (var i = 1; i < 7; i++)
activeSheet.setColumnWidth(i, 180);
// dataArray 생성
var dataArray =
[
[2012, 242, 234, 135, , 700],
[2013, 234, 244, 522, , 900],
[2014, 214, 322, 111, , 500],
[2015, 23, 114, 45, , 300],
[2016, 222, 152, 345, , 700],
[2017, 22, 633, 622, , 1000],
[2018, 533, 634, 211, , 1700],
[2019, 111, 22, 442, , 600],
];
// 차트 데이터 설정
activeSheet.setArray(0, 0, dataArray);
// 행 0의 열 머리글 데이터 및 설정 지정
activeSheet.setValue(0, 0, "EMPLOYEE SALES PERFORMANCE ( Million $)", GC.Spread.Sheets.SheetArea.colHeader);
activeSheet.getRange(-1, 0, -1, 7).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
activeSheet.setRowHeight(0, 35, GC.Spread.Sheets.SheetArea.colHeader)
activeSheet.addSpan(0, 0, 1, 7, GC.Spread.Sheets.SheetArea.colHeader);
// 열 머리글 행 개수 설정
activeSheet.setRowCount(4, 1);
// 행 1의 열 머리글 데이터 설정
activeSheet.setValue(1, 0, 'Year', GC.Spread.Sheets.SheetArea.colHeader);
activeSheet.setValue(1, 1, 'Andrey', GC.Spread.Sheets.SheetArea.colHeader);
activeSheet.setValue(1, 2, 'Michael', GC.Spread.Sheets.SheetArea.colHeader);
activeSheet.setValue(1, 3, 'John', GC.Spread.Sheets.SheetArea.colHeader);
activeSheet.setValue(1, 4, 'Actual Sales', GC.Spread.Sheets.SheetArea.colHeader);
activeSheet.setValue(1, 5, 'Sales Target', GC.Spread.Sheets.SheetArea.colHeader);
activeSheet.setValue(1, 6, 'Sales Deficit', GC.Spread.Sheets.SheetArea.colHeader);
// "Actual Sales" 열 및 "Sales Deficit" 열의 수식 설정
for (var i = 1; i < 9; i++) {
activeSheet.setFormula(i - 1, 4, "SUM(B" + i + "+C" + i + "+D" + i + ")", GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setFormula(i - 1, 6, "E" + i + "-F" + i, GC.Spread.Sheets.SheetArea.viewport);
}
// 데이터 영역 셀의 테두리 설정
activeSheet.getRange("A1:G8").setBorder(
new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thick),
{ top: true, bottom: true, left: true, right: true }, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.addSpan(2, 5, 1, 2, GC.Spread.Sheets.SheetArea.colHeader);
activeSheet.setRowHeight(2, 60, GC.Spread.Sheets.SheetArea.colHeader);
activeSheet.setText(2, 4, "WIN/ LOSS CHART", GC.Spread.Sheets.SheetArea.colHeader);
// 머리글에 sparklineEx 수식을 사용하여 차트 추가
activeSheet.setFormula(2, 1, '=LINESPARKLINE(Sheet1!B1:B8,0,,,"{seriesColor:#02888F,highMarkerColor:#FFD34C,lowMarkerColor:#E89796,lineWeight:3,displayEmptyCellsAs:0,showHigh:true,showLow:true,maxAxisType:0,minAxisType:0}")', GC.Spread.Sheets.SheetArea.colHeader);
activeSheet.setFormula(2, 2, '=LINESPARKLINE(Sheet1!C1:C8,0,,,"{seriesColor:#02888F,highMarkerColor:#FFD34C,lowMarkerColor:#E89796,lineWeight:3,displayEmptyCellsAs:0,showHigh:true,showLow:true,maxAxisType:0,minAxisType:0}")', GC.Spread.Sheets.SheetArea.colHeader);
activeSheet.setFormula(2, 3, '=LINESPARKLINE(Sheet1!D1:D8,0,,,"{seriesColor:#02888F,highMarkerColor:#FFD34C,lowMarkerColor:#E89796,lineWeight:3,displayEmptyCellsAs:0,showHigh:true,showLow:true,maxAxisType:0,minAxisType:0}")', GC.Spread.Sheets.SheetArea.colHeader);
activeSheet.setFormula(2, 4, '=COLUMNSPARKLINE(Sheet1!E1:E8,0,,,"{seriesColor:#02888F,highMarkerColor:#FFD34C,lowMarkerColor:#E89796,lineWeight:3,displayEmptyCellsAs:0,showHigh:true,showLow:true,maxAxisType:0,minAxisType:0}")', GC.Spread.Sheets.SheetArea.colHeader);
activeSheet.setFormula(2, 5, '=COLUMNSPARKLINE(Sheet1!F1:F8,0,,,"{seriesColor:#02888F,highMarkerColor:#FFD34C,lowMarkerColor:#E89796,lineWeight:3,displayEmptyCellsAs:0,showHigh:true,showLow:true,maxAxisType:0,minAxisType:0}")', GC.Spread.Sheets.SheetArea.colHeader);
activeSheet.setFormula(2, 6, '=WINLOSSSPARKLINE(Sheet1!G1:G8,0,,,"{seriesColor:#02888F,highMarkerColor:#FFD34C,lowMarkerColor:#E89796,displayEmptyCellsAs:0,showHigh:true,showLow:true,maxAxisType:0,minAxisType:0}")', GC.Spread.Sheets.SheetArea.colHeader);
// 머리글에 기본 제공 함수 수식을 사용하여 데이터 집계
activeSheet.setFormula(3, 0, '"From "&COUNT(Sheet1!A:A)&" Years"', GC.Spread.Sheets.SheetArea.colHeader);
activeSheet.setFormula(3, 1, '"Min: "&MIN(Sheet1!B:B)&" Avg: "&ROUND(AVERAGE(Sheet1!B:B),0)&" Max: "&MAX(Sheet1!B:B)', GC.Spread.Sheets.SheetArea.colHeader);
activeSheet.setFormula(3, 2, '"Min: "&MIN(Sheet1!C:C)&" Avg: "&ROUND(AVERAGE(Sheet1!C:C),0)&" Max: "&MAX(Sheet1!C:C)', GC.Spread.Sheets.SheetArea.colHeader);
activeSheet.setFormula(3, 3, '"Min: "&MIN(Sheet1!D:D)&" Avg: "&ROUND(AVERAGE(Sheet1!D:D),0)&" Max: "&MAX(Sheet1!D:D)', GC.Spread.Sheets.SheetArea.colHeader);
activeSheet.setFormula(3, 4, '"Min: "&MIN(Sheet1!E:E)&" Avg: "&ROUND(AVERAGE(Sheet1!E:E),0)&" Max: "&MAX(Sheet1!E:E)', GC.Spread.Sheets.SheetArea.colHeader);
activeSheet.setFormula(3, 5, '"Min: "&MIN(Sheet1!F:F)&" Avg: "&ROUND(AVERAGE(Sheet1!F:F),0)&" Max: "&MAX(Sheet1!F:F)', GC.Spread.Sheets.SheetArea.colHeader);
activeSheet.setFormula(3, 6, '"Min: "&MIN(Sheet1!G:G)&" Avg: "&ROUND(AVERAGE(Sheet1!G:G),0)&" Max: "&MAX(Sheet1!G:G)', GC.Spread.Sheets.SheetArea.colHeader);
// 열 머리글 행 0의 스타일 설정
var style1 = new GC.Spread.Sheets.Style();
style1.font = "bold 18px Arial";
style1.foreColor = "black";
style1.backColor = "#9FD5B7";
style1.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style1.vAlign = GC.Spread.Sheets.VerticalAlign.center;
activeSheet.setStyle(0, 0, style1, GC.Spread.Sheets.SheetArea.colHeader);
// 열 머리글 행 1 및 3의 스타일 설정
var style = new GC.Spread.Sheets.Style();
style.font = "bold 12px Arial";
style.foreColor = "black";
style.backColor = "#D3F0E0";
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
for (var i = 0; i < 7; i++) {
activeSheet.setStyle(1, i, style, GC.Spread.Sheets.SheetArea.colHeader);
activeSheet.setStyle(3, i, style, GC.Spread.Sheets.SheetArea.colHeader);
}
// 열 머리글 행 2의 스타일 설정
var style2 = new GC.Spread.Sheets.Style();
style2.backColor = "#edfdf4";
for (var i = 0; i < 7; i++)
activeSheet.setStyle(2, i, style2, GC.Spread.Sheets.SheetArea.colHeader);
spread.resumePaint();
});Excel 가져오기/내보내기
Excel에서는 머리글 영역 사용자 지정을 지원하지 않습니다. 하지만 Excel에서 수식 머리글을 가져오고 내보내려는 경우 SpreadJS의 frozenColumnsAsRowHeaders 또는 frozenRowsAsColumnHeaders 및 rowHeadersAsFrozenColumns 또는 columnHeadersAsFrozenRows 속성을 사용할 수 있습니다. 이러한 속성을 사용하도록 설정하면 머리글 영역의 수식이 유지됩니다. 또한 내보낼 때는 틀 고정 영역으로 변환되고 가져올 때는 머리글 영역으로 변환됩니다.
참고: 머리글에서 뷰포트 참조를 참조할 수 있지만 머리글 참조는 머리글 자체에서만 참조할 수 있습니다. 단, 틀 고정 영역을 가로지르는 범위는 처리되지 않습니다. 또한 머리글 영역의 SparklineEx는 Excel 가져오기/내보내기를 지원하지 않습니다.