[]
데모 테마 디자이너 도움말 API
다른 샘플 다운로드
(Showing Draft Content)

검색

FlexGridSearch 컨트롤은 FlexGrid 컨트롤에서 전체 텍스트 검색을 수행할 수 있는 간단한 UI를 제공합니다.

입력하는 즉시 데이터를 필터링하고, 일치하는 항목을 그리드에서 하이라이트합니다.

동일한 FlexGrid 컨트롤은 FlexGridSearch 컨트롤과 FlexGridFilter 컴포넌트에 의해 동시에 필터링될 수 있습니다.

키 조합

동작

ESC

검색 조건을 지웁니다.

입력 가능한 문자

입력한 텍스트를 포함하는 항목을 검색합니다.

import { FlexGrid } from '@mescius/wijmo.grid';
import { FlexGridSearch } from '@mescius/wijmo.grid.search';

// 그리드 생성
var theGrid = new FlexGrid('#theGrid', {
    itemsSource: getData()
});

// 그리드 검색 상자 생성
new FlexGridSearch('#theSearch', {
    placeholder: 'FlexGridSearch',
    grid: theGrid
});

search


기본적으로 각 행의 데이터를 검색 매칭을 위해 공백으로 구분된 문자열로 변환합니다. 그러나 셀 데이터 자체에 공백이 포함된 경우에는 기대한 결과가 나오지 않을 수 있습니다. 이러한 상황에서는 exactMatch를 활성화하여 각 셀에 대해 정확한 매칭을 수행할 수 있습니다.

import { FlexGridSearch } from '@mescius/wijmo.grid.search';
new FlexGridSearch('#theSearch', {
    exactMatch: true // 정확 매칭 활성화
});


검색은 기본적으로 검색어를 입력하자마자 즉시 수행됩니다. isSubmitOnChange를 활성화하면 즉시 검색을 중단하고, Enter 키를 눌러 검색 내용을 확인한 후에 검색을 실행할 수 있습니다.

import { FlexGridSearch } from '@mescius/wijmo.grid.search';
new FlexGridSearch('#theSearch', {
    isSubmitOnChange: true // 즉시 검색 중단
});