Web Components 그리드 필터링

웹 Web Components 그리드의 Ignite UI for Web Components 특정 기준이나 조건에 따라 데이터를 선택적으로 표시하거나 숨길 수 있는 기능입니다. IgcGridComponent 구성 요소가 풍부한 필터링 API와 모든 필터링 기능을 제공하는 바인딩된 데이터 컨테이너가 있습니다. 여기에서 사용 가능한 필터링 유형은 세 가지입니다.

• 빠른 필터링
• Excel 스타일 필터링
• 고급 필터링

Web Components Grid Filtering Example

아래 샘플은 IgcGridComponent의 Quick Filter 사용자 경험을 보여줍니다.

Setup

필터링이 활성화되었는지 여부와 어떤 필터링 모드를 사용해야 하는지 지정하기 위해 IgcGridComponent 다음 속성(allowFiltering, allowAdvancedFiltering, filterMode 및 filterable)을 노출합니다.

속성 allowFiltering 사용하면 다음 옵션을 지정할 수 있습니다.

• false- 해당 그리드에 대한 필터링이 비활성화됩니다. 이것이 기본값입니다.
• true- 해당 그리드에 대한 필터링이 활성화됩니다.

​allowAdvancedFiltering 속성을 사용하면 다음 옵션을 지정할 수 있습니다.

• false- 해당 그리드에 대한 고급 필터링이 비활성화됩니다. 이것이 기본값입니다.
• true- 해당 그리드에 대한 고급 필터링이 활성화됩니다.

​filterMode 속성을 사용하면 다음 옵션을 지정할 수 있습니다.

• QuickFilter- 단순한 필터링 UI입니다. 이것이 기본값입니다.
• ExcelStyleFilter- Excel과 유사한 필터링 UI입니다.

​filterable 속성을 사용하면 다음 옵션을 지정할 수 있습니다.

• true- 해당 열에 대한 필터링이 활성화됩니다. 이것이 기본값입니다.
• false- 해당 열에 대한 필터링이 비활성화됩니다.

<igc-grid id="grid1" auto-generate="false" allow-filtering="true">
    <igc-column field="ProductName" data-type="string"></igc-column>
    <igc-column field="Price" data-type="number" filterable="false"></igc-column>
</igc-grid>

활성화하려면 고급 필터링 그러나 allowAdvancedFiltering input 속성을 참.7

<igc-grid  data="data" auto-generate="true" allow-advanced-filtering="true">
</igc-grid>

[!Note] You can enable both the QuickFilter or ExcelStyleFilter and the advanced filtering user interfaces in the IgcGridComponent. Both filtering user interfaces will work independently of one another. The final filtered result in the IgcGridComponent is the intersection between the results of the two filters.

Interaction

특정 열에 대한 필터 행을 열려면 헤더 아래의 '필터' 칩을 클릭해야 합니다. 조건을 추가하려면 입력 왼쪽의 드롭다운을 사용하여 필터 피연산자를 선택하고 값을 입력해야 합니다. 숫자 및 날짜 열의 경우 기본적으로 '같음'이 선택되고, 문자열의 경우 '포함', 부울의 경우 '모두'가 선택됩니다. 'Enter'를 누르면 조건이 확인되고 이제 다른 조건을 추가할 수 있습니다. '조건' 칩 사이에는 논리 연산자를 결정하는 드롭다운이 있으며 기본적으로 'AND'가 선택됩니다. 조건을 제거하려면 칩의 'X' 버튼을 클릭하고, 편집하려면 칩을 선택해야 하며 입력이 칩의 데이터로 채워집니다. 필터 행이 열려 있는 동안 필터링 가능한 열의 헤더를 클릭하여 선택하고 필터 조건을 추가할 수 있습니다.

일부 필터링 조건이 열에 적용되고 필터 행이 닫혀 있는 동안 칩의 닫기 버튼을 클릭하여 조건을 제거하거나 칩 중 하나를 선택하여 필터 행을 열 수 있습니다. 모든 조건을 표시할 공간이 충분하지 않은 경우 추가 조건 수를 나타내는 배지와 함께 필터 아이콘이 표시됩니다. 필터 행을 열기 위해 클릭할 수도 있습니다.

Usage

개발자가 자체 구현으로 대체할 수 있는 모든 표준 필터링 조건은 물론 기본 필터링 전략도 기본적으로 제공됩니다. 또한 사용자 정의 필터링 조건을 쉽게 연결할 수 있는 방법도 제공했습니다. IgcGridComponent는 현재 단순한 필터링 UI뿐만 아니라 더 복잡한 필터링 옵션도 제공합니다. 열의 설정된 dataType에 따라 올바른 필터링 작업 집합이 필터 UI 드롭다운 내에 로드됩니다. 또한 IgnoreCase 및 초기 Condition 속성을 설정할 수 있습니다.

필터링 기능은 IgcGridComponent 구성요소에 대해 활성화되며, allowFiltering 입력을 true로 설정합니다. 기본 filterMode는 QuickFilter 이며 런타임에 변경할 수 없습니다. 특정 열에 대해 이 기능을 비활성화하려면 filterable 입력을 false로 설정하세요.

<igc-grid auto-generate="false" allow-filtering="true">
    <igc-column field="ProductName" data-type="string"></igc-column>
    <igc-column field="Price" datdata-typeaType="number"></igc-column>
    <igc-column field="Discontinued" data-type="boolean" filterable="false"></igc-column>
</igc-grid>

[!Note] If values of type string are used by a column of data type date, the IgcGridComponent won't parse them to date objects and using filtering conditions won't be possible. If you want to use string objects, additional logic should be implemented on the application level, in order to parse the values to date objects.

​IgcGridComponent API를 통해 모든 열 또는 열 조합을 필터링할 수 있습니다. IgcGridComponent는 이 작업을 위한 여러 메소드(filter, filterGlobal 및 clearFilter를 노출합니다.

• filter- 단일 열 또는 열 조합을 필터링합니다.

5개의 필터링 피연산자 클래스가 노출되어 있습니다.

• IgcFilteringOperand: 사용자 정의 필터링 조건을 정의할 때 상속될 수 있는 기본 필터링 피연산자입니다.
• IgcBooleanFilteringOperand​ ​부울 유형에 대한 모든 기본 필터링 조건을 정의합니다.
• IgcNumberFilteringOperand​ ​숫자 유형에 대한 모든 기본 필터링 조건을 정의합니다.
• IgcStringFilteringOperand​ ​문자열 유형에 대한 모든 기본 필터링 조건을 정의합니다.
• IgcDateFilteringOperand​ ​날짜 유형에 대한 모든 기본 필터링 조건을 정의합니다.

// Single column filtering

// Filter the `ProductName` column for values which `contains` the `myproduct` substring, ignoring case
this.grid.filter('ProductName', 'myproduct', IgcStringFilteringOperand.instance().condition('contains'), true);

유일한 필수 매개변수는 열 필드 키와 필터링 용어입니다. 조건과 대소문자 구분은 모두 제공되지 않은 경우 열 속성에서 추론됩니다. 다중 필터링의 경우 메서드는 필터링 표현식의 배열을 허용합니다.

[!Note] The filtering operation DOES NOT change the underlying data source of the IgcGridComponent.

// Multi column filtering

const gridFilteringExpressionsTree = new IgcFilteringExpressionsTree(FilteringLogic.And);
const productFilteringExpressionsTree = new IgcFilteringExpressionsTree(FilteringLogic.And, 'ProductName');
const productExpression = {
    condition: IgcStringFilteringOperand.instance().condition('contains'),
    fieldName: 'ProductName',
    ignoreCase: true,
    searchVal: 'ch'
};
productFilteringExpressionsTree.filteringOperands.push(productExpression);
gridFilteringExpressionsTree.filteringOperands.push(productFilteringExpressionsTree);

const priceFilteringExpressionsTree = new IgcFilteringExpressionsTree(FilteringLogic.And, 'Price');
const priceExpression = {
    condition: IgcNumberFilteringOperand.instance().condition('greaterThan'),
    fieldName: 'UnitPrice',
    ignoreCase: true,
    searchVal: 20
};
priceFilteringExpressionsTree.filteringOperands.push(priceExpression);
gridFilteringExpressionsTree.filteringOperands.push(priceFilteringExpressionsTree);

this.grid.filteringExpressionsTree = gridFilteringExpressionsTree;

• filterGlobal- 기존 필터를 모두 지우고 모든 그리드 열에 새 필터링 조건을 적용합니다.

// Filter all cells for a value which contains `myproduct`
this.grid.filteringLogic = FilteringLogic.Or;
this.grid.filterGlobal('myproduct', IgcStringFilteringOperand.instance().condition('contains'), false);

• clearFilter- 대상 열에 적용된 필터링을 모두 제거합니다. 인수 없이 호출하면 모든 열의 필터링이 지워집니다.

// Remove the filtering state from the ProductName column
this.grid.clearFilter('ProductName');

// Clears the filtering state from all columns
this.grid.clearFilter();

Initial filtered state

​IgcGridComponent의 초기 필터링 상태를 설정하려면 필터링할 각 열에 대해 IgcGridComponent filteringExpressionsTree 속성을 filteringExpressionsTree 배열로 설정하세요.

constructor() {
    const gridFilteringExpressionsTree = new IgcFilteringExpressionsTree(FilteringLogic.And);
    const productFilteringExpressionsTree = new IgcFilteringExpressionsTree(FilteringLogic.And, 'ProductName');
    const productExpression = {
        condition: IgcStringFilteringOperand.instance().condition('contains'),
        fieldName: 'ProductName',
        ignoreCase: true,
        searchVal: 'c'
    };
    productFilteringExpressionsTree.filteringOperands.push(productExpression);
    gridFilteringExpressionsTree.filteringOperands.push(productFilteringExpressionsTree);

    this.grid.filteringExpressionsTree = gridFilteringExpressionsTree;
}

Filtering logic

​IgcGridComponent의 filteringLogic 속성은 IgcGridComponent에서 여러 열 필터링을 해결하는 방법을 제어합니다. IgcGridComponent API 또는 IgcGridComponent 입력 속성을 통해 언제든지 변경할 수 있습니다.

import { FilteringLogic } from "igniteui-webcomponents-grids/grids";

this.grid.filteringLogic = FilteringLogic.OR;

​AND의 기본값은 현재 적용된 모든 필터링 표현식과 일치하는 행만 반환합니다. 위의 예에 따르면 'ProductName' 셀 값에 'myproduct'가 포함되고 'Price' 셀 값이 55보다 큰 경우 행이 반환됩니다.

​OR로 설정하면 'ProductName' 셀 값에 'myproduct'가 포함되거나 'Price' 셀 값이 55보다 큰 경우 행이 반환됩니다.

Custom Filtering Operands

필터링 피연산자를 추가, 제거 또는 수정하여 필터링 메뉴를 사용자 정의할 수 있습니다. 기본적으로 필터링 메뉴에는 열의 데이터 유형(IgcBooleanFilteringOperand, IgcDateFilteringOperand, IgcNumberFilteringOperand 및 IgcStringFilteringOperand)을 기반으로 하는 특정 피연산자가 포함되어 있습니다. 이러한 클래스 또는 기본 클래스 IgcFilteringOperand 확장하여 필터링 메뉴 항목의 동작을 변경할 수 있습니다.

아래 샘플에서 "제품 이름" 및 "단종" 열 필터 메뉴를 검사하세요. "Discontinued" 열 필터의 경우 피연산자 수를 All, True 및 False로 제한했습니다. "제품 이름" 열 필터의 경우 대소문자 구분 검색을 수행하도록 포함 및 포함하지 않음 피연산자 논리를 수정하고 비어 있음 및 비어 있지 않음 피연산자도 추가했습니다.

이를 수행하려면 IgcStringFilteringOperand 및 IgcBooleanFilteringOperand를 확장하고, 연산과 해당 논리를 수정하고, 열 filters 입력을 새 피연산자로 설정하세요.

export class GridCustomFilteringComponent {
    public caseSensitiveFilteringOperand = CaseSensitiveFilteringOperand.instance();
    public booleanFilteringOperand = BooleanFilteringOperand.instance();
}

export class CaseSensitiveFilteringOperand extends IgcStringFilteringOperand {
    private constructor() {
        super();
        const customOperations = [
            {
                iconName: 'contains',
                isUnary: false,
                logic: (target: string, searchVal: string, ignoreCase?: boolean) => {
                    ignoreCase = false;
                    const search = IgcStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase);
                    target = IgcStringFilteringOperand.applyIgnoreCase(target, ignoreCase);
                    return target.indexOf(search) !== -1;
                },
                name: 'Contains (case sensitive)'
            },
            {
                iconName: 'does_not_contain',
                isUnary: false,
                logic: (target: string, searchVal: string, ignoreCase?: boolean) => {
                    ignoreCase = false;
                    const search = IgcStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase);
                    target = IgcStringFilteringOperand.applyIgnoreCase(target, ignoreCase);
                    return target.indexOf(search) === -1;
                },
                name: 'Does Not Contain (case sensitive)'
            }
        ];

        const emptyOperators = [
            // 'Empty'
            this.operations[6],
            // 'Not Empty'
            this.operations[7]
        ];

        this.operations = customOperations.concat(emptyOperators);
    }
}

export class BooleanFilteringOperand extends IgcBooleanFilteringOperand {
    private constructor() {
        super();
        this.operations = [
            // 'All'
            this.operations[0],
            // 'TRUE'
            this.operations[1],
            // 'FALSE'
            this.operations[2]
        ];
    }
}

<!-- grid-custom-filtering.component.html -->

<igc-grid auto-generate="false" allow-filtering="true">
    <igc-column id="ProductName" field="ProductName" header="Product Name" data-type="string"></igc-column>
    <igc-column id="Discontinued" field="Discontinued" header="Discontinued" data-type="boolean"></igc-column>
</igc-grid>

constructor() {
    var productName = document.getElementById('ProductName') as IgcColumnComponent;
    var discontinued = document.getElementById('Discontinued') as IgcColumnComponent;
    productName.filters = this.caseSensitiveFilteringOperand;
    discontinued.filters = this.booleanFilteringOperand;
}

Styling

사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 일부 색상을 변경하려면 먼저 그리드에 대한 클래스를 설정해야 합니다.

<igc-grid class="grid"></igc-grid>

그런 다음 해당 클래스에 대한 관련 CSS 속성을 설정합니다.

.grid {
    --ig-grid-filtering-row-text-color: #292826;
    --ig-grid-filtering-row-background: #ffcd0f;
    --ig-grid-filtering-header-text-color: #292826;
    --ig-grid-filtering-header-background: #ffcd0f;
}

Demo

Known Limitations

[!Note] Some browsers such as Firefox fail to parse regional specific decimal separators by considering them grouping separators, thus resulting in them being invalid. When inputting such values for a numeric column filter value, only the valid part of the number will be applied to the filtering expression. For further information, refer to the Firefox issue.

API References

• IgcGridComponent
• IgcColumn

Additional Resources

• 가상화 및 성능
• 페이징
• 정렬
• 요약
• 열 이동
• 열 고정
• 열 크기 조정
• 선택

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Ignite UI for Web Components 포럼
• Ignite UI for Web Components GitHub