React Grid 검색 필터

    React Grid의 Ignite UI for React 데이터 컬렉션에서 값을 찾는 프로세스를 가능하게 합니다. 이 기능을 설정하는 것을 더 쉽게 만들었으며 검색 입력 상자, 버튼, 키보드 탐색 및 더 나은 사용자 경험을 위한 기타 유용한 기능으로 구현할 수 있습니다. 브라우저는 기본적으로 콘텐츠 검색 기능을 제공하지만 대부분의 경우 IgrGrid 보기에서 벗어난 열과 행을 가상화합니다. 이러한 경우 네이티브 브라우저 검색은 DOM의 일부가 아니기 때문에 가상화된 셀에서 데이터를 검색할 수 없습니다. React Material 테이블 기반 그리드를 다음과 같이 확장했습니다. 검색 API 이를 통해 검색할 수 있습니다. 가상화된 콘텐츠의 IgrGrid.

    React 검색 예제

    다음 예는 모든 열과 행에서 검색할 수 있을 뿐만 아니라 각 열에 대한 특정 필터링 옵션을 허용하는 검색 입력 상자가 있는 IgrGrid 나타냅니다.

    EXAMPLE
    DATA
    TSX
    CSS
    Edit in:

    이 샘플이 마음에 드시나요? Ignite UI for React 전체에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

    React 검색 사용법

    그리드 설정

    그리드를 생성하고 이를 데이터에 바인딩하는 것부터 시작해 보겠습니다. 또한 우리가 사용할 구성 요소에 대한 몇 가지 사용자 정의 스타일을 추가할 것입니다!

    .gridSize {
    --ig-size: var(--ig-size-small);
}
css
    <IgrGrid ref={gridRef} className="gridSize" autoGenerate={false} allowFiltering={true} data={data}>
    <IgrColumn field="IndustrySector" dataType="string" sortable={true}></IgrColumn>        
    <IgrColumn field="IndustryGroup" dataType="string" sortable={true}></IgrColumn>        
    <IgrColumn field="SectorType" dataType="string" sortable={true}></IgrColumn>        
    <IgrColumn field="KRD" dataType="number" sortable={true}></IgrColumn>        
    <IgrColumn field="MarketNotion" dataType="number" sortable={true}></IgrColumn>  
</IgrGrid>
tsx

    좋습니다. 이제 IgrGrid의 검색 API를 준비하겠습니다! 현재 검색된 텍스트를 저장하고 검색이 대소문자를 구분하는지 및/또는 정확한 일치를 기준으로 하는지 여부를 저장하는 데 사용할 수 있는 몇 가지 속성을 만들 수 있습니다.

    const gridRef = useRef<IgrGrid>(null);
const [caseSensitiveSelected, setCaseSensitiveSelected] = useState<boolean>(false);
const [exactMatchSelected, setExactMatchSelected] = useState<boolean>(false);
const [searchText, setSearchText] = useState('');
tsx

    React 검색창 입력

    이제 검색 입력을 만들어 보겠습니다! searchText를 새로 생성된 입력의 value 속성에 바인딩하고 inputOccured 이벤트를 구독하면 사용자가 수정한 모든 searchText를 감지할 수 있습니다. 이를 통해 IgrGrid의 findNext 및 findPrev 메소드를 사용하여 searchText의 모든 항목을 강조 표시하고 다음/이전 항목으로 스크롤할 수 있습니다(호출한 메소드에 따라 다름).

    ​findNext 및 findPrev 메소드에는 모두 세 가지 인수가 있습니다.

    • Text: string (검색하려는 텍스트)
    • (선택 사항) CaseSensitive: 부울 (검색 시 대소문자를 구분해야 하는지 여부, 기본값은 false입니다.)
    • (선택 사항) ExactMatch: 부울 (정확한 일치로 검색해야 하는지 여부, 기본값은 false입니다.)

    정확한 일치로 검색할 때 검색 API는 대소문자 구분도 고려하여 SearchText와 완전히 일치하는 셀 값만 결과로 강조 표시합니다. 예를 들어 'software' 및 'Software' 문자열은 대소문자 구분을 무시하고 정확히 일치합니다.

    위의 메소드는 숫자 값(IgrGrid에 지정된 문자열이 포함된 횟수)을 반환합니다.

    const handleOnSearchChange = (event: IgrComponentValueChangedEventArgs) => {
    setSearchText(event.detail);
    nextSearch(event.detail, caseSensitiveSelected, exactMatchSelected);
}

<IgrInput name="searchBox" value={searchText} onInput={handleOnSearchChange}>
</IgrInput>
tsx

    검색 버튼 추가

    검색 결과를 자유롭게 검색하고 탐색하기 위해 버튼의 각 클릭 이벤트 핸들러 내에서 findNext 및 findPrev 메소드를 호출하여 두 개의 버튼을 만들어 보겠습니다.

    const prevSearch = (text: string, caseSensitive: boolean, exactMatch: boolean) => {
    gridRef.current.findPrev(text, caseSensitive, exactMatch);
}

const nextSearch = (text: string, caseSensitive: boolean, exactMatch: boolean) => {
    gridRef.current.findNext(text, caseSensitive, exactMatch);
}

<IgrIconButton variant="flat" name="prev" collection="material" onClick={() => prevSearch(searchText, caseSensitiveSelected, exactMatchSelected)}>
</IgrIconButton>
<IgrIconButton variant="flat" name="next" collection="material" onClick={() => nextSearch(searchText, caseSensitiveSelected, exactMatchSelected)}>
</IgrIconButton>
tsx

    또한 사용자가 키보드의 화살표 키와 입력하다 열쇠. 이를 달성하기 위해 우리는 다음을 처리할 수 있습니다. 키다운 입력의 기본 캐럿 이동을 방지하여 검색 입력 이벤트 PreventDefault 메서드를 호출하고 findNext / findPrev 사용자가 어떤 키를 눌렀는지에 따라 방법이 달라집니다.

    const searchKeyDown = (e: KeyboardEvent<HTMLElement>) => {
    if (e.key === 'Enter') {
        e.preventDefault();
        nextSearch(searchText, caseSensitiveSelected, exactMatchSelected);
    } else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
        e.preventDefault();
        prevSearch(searchText, caseSensitiveSelected, exactMatchSelected);
    }
}

 <div onKeyDown={searchKeyDown}>
    <IgrInput name="searchBox" value={searchText} onInput={handleOnSearchChange}></IgrInput>
</div>
tsx

    대소문자 구분 및 정확한 일치

    이제 사용자가 검색이 대/소문자를 구분해야 하는지 및/또는 정확히 일치해야 하는지 선택할 수 있도록 허용하겠습니다. 이를 위해 부울 상태 변수와 함께 구성 요소를 사용하여 IgrChip IgrChip이 선택되었는지 여부를 나타낼 수 있습니다.

    const [caseSensitiveSelected, setCaseSensitiveSelected] = useState<boolean>(false);
const [exactMatchSelected, setExactMatchSelected] = useState<boolean>(false);

const handleCaseSensitiveChange = (event: IgrComponentBoolValueChangedEventArgs) => {
    setCaseSensitiveSelected(event.detail);
    nextSearch(searchText, event.detail, exactMatchSelected);
}

const handleExactMatchChange = (event: IgrComponentBoolValueChangedEventArgs) => {
    setExactMatchSelected(event.detail);
    nextSearch(searchText, caseSensitiveSelected, event.detail);
}

<IgrChip selectable={true} onSelect={handleCaseSensitiveChange}>
    <span>Case Sensitive</span>
</IgrChip>
<IgrChip selectable={true} onSelect={handleExactMatchChange}>
    <span>Exact Match</span>
</IgrChip>
tsx

    고집

    ​IgrGrid 필터링 및 정렬하거나 레코드를 추가 및 제거하려면 어떻게 해야 합니까? 이러한 작업 후에는 현재 검색의 하이라이트가 자동으로 업데이트되어 SearchText와 일치하는 모든 텍스트에 대해 지속됩니다! 또한 검색은 페이징과 함께 작동하며 IgrGrid의 PerPage 속성을 변경하여 강조 표시를 유지합니다.

    아이콘 추가

    다른 구성 요소 중 일부를 사용하여 풍부한 사용자 인터페이스를 만들고 전체 검색 창의 전반적인 디자인을 개선할 수 있습니다! 검색 입력 왼쪽에 멋진 검색 또는 삭제 아이콘, 검색 옵션을 위한 몇 개의 칩, 오른쪽 탐색을 위한 멋진 리플 스타일 버튼과 결합된 일부 재료 디자인 아이콘을 가질 수 있습니다.

    먼저 재료 아이콘이 있는 두 개의 리플 스타일 버튼을 추가하여 입력 오른쪽에 검색 탐색 버튼을 생성해 보겠습니다. 클릭 이벤트에 대한 핸들러는 동일하게 유지되어 / findPrev methods를 호출합니다 findNext.

    • 및 ExactMatch 속성을 토글 CaseSensitive 하는 몇 가지 칩을 표시합니다. 체크박스를 두 개의 스타일리시한 칩으로 교체했습니다. 칩을 클릭할 때마다 해당 핸들러를 호출합니다.
    const prevSearch = (text: string, caseSensitive: boolean, exactMatch: boolean) => {
    gridRef.current.findPrev(text, caseSensitive, exactMatch);
}

const nextSearch = (text: string, caseSensitive: boolean, exactMatch: boolean) => {
    gridRef.current.findNext(text, caseSensitive, exactMatch);
}

<div slot="suffix">
    <IgrIconButton variant="flat" name="prev" collection="material" onClick={() => prevSearch(searchText, caseSensitiveSelected, exactMatchSelected)}>
        <IgrRipple></IgrRipple>
    </IgrIconButton>
    <IgrIconButton variant="flat" name="next" collection="material" onClick={() => nextSearch(searchText, caseSensitiveSelected, exactMatchSelected)}>
        <IgrRipple></IgrRipple>
    </IgrIconButton>
</div>
tsx

    이제 입력 왼쪽에 검색 및 지우기 아이콘을 추가해 보겠습니다.

    const clearSearch = () => {
    setSearchText('');
    gridRef.current.clearSearch();
}

<div slot="prefix">
    {searchText.length === 0 ? (
        <IgrIconButton variant="flat" name="search"  collection="material">
        </IgrIconButton>
        ) : (
        <IgrIconButton variant="flat" name="clear" collection="material" onClick={clearSearch}>
        </IgrIconButton>
    )}
</div>
tsx

    마지막으로, 이것은 모든 것을 결합할 때의 최종 결과입니다.

    useEffect(() => {
    registerIconFromText("search", searchIconText, "material");
    registerIconFromText("clear", clearIconText, "material");
    registerIconFromText("prev", prevIconText, "material");
    registerIconFromText("next", nextIconText, "material");
}, []);

<IgrInput name="searchBox" value={searchText} onInput={handleOnSearchChange}>
    <div slot="prefix">
        {searchText.length === 0 ? (
            <IgrIconButton variant="flat" name="search"  collection="material">
            </IgrIconButton>
            ) : (
            <IgrIconButton variant="flat" name="clear" collection="material" onClick={clearSearch}>
            </IgrIconButton>
        )}
    </div>
    <div slot="suffix">
        <IgrIconButton variant="flat" name="prev" collection="material" onClick={() => prevSearch(searchText, caseSensitiveSelected, exactMatchSelected)}>
            <IgrRipple></IgrRipple>
        </IgrIconButton>
        <IgrIconButton variant="flat" name="next" collection="material" onClick={() => nextSearch(searchText, caseSensitiveSelected, exactMatchSelected)}>
            <IgrRipple></IgrRipple>
        </IgrIconButton>
    </div>
</IgrInput>
tsx
    Ignite UI for React | CTA 배너

    알려진 제한 사항

    한정 설명
    템플릿을 사용하여 셀에서 검색 검색 기능 강조 표시는 기본 셀 템플릿에서만 작동합니다. 사용자 정의 셀 템플릿이 포함된 열이 있는 경우 강조 표시가 작동하지 않으므로 열 포맷터와 같은 대체 접근 방식을 사용하거나searchable 열의 속성을 false로 설정합니다.
    원격 가상화 원격 가상화를 사용하면 검색이 제대로 작동하지 않습니다.
    텍스트가 잘린 셀 셀의 텍스트가 너무 커서 맞지 않고 찾고 있는 텍스트가 줄임표로 잘려도 셀로 스크롤하여 일치 횟수에 포함시키지만 아무것도 강조 표시되지 않습니다.

    API 참조

    이 글에서는 검색 결과 간을 탐색할 때 추가 기능이 있는 IgrGrid 용 자체 검색 창을 구현했습니다. 또한 아이콘, 칩, 입력과 같은 Ignite UI for React도 사용했습니다. 검색 API는 아래에 나와 있습니다.

    IgrGrid methods:

    IgrColumn properties:

    사용된 관련 API가 포함된 추가 구성요소:

    추가 리소스

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