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

필터 작업

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

사용자 정의 필터 생성

사용자 정의 필터 항목을 생성하여 행 필터에 추가할 수 있습니다.



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

//사용자 정의 조건 생성 
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 등의 메서드를 사용하여 다양한 행 필터 상태를 가져올 수 있습니다.



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

Ask ChatGPT

$("#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 등의 메서드를 사용하여 필터 항목을 가져오고 결과를 표시할 수 있습니다.



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

$("#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 로 설정하면 필터 아이콘이 숨겨집니다.



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

Ask ChatGPT

$("#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 속성을 true로 설정하면, 같은 열 또는 인접한 열에서 빈 셀을 만날 때까지 필터 범위를 확장합니다. 기본값은 false입니다.

또한, rowFilter의 extendedRange 속성을 사용하여 확장된 필터 범위를 가져올 수 있으며, 이 속성은 배열을 반환합니다. allowAutoExtendFilterRange 속성이 false로 설정되어 있으면, extendedRange 값은 GC.Spread.Sheets.Filter.RowFilterBase.range와 동일합니다.

다음 GIF 및 해당 코드 예제는 확장된 필터 범위의 사용법과 워크시트에서 확장된 범위를 가져오는 방법을 보여줍니다.


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

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

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

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

시나리오

예시

필터가 생성되고 단일 셀만 선택된 경우, SpreadJS는 해당 범위 주변의 셀이 모두 비어 있을 때까지 필터 범위를 확장합니다.

filter-extendrange-case6.png

필터가 생성된 후, SpreadJS는 원래 값 아래로 null 값이 나올 때까지 필터 범위를 확장합니다.

filter-extendrange-case1.png

확장된 필터 범위 셀 중 하나의 값이 삭제되면, 필터 목록이 업데이트됩니다.

filter-extendrange-case3.png

기본 필터 범위 셀의 값이 삭제되면, 필터 목록에 공백이 표시됩니다.

filter-extendrange-case4.png

여러 열 필터가 생성된 경우, SpreadJS는 각 열의 값이 null이 되는 행까지 필터 범위를 자동 확장합니다.

filter-extendrange-case5.png