표 슬라이서
표 슬라이서는 데이터를 빠르게 필터링할 수 있는 기능을 제공합니다. 드롭다운 목록을 사용하지 않고도 필터링 상태를 확인할 수 있으며, 현재 필터링된 상태를 시각적으로 표시해줍니다.
표 슬라이서는 ShapeBase를 기반으로 하며 다음과 같은 기능을 지원합니다:
그라데이션 채우기 (Gradient Fill): 슬라이서 항목에 마우스를 올리면 그라데이션 효과가 나타납니다.
다중 선택 모드 (Multi-Select Mode): 슬라이서 오른쪽 상단에 있는 다중 선택 버튼을 클릭하여 한 번에 여러 필터 항목을 선택할 수 있습니다. 다중 선택 버튼을 비활성화하면 한 번에 하나의 항목만 선택할 수 있습니다.
향상된 성능 (Improved Performance):
ShapeForm컨트롤로 구현되어 워크시트에서 대량의 데이터를 필터링할 수 있습니다.최적화된 스타일 렌더링 (Optimized style rendering): 스타일 렌더링에 대한 자세한 내용은 표 슬라이서 스타일 문서를 참조하시기 바랍니다.
참고: SpreadJS 워크시트에서 표 슬라이서를 사용하려면 다음 플러그인을 참조해야 합니다:
gc.spread.sheets.all.js
gc.spread.sheets.shapes.js
gc.spread.sheets.slicers.jsslicers 플러그인은 shapes 플러그인에 의존하므로, 먼저 shapes 플러그인을 가져와야 합니다.
표 슬라이서 구성 요소는 슬라이서 헤더와 슬라이서 본문으로 구성됩니다. 슬라이서 헤더는 슬라이서 캡션, 다중 선택 버튼, 필터 초기화 버튼으로 구성됩니다.
표 슬라이서는 표에 종속되므로, 슬라이서를 생성하려면 먼저 표를 추가해야 합니다. 슬라이서를 추가하려면 add 메서드를 사용하며, 슬라이서에 대한 옵션은 Slicers 클래스를 통해 설정할 수 있습니다.
다음 코드는 표와 슬라이서를 생성하는 예제입니다:
Ask ChatGPT
//표 생성
datas = [
["1", "NewYork", "1968/6/8", "80", "180"],
["4", "NewYork", "1972/7/3", "72", "168"],
["4", "NewYork", "1964/3/2", "71", "179"],
["5", "Washington", "1972/8/8","80", "171"],
["6", "Washington", "1986/2/2", "89", "161"],
["7", "Washington", "2012/2/15", "71", "240"]
];
var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
dataColumns = ["Name", "City", "Birthday", "Weight", "Height"];
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
table.setColumnName(3, dataColumns[3]);
table.setColumnName(4, dataColumns[4]);
// 시트에 슬라이서를 추가하고 슬라이서 인스턴스를 반환
var slicer = activeSheet.slicers.add("slicer1", table.name(), "Name");
// 슬라이서 속성을 변경
slicer.width(200);
slicer.height(200);
slicer.position(new GC.Spread.Sheets.Point(100, 200));
slicer.style(GC.Spread.Sheets.Slicers.SlicerStyles.dark4());슬라이서는 이동, 크기 조정, 삭제, 잘라내기, 복사, 붙여넣기, 실행 취소 또는 다시 실행할 수 있습니다.
다른 슬라이서에 의해 필터링된 항목은 "데이터 있음 항목(has data items)" 및 "데이터 없음 항목(no data items)"으로 분류됩니다. 슬라이서에 의해 필터링된 항목은 "선택된 항목(selected items)" 및 "선택되지 않은 항목(unselected items)"으로 분류됩니다.
항목 유형 | 설명 |
|---|---|
no data items | 다른 슬라이서에 의해 필터링된 항목 |
has data items | 다른 슬라이서에 의해 필터링되지 않은 항목 |
selected items | 해당 슬라이서에 의해 필터링된 항목 |
unselected items | 해당 슬라이서에 의해 필터링되지 않은 항목 |
슬라이서는 표 필터와 동기화됩니다. 다음과 같은 표 변경은 슬라이서의 변경을 유발합니다.
표 변경 | 슬라이서 변경 |
|---|---|
데이터 수정 | 슬라이서 항목 변경됨 |
열 이름 수정 | 슬라이서 캡션 변경됨 |
행 추가 | 슬라이서 항목 변경됨 |
열 추가 | 변경 없음 |
행 삭제 | 슬라이서 항목 변경됨 |
열 삭제 | 해당 열에 연결된 슬라이서 제거됨 |
표 제거 | 해당 표에 연결된 모든 슬라이서 제거됨 |
Slicers 클래스를 사용하여 슬라이서에 대한 옵션을 설정할 수 있습니다. 슬라이서의 표시 여부 또는 잠금 여부는 각각 isVisible 또는 isLocked 메서드를 사용하여 지정할 수 있습니다. isLocked 메서드는 시트가 보호된 경우에만 적용됩니다. slicers.add 메서드로 슬라이서를 추가할 수 있으며, slicers.remove 메서드로 슬라이서를 제거할 수 있습니다.
행 또는 열을 이동하거나 크기를 조정하면 dynamicMove 및 dynamicSize 메서드의 설정에 따라 슬라이서의 위치 및 크기가 변경될 수 있습니다. 아래 표는 dynamicMove 및 dynamicSize 설정에 따른 결과를 보여줍니다.
DynamicMove | DynamicSize | 결과 |
|---|---|---|
true | true | 슬라이서가 이동 및 크기 조정됨 |
true | false | 슬라이서가 이동되지만 크기 조정되지 않음 |
false | true 또는 false | 슬라이서가 이동되거나 크기 조정되지 않음 |
Ask ChatGPT
표 슬라이서 데이터 사용
TableSlicerData 클래스는 슬라이서에 대한 표 데이터 및 필터링 정보를 제공합니다. TableSlicerData에 사용되는 데이터 원본은 SpreadJS SheetTable입니다. TableSlicerData를 사용하려면 생성자에 SheetTable을 설정해야 합니다.
다음 코드 샘플은 표를 만들고 TableSlicerData 클래스를 사용하여 슬라이서를 추가하는 방법을 보여줍니다.
// 표 생성
var dataSource = [
{ Name: "Bob", City: "NewYork", Birthday: "1968/6/8" },
{ Name: "Betty", City: "NewYork", Birthday: "1972/7/3" },
{ Name: "Alice", City: "Washington", Birthday: "2012/2/15" },
];
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, dataSource);
var slicerData = table.getSlicerData();
// 항목 슬라이서 생성
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
// 슬라이서를 DOM 트리에 추가
// "slicerHost"는 슬라이서의 DOM을 추가할 div입니다.
$("#slicerHost").append(slicer.getDOMElement());
.....
<div id="slicerHost" style="height: 300px; width: 50%"></div> 참고: 새로운 슬라이서로 업그레이드하려면, 릴리스 소식을 참조하시기 바랍니다.
표 슬라이서 스타일
내장 스타일을 사용하거나, 헤더와 같은 특정 영역에 대해 스타일을 설정할 수 있습니다.
SlicerStyles 클래스를 참조하면 사용할 수 있는 내장 스타일 목록을 확인할 수 있습니다. SlicerStyles 클래스는 특정 스타일 영역을, SlicerStyleInfo클래스는 변경 가능한 스타일 속성을 제공합니다. SlicerStyleInfo 클래스를 사용하면 스타일에 테두리를 생성할 수 있습니다.
다음 코드 샘플은 표를 만들고 헤더 스타일이 지정된 슬라이서를 추가하는 방법을 보여줍니다.
//표 생성
datas = [
["1", "NewYork", "1968/6/8", "80", "180"],
["4", "NewYork", "1972/7/3", "72", "168"],
["4", "NewYork", "1964/3/2", "71", "179"],
["5", "Washington", "1972/8/8","80", "171"],
["6", "Washington", "1986/2/2", "89", "161"],
["7", "Washington", "2012/2/15", "71", "240"]];
var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
dataColumns = ["Name", "City", "Birthday", "Weight", "Height"];
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
table.setColumnName(3, dataColumns[3]);
table.setColumnName(4, dataColumns[4]);
var hstyle = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
hstyle.backColor("red");
var style1 = new GC.Spread.Sheets.Slicers.SlicerStyle();
style1.headerStyle(hstyle);
// 시트에 슬라이서를 추가하고 슬라이서 인스턴스를 반환
var slicer = activeSheet.slicers.add("slicer1",table.name(),"Name");
// 슬라이서 속성 변경
slicer.width(200);
slicer.height(200);
slicer.position(new GC.Spread.Sheets.Point(100, 200));
slicer.style(style1);