# 행 필터 동작 사용자 정의

## Content

필터링 전후 동작을 사용자 정의할 수 있습니다.
행 필터 작업을 사용자 정의하려면 다음과 같이 수행합니다:

1. [RowFilterBase](/spreadjs/api/v19/classes/GC.Spread.Sheets.Filter.RowFilterBase)를 상속한 새 클래스를 생성합니다.
2. [onFilter](/spreadjs/api/v19/classes/GC.Spread.Sheets.Filter.RowFilterBase#onFilter) 메서드를 오버라이드하고 필터 동작을 처리합니다.

필터 해제 동작을 사용자 정의하려면 다음과 같이 수행합니다:

1. [RowFilterBase](/spreadjs/api/v19/classes/GC.Spread.Sheets.Filter.RowFilterBase)를 상속한 새 클래스를 생성합니다.
2. [onFilter](/spreadjs/api/v19/classes/GC.Spread.Sheets.Filter.RowFilterBase#onFilter)메서드를 오버라이드하고 필터 해제 동작을 처리합니다.

다음 이미지는 사용자 정의 필터 동작을 사용하여 강조된 행들을 보여줍니다.
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/crfilter.png)

## 코드 예시

다음 코드는 [RowFilterBase](/spreadjs/api/v19/classes/GC.Spread.Sheets.Filter.RowFilterBase) 클래스를 확장하고 [onFilter](/spreadjs/api/v19/classes/GC.Spread.Sheets.Filter.RowFilterBase#onFilter) 메서드를 오버라이드하여 **필터링된 행을 강조**하는 방법을 보여줍니다.

```javascript
$(function () {
    var spread = new GC.Spread.Sheets.Workbook($("#ss")[0]);
    var activeSheet = spread.getActiveSheet();
    spread.suspendPaint();
    activeSheet.setColumnWidth(0, 100);
    activeSheet.setColumnWidth(1, 200);
    activeSheet.addSpan(0, 0, 1, 2);
    activeSheet.getCell(0, 0).value("Students' Math Scores").hAlign(GC.Spread.Sheets.HorizontalAlign.center);
    activeSheet.setValue(1, 0, "Name");
    activeSheet.setValue(1, 1, "SCORE");
    var score = [
        {name: "Simon", score: 59},
        {name: "Jack", score: 70},
        {name: "Lily", score: 86},
        {name: "Bob", score: 54},
        {name: "Lucy", score: 84},
        {name: "John", score: 99}
    ];
    for (var i = 0, len = score.length; i < len; i++) {
        var student = score[i];
        activeSheet.setValue(i + 2, 0, student.name);
        activeSheet.setValue(i + 2, 1, student.score);
    }
    var b1 = new GC.Spread.Sheets.CellTypes.Button();
    b1.text("Filter Score < 60");
    activeSheet.setCellType(8, 1, b1);
    var b2 = new GC.Spread.Sheets.CellTypes.Button();
    b2.text("Unfilter this column");
    activeSheet.setCellType(9, 1, b2);

    function HighLightFilter(range) {
        GC.Spread.Sheets.Filter.RowFilterBase.call(this, range);
    }
    HighLightFilter.prototype = new GC.Spread.Sheets.Filter.RowFilterBase();
    HighLightFilter.prototype.onFilter = function (args) {
        if (!args) {
            return;
        }
        var sheet = args.sheet, range = args.range, filterRows = args.filteredRows, filterActionType = args.action;
        if (filterActionType === GC.Spread.Sheets.Filter.FilterActionType.Filter) {
            if (range.col < 0) {
                range.col = 0;
                range.colCount = sheet.getColumnCount();
            }
            for (var i = 0, len = filterRows.length; i < len; i++) {
                var r = filterRows[i];
                for (var c = range.col, len1 = range.col + range.colCount; c < len1; c++) {
                    sheet.getCell(r, c).backColor("red");
                }
            }
            sheet.setValue(9, 1, "Highlight the score less than 60");
        } else if (filterActionType === GC.Spread.Sheets.Filter.FilterActionType.Unfilter) {
            if (range.col < 0) {
                range.col = 0;
                range.colCount = sheet.getColumnCount();
            }
            for (var i = 0, len = filterRows.length; i < len; i++) {
                var r = filterRows[i];
                for (var c = range.col, len1 = range.col + range.colCount; c < len1; c++) {
                    sheet.getCell(r, c).backColor(undefined);
                }
            }
        }
    }
    var hlf = new HighLightFilter(new GC.Spread.Sheets.Range(2, 1, 6, 1));
    activeSheet.rowFilter(hlf);
    var condition = new GC.Spread.Sheets.ConditionalFormatting.Condition(GC.Spread.Sheets.ConditionalFormatting.ConditionType.NumberCondition,
            {
                compareType: GC.Spread.Sheets.ConditionalFormatting.GeneralComparisonOperators.LessThan,
                expected: 60
            });
    hlf.addFilterItem(1, condition);
    hlf.filterButtonVisible(false);
    spread.bind(GC.Spread.Sheets.Events.ButtonClicked, function (e, args) {
        if (args.row === 8) {
            if (args.col !== undefined) {
                hlf.filter(args.col);
            }
        } else if (args.row === 9) {
            if (args.col !== undefined) {
                hlf.unfilter(args.col);
            }
        }
    });
    spread.resumePaint(); 
});
```