헤더
SpreadJS에서는 셀 헤더에 대해 다양한 작업을 수행할 수 있습니다.
헤더의 높이 및 너비 설정
이 예제는 열 헤더의 높이와 행 헤더의 너비를 변경합니다.
$(document).ready(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);
});헤더 텍스트 설정
이 예제는 헤더에 사용자 정의 텍스트를 삽입합니다.
Ask ChatGPT
$(document).ready(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).ready(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");
});헤더 숨기기
이 예제는 헤더 숨기도록 설정합니다.
$(document).ready(function () {
// Spread 초기화
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
// 활성화 시트 가져오기
var activesheet = spread.getActiveSheet();
// Hide column headers.
activeSheet.options.colHeaderVisible = false;
// Hide row headers.
activeSheet.options.rowHeaderVisible = false;
});헤더 셀 병합 또는 병합 해제
다음 코드는 헤더에서 셀을 병합(Span)하는 예제입니다.
$(document).ready(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) 위치에서 시작하여 3개의 열 머리글 셀을 병합
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 메서드를 사용할 수 있습니다.
아래 예제는 열 머리글(Column Header)의 특정 위치에 행을 추가하는 방법을 보여줍니다.
// 열 헤더에 행 추가
activeSheet.addRows(0, 1, GC.Spread.Sheets.SheetArea.colHeader);
// 행 헤더에 열 추가
activeSheet.addColumns(1, 3, GC.Spread.Sheets.SheetArea.rowHeader); 참고: addRows, addColumns, deleteRows, deleteColumns 메서드를 사용하더라도 colHeaderAutoTextIndex 및 rowHeaderAutoTextIndex 옵션은 자동으로 조정되지 않습니다.
마우스 클릭으로 헤더 셀 인덱스 가져오기
마우스로 헤더 셀을 선택할 때 해당 헤더 셀의 인덱스를 가져오는 예제입니다.
Ask ChatGPT
$(document).ready(function () {
var spread = new GC.Spread.Sheets.Workbook($("#ss")[0]);
var activeSheet = spread.getActiveSheet();
activeSheet.setRowCount(4, GC.Spread.Sheets.SheetArea.colHeader);
$("#ss").click(function (e)
// 열 머리글 셀에서 마우스 클릭된 지점으로부터 셀 인덱스를 가져오기
var offset = $("#ss").offset();
var x = e.pageX - offset.left;
var y = e.pageY - offset.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); }
});헤더에 수식 및 스파크라인 추가하기
SpreadJS에서는 수식 (average, minimum, maximum, 등)과 SparklineEx(LineSparkline, ColumnSparkline, WinLossSparkline, CascadeSparkline, PieSparkline) 등을 시트의 행 머리글 및 열 머리글 영역 모두에 추가할 수 있습니다. 사용자는 데이터 소스를 바인딩하여 헤더 영역에서 데이터 시각화 및 집계를 편리하게 수행할 수 있으며, 전체적인 진행 상황을 확인하거나 데이터를 일일이 확인하지 않고도 오류를 분석할 수 있습니다. 머리글에 수식을 추가하면 고정 행 및 고정 열처럼 작동하므로 사용자가 스크롤을 이동하더라도 항상 표시됩니다.
예를 들어, 조직 내 세 명의 직원(Andrey, Michael, John)이 2012년부터 2019년까지 지난 8년간의 성과를 평가한다고 가정해보겠습니다. 아래의 사용 사례 이미지에서 "Actual Sales(실제 매출)"은 특정 연도에 세 명의 직원이 달성한 매출 합계를 나타내며, "Sales Target(매출 목표)"은 회사의 해당 연도 매출 목표를 의미합니다. 또한, "Sales Deficit(매출 차이)"은 Actual Sales와 Sales Target 간의 차이를 의미합니다.
이 예시에서는 판매 실적 분석 대시보드를 구성하며, 직원들의 지난 8년간의 매출을 열 머리글에 LineSparkline 수식으로 나타내고, Actual Sales 및 Sales Target은 ColumnSparkline수식으로 표현하였습니다. 또한 Sales Deficit 열 머리글에는 WinLossSparkline 수식을 사용하여 매출 차이를 나타냅니다.
또한, 열 머리글 영역에 데이터 집계를 표시하기 위해, 내장 함수 수식을 사용하여 직원별 최소값, 평균, 최대 매출과 Actual Sales, Sales Target, Sales Deficit의 요약 수치를 나타내고 있습니다.
SparklineEx와 집계 수식을 대시보드 형태로 구성하면, 실제 값 하나하나를 확인하지 않고도 다양한 지표에 대한 성과를 직관적으로 파악할 수 있습니다.
코드 예시
아래의 코드 스니펫은 헤더에 SparklineEx 및 수식을 사용하는 방법을 보여줍니다:
$(document).ready(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 };
// gridlines 숨기기
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();
});ExcelIO
Excel은 머리글 영역에 대한 사용자 지정을 지원하지 않지만, 사용자가 머리글 영역의 수식을 Excel로 가져오거나 내보내고 싶을 경우, SpreadJS의 frozenColumnsAsRowHeaders , frozenRowsAsColumnHeaders , rowHeadersAsFrozenColumns , columnHeadersAsFrozenRows 속성을 사용할 수 있습니다.
이 속성들을 활성화하면 머리글 영역의 수식이 유지되며, 내보낼 때는 해당 머리글이 고정 영역으로 변환되고, 가져올 때는 다시 머리글 영역으로 변환됩니다.
참고 : 뷰포트 영역(일반 셀)의 참조는 머리글에서 참조할 수 있지만, 머리글은 자기 자신만 참조할 수 있습니다. 고정 영역을 교차하는 범위에 대해서는 처리되지 않습니다.
또한, 머리글 영역에 있는 SparklineEx는 ExcelIO를 지원하지 않습니다.