개요 열
SpreadJS의 열 개요(Outline columns)는 스프레드시트에서 데이터를 더 잘 구성할 수 있도록 열의 텍스트를 들여쓰기하여 트리 구조를 생성하는 기능을 의미합니다.
이 기능은 행 간 계층적 관계를 추가하고 스프레드시트에 내장된 확장 및 축소 사용자 인터페이스를 제공하고자 할 때 특히 유용합니다. 또한 열 개요 기능은 프로젝트 계획 작업 및 하위 작업 계층 구조, 재무제표, 자재 명세서 문서를 생성해야 할 때처럼 스프레드시트에 많은 양의 데이터가 있을 경우 매우 유용할 수 있습니다.
사용자는 워크시트에서 열을 개요화하는 동시에, 확장 및 축소 아이콘과 함께 체크박스 및 이미지를 추가할 수 있습니다.
아래 이미지는 확장 및 축소 아이콘, 체크박스, 이미지, 행 개요가 포함된 열 개요를 보여줍니다.
워크시트에 확장 및 축소 아이콘을 구현하려면 showRowOutline 메서드를 사용하면 됩니다. 트리 구조의 레벨은 들여쓰기 횟수에 따라 결정됩니다.
또한 outlineColumn.options를 사용하여 레벨별 사용자 지정 이미지, 사용자 정의 인디케이터 표시 여부, 체크박스 표시 여부, 최대 레벨 설정 등을 사용자 정의할 수 있습니다.
다음 코드 샘플은 열을 들여쓰기하고 이미지 및 체크박스를 추가하는 방법을 보여줍니다.
var rowCount = 38;
var colCount = 10;
activeSheet.setColumnCount(colCount);
activeSheet.setRowCount(rowCount);
activeSheet.setColumnWidth(0, 310);
activeSheet.setColumnWidth(1, 150);
activeSheet.setColumnWidth(2, 150);
activeSheet.frozenColumnCount(1);
activeSheet.setValue(0, 0, "Name", GC.Spread.Sheets.SheetArea.colHeader);
activeSheet.setValue(0, 1, "Chapter", GC.Spread.Sheets.SheetArea.colHeader);
activeSheet.setValue(0, 2, "Page", GC.Spread.Sheets.SheetArea.colHeader);
var commands = [
{name: 'Preface', chapter: '1', page: 1, indent: 0},
{name: 'Java SE5 and SE6', chapter: '1.1', page: 2, indent: 1},
{name: 'Java SE6', chapter: '1.1.1', page: 2, indent: 2},
{name: 'The 4th edition', chapter: '1.2', page: 2, indent: 1},
{name: 'Changes', chapter: '1.2.1', page: 3, indent: 2},
{name: 'Note on the cover design', chapter: '1.3', page: 4, indent: 1},
{name: 'Acknowledgements', chapter: '1.4', page: 4, indent: 1},
{name: 'Introduction', chapter: '2', page: 9, indent: 0},
{name: 'Prerequisites', chapter: '2.1', page: 9, indent: 1},
{name: 'Learning Java', chapter: '2.2', page: 10, indent: 1},
{name: 'Goals', chapter: '2.3', page: 10, indent: 1},
{name: 'Teaching from this book', chapter: '2.4', page: 11, indent: 1},
{name: 'JDK HTML documentation', chapter: '2.5', page: 11, indent: 1},
{name: 'Exercises', chapter: '2.6', page: 12, indent: 1},
{name: 'Foundations for Java', chapter: '2.7', page: 12, indent: 1},
{name: 'Source code', chapter: '2.8', page: 12, indent: 1},
{name: 'Coding standards', chapter: '2.8.1', page: 14, indent: 2},
{name: 'Errors', chapter: '2.9', page: 14, indent: 1},
{name: 'Introduction to Objects', chapter: '3', page: 15, indent: 0},
{name: 'The progress of abstraction', chapter: '3.1', page: 15, indent: 1},
{name: 'An object has an interface', chapter: '3.2', page: 17, indent: 1},
{name: 'An object provides services', chapter: '3.3', page: 18, indent: 1},
{name: 'The hidden implementation', chapter: '3.4', page: 19, indent: 1},
{name: 'Reusing the implementation', chapter: '3.5', page: 20, indent: 1},
{name: 'Inheritance', chapter: '3.6', page: 21, indent: 1},
{name: 'Is-a vs. is-like-a relationships', chapter: '3.6.1', page: 24, indent: 2},
{name: 'Interchangeable objects with polymorphism', chapter: '3.7', page: 25, indent: 1},
{name: 'The singly rooted hierarchy', chapter: '3.8', page: 28, indent: 1},
{name: 'Containers', chapter: '3.9', page: 28, indent: 1},
{name: 'Parameterized types (Generics)', chapter: '3.10', page: 29, indent: 1},
{name: 'Object creation & lifetime', chapter: '3.11', page: 30, indent: 1},
{name: 'Exception handling: dealing with errors', chapter: '3.12', page: 31, indent: 1},
{name: 'Concurrent programming', chapter: '3.13', page: 32, indent: 1},
{name: 'Java and the Internet', chapter: '3.14', page: 33, indent: 1},
{name: 'What is the Web?', chapter: '3.14.1', page: 33, indent: 2},
{name: 'Client-side programming', chapter: '3.14.2', page: 34, indent: 2},
{name: 'Server-side programming', chapter: '3.14.3', page: 38, indent: 2},
{name: 'Summary', chapter: '3.15', page: 38, indent: 1},
];
for (var r = 0; r < commands.length; r++) {
activeSheet.setValue(r, 0, commands[r]['name']);
activeSheet.setValue(r, 1, commands[r]['chapter']);
activeSheet.setValue(r, 2, commands[r]['page']);
activeSheet.getRange(r, 0, 1, 1).textIndent(commands[r].indent);
}
activeSheet.outlineColumn.options({
columnIndex: 0,
showImage: true,
showCheckBox: true,
images: ['star2.png', 'box4.png', 'rating4.png'],
maxLevel: 2
});
activeSheet.showRowOutline(true);
spread.invalidateLayout();
spread.repaint();다음 코드 샘플은 범위 그룹화에서 개요를 추가하고 삭제하는 방법을 보여줍니다.
$("#button1").click(function ()
{
var activeSheet = spread.getActiveSheet();
activeSheet.suspendPaint();
// 행 개요 설정
activeSheet.rowOutlines.group(0, 4);
activeSheet.rowOutlines.group(0, 1);
activeSheet.rowOutlines.group(2, 1);
// 열 개요 설정
activeSheet.columnOutlines.group(0, 4);
activeSheet.columnOutlines.group(0, 1);
activeSheet.columnOutlines.group(2, 1);
activeSheet.resumePaint();
});
$("#button2").click(function()
{
var activeSheet = spread.getActiveSheet();
activeSheet.suspendPaint();
// 행 개요 제거
activeSheet.rowOutlines.ungroupRange(0, 4);
activeSheet.rowOutlines.ungroupRange(0, 1);
activeSheet.rowOutlines.ungroupRange(2, 1);
// 열 개요 제거
activeSheet.columnOutlines.ungroupRange(0, 4);
activeSheet.columnOutlines.ungroupRange(0, 1);
activeSheet.columnOutlines.ungroupRange(2, 1);
activeSheet.resumePaint();
});다음 코드 샘플은 그룹 개요를 확장 및 축소하는 방법을 보여줍니다.
window.onload = function()
{
var spread =
new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount:3});
var activeSheet = spread.getActiveSheet();
activeSheet.suspendPaint();
// 행 개요 설정
activeSheet.rowOutlines.group(0, 4);
activeSheet.rowOutlines.group(0, 1);
activeSheet.rowOutlines.group(2, 1);
// 열 개요 설정
activeSheet.columnOutlines.group(0, 4);
activeSheet.columnOutlines.group(0, 1);
activeSheet.columnOutlines.group(2, 1);
activeSheet.resumePaint();
$("#button1").click(function()
{
// 행 개요 레벨 수 가져오기
var rgl = activeSheet.rowOutlines.getMaxLevel();
for(var index = 0; index <= rgl; index++)
{
// 개요 확장
activeSheet.rowOutlines.expand(index, true);
}
// 열 개요 레벨 수 가져오기
var cgl = activeSheet.columnOutlines.getMaxLevel();
var gi = [];
var colCount = activeSheet.getColumnCount();
for(var index = 0, i = 0; index <= cgl; index++)
{
for(var col = 0; col < colCount; col++){
// 개요 그룹 정보 가져오기
var groupInfo = activeSheet.columnOutlines.find(col, index);
if(groupInfo)
{
gi[i] = groupInfo;
i++;
col = groupInfo.end;
}
}
}
for(var i = 0; i < gi.length; i++)
{
// 개요 확장
activeSheet.columnOutlines.expandGroup(gi[i], true);
}
activeSheet.invalidateLayout();
activeSheet.repaint();
});
$("#button2").click(function()
{
// 행 개요 레벨 수 가져오기
var rgl = activeSheet.rowOutlines.getMaxLevel();
for(var index = 0; index <= rgl; index++){
// 개요 축소
activeSheet.rowOutlines.expand(index, false);
}
// 열 개요 레벨 수 가져오기
var cgl = activeSheet.columnOutlines.getMaxLevel();
var gi = [];
var colCount = activeSheet.getColumnCount();
for(var index = 0, i = 0; index <= cgl; index++)
{
for(var col = 0; col < colCount; col++)
{
// 개요 그룹 정보 가져오기
var groupInfo = activeSheet.columnOutlines.find(col, index);
if(groupInfo)
{
gi[i] = groupInfo;
i++;
col = groupInfo.end;
}
}
}
for(var i = 0; i < gi.length; i++)
{
// 개요 축소
activeSheet.columnOutlines.expandGroup(gi[i], false);
}
activeSheet.invalidateLayout();
activeSheet.repaint();
});
}참고: 이 기능에는 다음과 같은 제한 사항이 있습니다:
행을 삽입하면 새 행 레벨은 선택한 행의 이전 행과 동일한 레벨이 됩니다.
sortRange메서드는 들여쓰기 텍스트를 다시 계산하고 들여쓰기 열을 새로 고칩니다.드래그 채우기 및 드래그 이동은 셀 내용만 변경합니다.
복사 및 붙여넣기는 셀 내용만 변경합니다.