# 필터 작업

## Content

SpreadJS에서는 행 필터에 대해 다양한 작업을 수행할 수 있습니다.

## 사용자 정의 필터 생성

사용자 정의 필터 항목을 생성하여 행 필터에 추가할 수 있습니다.
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/customfilter.gif)

다음은 **숫자 값이 10에서 50 사이인 항목만 표시하는 사용자 정의 필터**를 생성하는 코드 예제입니다:

```javascript
//사용자 정의 조건 생성 
function CustomFilter(){
    GC.Spread.Sheets.ConditionalFormatting.Condition.apply(this, arguments);
    //this.conditionType("CustomFilter");
};

CustomFilter.prototype = new GC.Spread.Sheets.ConditionalFormatting.Condition();
CustomFilter.prototype.evaluate = function (evaluator, row, col) {
    var value = evaluator.getValue(row, col);
    if (value !== null && value >= 10 && value <= 50) {
        //아래 조건들이 만족될 때만 True 반환
        // (1)값을 입력
        // (2)값이 10 미만이 아님
        // (3)값이 50 초과 아님
        return true;
    } else {
        return false;
    }
};

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

activeSheet.setValue(0, 0, 10);
activeSheet.setValue(1, 0, 100);
activeSheet.setValue(2, 0, 50);
activeSheet.setValue(3, 0, 40);
activeSheet.setValue(4, 0, 80);
activeSheet.setValue(5, 0, 1);
activeSheet.setValue(6, 0, 65);
activeSheet.setValue(7, 0, 20);
activeSheet.setValue(8, 0, 30);
activeSheet.setValue(9, 0, 35);

//행 필터 설정 
var rowFilter = new GC.Spread.Sheets.Filter.HideRowFilter(new GC.Spread.Sheets.Range(0, 0, 7, 1));
activeSheet.rowFilter(rowFilter);
rowFilter.addFilterItem(0, new CustomFilter());
rowFilter.filter(0);
```

## 행 필터 상태 가져오기

**RowFilterBase** 클래스의 **isFiltered** , **isRowFilteredOut** , **onFilter** 등의 메서드를 사용하여 다양한 행 필터 상태를 가져올 수 있습니다.
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/filter-status.gif)

다음 코드 예제는 행 또는 열이 필터링되었는지를 표시하는 버튼을 설정하는 방법을 보여줍니다.

```javascript
$("#button1").click(function()   
{
    var rowFilter = spread.getActiveSheet().rowFilter();
    if (rowFilter.isFiltered(0))
    {
        console.log("Row-filtering executed for Column1");
    }
    else
    {
        console.log("Row-filtering not executed for Column1");
    }
})
```

## 행 필터 결과 가져오기

**RowFilterBase** 클래스의 **getFilterItems** 등의 메서드를 사용하여 필터 항목을 가져오고 결과를 표시할 수 있습니다.
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/filter-result.gif)

다음 코드 예제는 브라우저 콘솔에 필터 결과를 출력하는 방법을 보여줍니다.

```javascript
$("#button1").click(function ()
{
    var rowFilter = spread.getActiveSheet().rowFilter();
    //*********************************************
    
    // 만약 Column1이 필터링되지 않았다면 나가기
    //*********************************************
    if (!rowFilter.isFiltered(0))
    {
        return;
    }
    
    //*********************************************
    // 필터된 문자열
    //*********************************************
    var filterItems = rowFilter.getFilterItems(0);
    var str = "Filtered strings:";
    filterItems.forEach(function (item)
    {
        str += " " + item.expected();
    })
    console.log(str);
    console.log("");
    
    //*********************************************
    // 필터링되어 표시된(displayed) 행의 수  
    //*********************************************
    var range = rowFilter.range;
    var filteredInRows = [], filteredOutRows = [];
    for (var i = range.row, last = range.row + range.rowCount; i < last; i++)
    {
        if (rowFilter.isRowFilteredOut(i))
        {
            filteredOutRows.push(i);
        }
        else
        {
            filteredInRows.push(i);
        }
    }
    
    console.log("Number of Filtered-In (displayed) rows: " + filteredInRows.length);
    console.log("");
    // *********************************************
    // 필터링되어 숨겨진(Hidden) 행의 수  
    // *********************************************
    console.log("Number of Filtered-Out (hidden) rows: " + filteredOutRows.length);
    console.log("");
    filteredOutRows.forEach(function(item){
        console.log("Filtered-Out (hidden) row index: " + item);
    });
    
    console.log("");
    //*********************************************
    // 필터링된(표시/숨김) 행 목록
    //*********************************************
    filteredOutRows.forEach(function(item){
        console.log("Data of Filtered-Out (hidden) row: " + activeSheet.getValue(item, 0));
    });
    
    console.log("");
    filteredInRows.forEach(function(item)
    {
        console.log("Data of Filtered-In (displayed) row: " + activeSheet.getValue(item, 0));
    });
});
```

## 필터 아이콘 숨기기

RowFilterBase의 **filterButtonVisible** 메서드를 사용하여 필터 표시 아이콘(필터 버튼)을 표시할지 여부를 설정할 수 있습니다.
기본값은 true 이며, false 로 설정하면 필터 아이콘이 숨겨집니다.
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/filter-icon-display.gif)

다음 코드 예제는 전용 버튼을 통해 필터 아이콘을 숨기거나 표시하는 방법을 보여줍니다.

```javascript
$("#button1").click(function()
{
    // filter 인디케이터 숨기기                        
    var rowFilter = spread.getActiveSheet().rowFilter();
    rowFilter.filterButtonVisible(0, false);
    activeSheet.repaint();
});
           
$("#button2").click(function()
{
    // filter 인디케이터 다시 표시                        
    var rowFilter = spread.getActiveSheet().rowFilter();
    rowFilter.filterButtonVisible(0, true);
    activeSheet.repaint();
});
```

## 필터 범위 자동 확장

SpreadJS에서는 원래의 필터 범위를 넘어 필터 범위를 확장할지 여부를 선택할 수 있습니다.
[allowAutoExtendFilterRange](/spreadjs/api/v19/classes/GC.Spread.Sheets.Workbook#options) 속성을 true로 설정하면, 같은 열 또는 인접한 열에서 빈 셀을 만날 때까지 필터 범위를 확장합니다. 기본값은 false입니다.
또한, rowFilter의 [extendedRange](/spreadjs/api/v19/classes/GC.Spread.Sheets.Filter.RowFilterBase#extendedRange) 속성을 사용하여 확장된 필터 범위를 가져올 수 있으며, 이 속성은 배열을 반환합니다. allowAutoExtendFilterRange 속성이 false로 설정되어 있으면, extendedRange 값은 GC.Spread.Sheets.Filter.RowFilterBase.range와 동일합니다.
다음 GIF 및 해당 코드 예제는 확장된 필터 범위의 사용법과 워크시트에서 확장된 범위를 가져오는 방법을 보여줍니다.
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/filter-extendrange-example.gif)

```javascript
function AllowAutoExtend(spread, rowFilter) {
    // allowAutoExtendFilterRange을 true로 설정
    spread.options.allowAutoExtendFilterRange = true;

    // 확장된 범위 가져오기
    var extendedFilterRange = rowFilter.extendedRange;
    // 반환 -  row: 2, rowCount: 5, col: 0, colCount: 5
}
```

>type=warning
> **참고**: 이 속성은 필터가 포함된 Excel 파일을 가져올 때 `true`로 설정됩니다.

아래 표는 `auto-extend filter range`가 `true`로 설정되었을 때 발생할 수 있는 다양한 시나리오를 보여줍니다.

| 시나리오 | 예시 |
| ---- | --- |
| 필터가 생성되고 단일 셀만 선택된 경우, SpreadJS는 해당 범위 주변의 셀이 모두 비어 있을 때까지 필터 범위를 확장합니다. | ![filter-extendrange-case6.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/filter-extendrange-case6.74d90a.png) |
| 필터가 생성된 후, SpreadJS는 원래 값 아래로 null 값이 나올 때까지 필터 범위를 확장합니다. | ![filter-extendrange-case1.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/filter-extendrange-case1.5cd182.png) |
| 확장된 필터 범위 셀 중 하나의 값이 삭제되면, 필터 목록이 업데이트됩니다. | ![filter-extendrange-case3.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/filter-extendrange-case3.72a873.png) |
| 기본 필터 범위 셀의 값이 삭제되면, 필터 목록에 공백이 표시됩니다. | ![filter-extendrange-case4.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/filter-extendrange-case4.43e3b3.png) |
| 여러 열 필터가 생성된 경우, SpreadJS는 각 열의 값이 null이 되는 행까지 필터 범위를 자동 확장합니다. | ![filter-extendrange-case5.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/filter-extendrange-case5.3c2ec8.png) |