[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

항목 슬라이서

항목 슬라이서를 사용하여 데이터를 필터링할 수 있습니다.


GeneralSlicerData 및 TableSlicerData 클래스는 필터링할 데이터를 포함하며 필터 정보 속성도 제공합니다. ItemSlicer 클래스는 이 슬라이서 데이터와 함께 사용할 수 있습니다. 항목 슬라이서는 슬라이서 구성 요소이며 시트와는 독립적으로 동작합니다. style 메서드를 사용하여 항목 슬라이서의 스타일을 설정할 수 있습니다.

참고: SpreadJS 워크시트에서 항목 슬라이서를 사용하려면 다음 플러그인을 참조해야 합니다:

  • gc.spread.sheets.all.js

  • gc.spread.sheets.slicers.js

아래 이미지는 항목 슬라이서를 보여줍니다.

Ask ChatGPTitem-slicer.png

코드 사용

다음 예제는 테이블을 생성하고 항목 슬라이서를 추가합니다.

//테이블 생성
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"는 슬라이서를 추가할 div입니다.
$("#slicerHost").append(slicer.getDOMElement());
.....
<div id="slicerHost" style="height: 300px; width: 50%"></div>

참고: 새로운 슬라이서로 업그레이드하려면 릴리스 소식 문서를 참고하시기 바랍니다.

Ask ChatGPT