Blazor에서 .NET 6를 사용하여 표를 필터링하는 방법

추천0

페이지 정보

작성자 GrapeCity

작성일 2022-03-08 13:27 조회 1,753회 댓글 0건

본문

관련링크

필터링은 모든 응용 프로그램의 필수적인 부분입니다. 대용량의 데이터를 처리하는 경우에는 사용 사례에 따라 데이터의 중요한 부분을 필터링할 필요가 생기게 됩니다. ComponentOne Blazor FlexGrid에서는 검색 상자 또는 필터 행을 추가하여 데이터를 필터링할 수 있습니다.

그러나 ComponentOne 2021v3 릴리스에는 대용량 데이터 집합에 수반되는 필터와 같은 전자 상거래용 UI를 제공하는 C1DataFilter 컨트롤이 새로 도입되었습니다.

이 컨트롤은 요소에 따라 다양한 필터를 제공하며 FlexGrid, FlexChart, ListView 등의 여러 Blazor 컨트롤과 연결할 수 있습니다. 이 컨트롤은 부울, 범위, 날짜 범위, 체크리스트 필터 등 다양한 필터를 제공합니다. 이러한 필터는 컨트롤 자체에 의해 자동 생성될 수도 있고 사용자 정의 필터를 만들 수도 있습니다.

이 문서에서는 C1DataFilter 및 이전의 필터링 구현 방식들을 사용하여 필터링 UI를 만드는 방법에 대해 알아보겠습니다.

검색 상자를 사용하여 필터링

C1DataFilter 컨트롤이 추가되기 전에는 FullTextFilterBehavior 컴포넌트를 사용하여 FlexGrid를 검색/필터링하기 위해 텍스트 상자를 사용할 수 있었습니다. 이 컴포넌트의 FilterString 매개 변수는 검색 매개 변수로 사용되며, 이 문자열을 포함하는 데이터가 필터링됩니다. 다른 텍스트 상자에 FilterString 매개 변수를 사용하여 기본 검색 상자를 만들 수 있습니다.

<p style="margin:8px 0">  
  <C1TextBox Class="filled-text-box" @bind-Text="filterText" Placeholder="Search Text" />  
</p>  

<FlexGrid ColumnHeaderStyle="@("background-color:#1565C0;color:#fff;font-size: 16px;")" ItemsSource="DataSource" AutoGenerateColumns="true">  
  <FlexGridBehaviors>  
      <FullTextFilterBehavior FilterString="@filterText" MatchNumbers="true" />  
  </FlexGridBehaviors>  
</FlexGrid>

위 코드 조각에서 C1TextBox 컴포넌트는 검색 상자로 사용되며, 그 텍스트 값은 FullTextFilterBehavior 컴포넌트의 FilterString에 바인딩됩니다.

이 필터링 유형은 효과가 있지만 다른 열 및 데이터 유형에 대해서는 많은 사용자 정의 기능을 제공하지 않습니다.

FlexGrid에서 필터 행을 사용하여 필터링

또한 Blazor FlexGrid는 텍스트 기반의 각 열을 필터링/검색하기 위한 필터 행을 제공합니다. GridFilterRow 컴포넌트를 사용하여 필터 행을 추가할 수 있습니다. 이것은 각 열에 대한 텍스트 상자를 자동으로 추가하며, 여기에 텍스트를 입력하면 자동으로 데이터를 필터링합니다.

<FlexGrid ColumnHeaderStyle="@("background-color:#1565C0;color:#fff;font-size: 16px;")" ItemsSource="DataSource" AutoGenerateColumns="true">  
  <FlexGridRows>  
      <GridFilterRow Placeholder="Search" AutoComplete="true" />  
  </FlexGridRows>  
</FlexGrid>

이것은 열을 개별적으로 검색할 수 있으므로 검색 상자 메서드에 비해 장점을 갖고 있습니다. 하지만 여러 값 선택, 범위 간 필터링 등과 같은 고급 필터링 옵션을 제공하지는 않습니다.

C1DataFilter를 사용하여 필터링

새 C1DataFilter 컨트롤은 숫자 범위, 단일 값 또는 여러 값 선택, 날짜 및 시간 범위, 사용자 정의 필터 생성 옵션 등 데이터 필터링을 위한 다양한 사용자 정의 기능을 제공합니다.

C1DataFilter를 FlexGrid 뿐만 아니라 이전 메서드에 비해 중대한 이점을 제공하는 ListView, FlexChart, TreeMap 등의 컨트롤과 함께 사용할 수 있습니다.

C1DataFilter를 사용하여 필터링 UI를 만들려면 데이터 소스를 C1DataFilter 컴포넌트에 전달해야 합니다. 그러면 UI를 비롯하여 다양한 데이터 유형에 맞는 필터 유형이 자동으로 생성됩니다.

<C1DataFilter @ref="theFilter" ItemsSource="@DataSource"></C1DataFilter>

이제는 FlexGrid의 소스와 동일한 데이터 소스를 바인딩하여 필터에 따라 데이터가 업데이트되도록 해야 합니다.

<FlexGrid @ref="theGrid" ItemsSource="@DataSource" AutoGenerateColumns="true"></FlexGrid>

결과는 다음과 비슷할 것입니다.

C1DataFilter가 데이터 유형마다 서로 다른 필터 편집기를 표시하는 것을 알 수 있습니다. 따라서 필터링이 더욱 안정적이고 사용자에게 친숙해질 수 있습니다.

C1DataFilter를 사용하여 사용자 정의 필터링

앞에서 언급했듯이 C1DataFilter를 사용하여 사용자 정의 필터를 만들 수도 있습니다. 이것은 사용자 정의 필터를 만들기 위해 상속할 수 있는 CustomFilter, CheckboxFilter와 같이 다양한 필터링 클래스를 제공합니다. 이 예제에서 모델, 가격, 자동 전송 속성에 대한 사용자 정의 필터를 만들었습니다.

사용자 정의 필터의 코드는 이 문서에서 다루기에는 너무 크지만, 이 문서의 끝에 나오는 샘플 링크에서 확인할 수 있습니다.

사용자 정의 필터를 Razor 컴포넌트로 변환하고 이를 C1DataFilter에 추가하여 공개할 수 있습니다.

<C1DataFilter ItemsSource="@DataSource"  
                    AutoGenerateFilters="false"  
                    Style="@("max-height: inherit;")"  
                    >  
          <DataFilters>  
              <PriceFilter PropertyName="Price" HeaderText="Price" PriceIntervals="@priceIntervals" />  
              <ModelFilter PropertyName="Model" CarModels="@carsModels" HeaderText="Model" />  
              <TransmissionFilter PropertyName="TransmissAutomatic" HeaderText="Automatic transmission" />  
          </DataFilters>  
</C1DataFilter>

PriceFilter, ModelFilter 및 TransmissionFilter는 사용자 정의 필터 컴포넌트입니다.