행 필터

SpreadJS는 셀의 데이터 유형에 따라 조건부 필터(숫자 필터, 텍스트 필터, 날짜 필터, 색상 필터, 사용자 지정 자동 필터)를 적용할 수 있도록 허용합니다. 워크시트에서 필터 작업이 수행되면, 필터 조건과 일치하는 행만 표시되고 나머지 행은 숨겨집니다.

필터링이 허용된 열의 열 머리글에는 필터 버튼이 표시됩니다. 사용자는 이 버튼을 클릭하여 필터 대화 상자에서 사용 가능한 옵션을 사용할 수 있습니다.

필터 대화 상자를 통해 항목별로 필터링하고, 항목 목록을 정렬하며, 필터링된 행을 숨기거나, 열에 적용된 필터 조건을 해제할 수 있습니다. 필터 항목이 너무 길거나 짧아 필터 대화 상자에 맞지 않을 경우, 사용자는 대화 상자의 크기를 조절할 수 있습니다.

코드에서는 rowFilter 의 HideRowFilter 클래스를 사용하여 필터를 생성할 수 있습니다. 다음 코드 예제는 워크시트에 필터 대화 상자를 추가하고 특정 범위에 필터를 적용하는 방법을 보여줍니다.

// 워크북과 워크시트 구성
var spread = new GC.Spread.Sheets.Workbook("ss");
var activeSheet = spread.getActiveSheet();    

activeSheet.setValue(0, 0, "North");
activeSheet.setValue(1, 0, "South");
activeSheet.setValue(2, 0, "East");
activeSheet.setValue(3, 0, "South");
activeSheet.setValue(4, 0, "North");
activeSheet.setValue(5, 0, "North");
activeSheet.setValue(6, 0, "West");
activeSheet.setColumnWidth(0, 80);
           
// 행 필터 설정
activeSheet.rowFilter(new GC.Spread.Sheets.Filter.HideRowFilter(new GC.Spread.Sheets.Range(0, 0, 7, 1)));

// 열 1을 "North" 값으로 필터링
var rowFilter = spread.getActiveSheet().rowFilter();
var condition = new GC.Spread.Sheets.ConditionalFormatting.Condition(
    GC.Spread.Sheets.ConditionalFormatting.ConditionType.textCondition, {
        compareType: GC.Spread.Sheets.ConditionalFormatting.TextCompareType.equalsTo,
        expected: "North"
});
rowFilter.addFilterItem(0, condition);
rowFilter.filter(0);

사용자는 마우스 또는 다양한 키보드 키를 사용하여 필터 대화 상자와 상호작용할 수 있습니다. SpreadJS는 필터 대화 상자와 상호작용하기 위한 다음 키보드 키를 제공합니다:

필터 대화 상자 사용자 정의

filterDialogVisibleInfo 메서드를 사용하여 필터 대화 상자에 표시되는 정보를 제어할 수 있습니다.

이 메서드는 행 필터에 대한 표시 정보를 가져오거나 설정하는 데 사용됩니다.

다음 코드 샘플은 필터 대화 상자에서 "값으로 정렬(Sort by Value)" 및 리스트 필터 영역을 숨기는 방법을 보여줍니다.

// 워크시트와 워크북 구성
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var sheet = spread.getActiveSheet();

// 행 필터 설정
sheet.rowFilter(new GC.Spread.Sheets.Filter.HideRowFilter(new GC.Spread.Sheets.Range(1, 1, 10, 3)));
            
// 필터 옵션 숨기기
var filter = sheet.rowFilter();
filter.filterDialogVisibleInfo({
    sortByValue: false,
    sortByColor: true,
    filterByColor: true,
    filterByValue: true,
    listFilterArea: false
})

필터 대화 상자 리스트 박스

필터 대화 상자의 리스트 박스는 계층 트리 표시를 지원합니다. 숫자, 텍스트, 날짜 유형 중 가장 많은 셀을 차지하는 데이터 유형 항목이 표시됩니다.

필터 데이터에 여러 종류의 값 유형이 포함되어 있는 경우, 필터 항목은 Excel과 동일한 순서인 날짜, 숫자, 텍스트, 논리값, 빈값 순으로 표시됩니다.

필터 범위에 아웃라인 열이 포함되어 있는 경우, 계층 구조는 필터 대화 상자의 리스트 박스에서도 아웃라인 열 데이터와 동일하게 유지되며,

필터 항목의 체크박스는 트리 상태(체크, 체크 해제, 일부 체크됨)를 지원합니다. 자세한 내용은 아웃라인 열(Outline Columns)을 참조하시기 바랍니다.

날짜 트리 뷰에서, 각 계층은 아래와 같은 형식 정책을 따릅니다:

1. 날짜 트리 표시 형식은 첫 번째 날짜 유형 셀의 서식을 기준으로 합니다. 사용자가 서식을 지정하지 않은 경우, 자동 날짜 형식이 적용됩니다.

2. 문화권이 EN이고 날짜 서식 문자열에 로캘 ID가 포함되지 않은 경우, 날짜 트리 뷰의 형식은 다음과 같이 표시됩니다: 연도 패턴: YYYY, 월 패턴: MM, 일 패턴: DD

날짜 유형 값 필터는 데이터에 따라 아래와 같은 시나리오로 표시됩니다:

색상으로 필터

필터 열에서 다음 두 가지 모드 중 하나를 기반으로 색상 필터를 적용할 수 있습니다:

• 글꼴 색상으로 필터 – 선택한 글꼴 색상을 가진 셀을 표시합니다.

• 셀 배경 색상으로 필터 – 선택한 배경 색상을 가진 셀을 표시합니다.

필터링된 범위에 두 가지 이상의 셀 배경 색상 또는 글꼴 색상이 포함되어 있는 경우, 색상 필터 메뉴가 활성화됩니다.