Blazor Grid에서 Excel 필터링

Blazor Grid는 Excel과 유사한 필터링 UI를 제공하는 Excel 스타일 필터링 기능을 노출합니다. 이는 대규모 데이터 세트 작업 프로세스를 간소화합니다. 주요 아이디어는 관련성이 가장 높은 데이터를 필터링하는 동시에 관련성이 없는 항목을 제거하는 것입니다.

Blazor Grid Excel Style Filtering Example

Usage

컴포넌트IgbGrid의 엑셀 스타일 필터링을 켜려면 두 개의 입력을 설정해야 합니다. 는AllowFiltering true로 설정해야 하고, 는FilterMode 값으로ExcelStyleFilter 설정해야 합니다.

<IgbGrid AllowFiltering="true" FilterMode="FilterMode.ExcelStyleFilter" >
</IgbGrid>

상호 작용

특정 열에 대한 필터 메뉴를 열려면 머리글의 Blazor 필터 아이콘을 클릭해야 합니다. 또한 선택한 헤더에서 + SHIFT + L 조합을 CTRL 사용할 수 있습니다. 필터링 기능과 함께 열을 정렬, 고정, 이동, 선택 또는 숨길 수 있는 경우 켜진 기능에 사용할 수 있는 버튼이 있습니다.

필터가 적용되지 않으면 리스트 내 모든 항목이 선택됩니다. 목록 위의 입력에서 필터링할 수 있습니다. 데이터를 필터링하려면 목록에서 항목을 선택하거나 선택 해제한 후 적용 버튼을 클릭하거나 누르 ENTER 세요. 리스트 항목을 통해 적용된 필터링은 연산자를 가진equals 필터 표현식을, 그 표현식 사이의 논리 연산자는 isOR를 생성합니다.

검색창에 내용을 입력하고 필터를 적용하면 검색 기준에 맞는 항목만 선택됩니다. 그러나 현재 필터링된 항목에 항목을 추가하려면 필터에 현재 선택 항목 추가 옵션을 선택해야 합니다.

필터를 지우려면 모두 선택 옵션을 선택한 후 적용 버튼을 클릭하면 됩니다.

다양한 표현식으로 필터를 적용하려면 텍스트 필터를 클릭하면 특정 열에 대해 사용 가능한 모든 필터 연산자가 포함된 하위 메뉴가 열립니다. 그 중 하나를 선택하면 다양한 필터 및 논리 연산자를 사용하여 원하는 만큼 표현식을 추가할 수 있는 사용자 정의 필터 대화 상자가 열립니다. 필터를 지울 수 있는 지우기 버튼도 있습니다.

정렬, 고정, 숨기기 기능은 해당 입력을 통해 필터 메뉴에서 제거할 수 있습니다:Sortable,Selected,DisablePinning,DisableHiding.

<IgbGrid AutoGenerate="false" Data=northwindEmployees AllowFiltering="true" FilterMode="FilterMode.ExcelStyleFilter">
    <IgbColumn Field="ProductName" Sortable="true"></IgbColumn>
    <IgbColumn Field="UnitPrice" Sortable="true" DisablePinning="true" DisableHiding="true"></IgbColumn>
    <IgbColumn Field="QuantityPerUnit" Sortable="false" DisablePinning="true" DisableHiding="true"></IgbColumn>
    <IgbColumn Field="OrderDate" Sortable="true" DisablePinning="false" DisableHiding="true"></IgbColumn>
    <IgbColumn Field="Discontinued" Sortable="true"></IgbColumn>
</IgbGrid>

아래 샘플에서는 제품명과 단종 열에 네 가지 기능이 모두 활성화되어 있고, 단위당 수량은 세 가지 모두 비활성화되었으며, 단가 에는 정렬만 있고, 주문일에는 고정과 숨기기만 포함되어 있으며 모두 활성화되어 있습니다Selectable.

템플릿

엑셀 스타일 필터 메뉴를 더 맞춤화하고 싶다면, 메뉴 헤더 아이콘에 대한 커스텀 템플릿을 정의하는 속성으로 사용할 수ExcelStyleHeaderIconTemplate 있습니다.

다음 코드는 다음을 사용하여ExcelStyleHeaderIconTemplate Excel 스타일 필터 메뉴를 사용자 지정하는 방법을 보여줍니다:

<IgbGrid
    Data="Data"
    AllowFiltering="true"
    FilterMode="FilterMode.ExcelStyleFilter"
    ExcelStyleHeaderIconTemplateScript="WebGridFilterAltIconTemplate">
</IgbGrid>

// In JavaScript
igRegisterScript("WebGridFilterAltIconTemplate", (ctx) => {
    var html = window.igTemplating.html;
        return html`<img height="15px" width="15px" src="http://static.infragistics.com/xplatform/images/grid/propeller-logo.svg" title="Continued" alt="Continued" />`
}, false);

Styling

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

<IgbGrid class="grid"></IgbGrid>

그런 다음 관련 CSS 속성을 이 클래스로 설정합니다.

.grid {
    --ig-grid-filtering-row-background: #ffcd0f;
    --ig-list-item-background: #ffcd0f;
}

Demo

API References

Additional Resources

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