모든 열에서 빠르게 찾기

동작 원리와 선택 기준

Find는 일치 셀로 이동하고 Quick filter는 일치하지 않는 행을 숨깁니다. 목적에 따라 두 기능을 구분해 제공하세요.

코드의 grid는 설치와 연결 장에서 준비한 Grid 요소입니다. 예제마다 필요한 데이터·설정을 확인하고, 코드에서 소개하는 앱 함수와 서버 주소는 프로젝트에 맞게 구현하세요.

앱의 검색 입력값을 quickFilterText에 연결합니다.

javascript

grid.quickFilter = true;
grid.quickFilterText = 'Platform';

결과 확인: 현재 데이터에서 검색어와 맞는 행만 남습니다. 서버에 아직 없는 데이터까지 찾으려면 원격 요청에 검색어를 전달합니다.

두 단어를 모두 만족해야 하는 검색과 하나만 만족해도 되는 검색을 비교합니다.

javascript

grid.quickFilterMode = 'and';
grid.quickFilterText = 'Platform APAC';
// 둘 중 하나만 맞아도 표시하려면
// grid.quickFilterMode = 'or';

결과 확인: 단어 조합에 따라 결과가 달라집니다. 사용자가 이해할 수 있도록 검색창의 안내에 조건 관계를 표시하세요.

입력할 때마다 무거운 계산이나 서버 요청이 발생하지 않도록 지연을 조절합니다.

javascript

grid.quickFilterDebounce = 200;
grid.quickFilterText = '';

결과 확인: 빈 문자열은 검색어 해제입니다. 정규식 검색을 켜는 앱은 잘못된 패턴과 과도하게 넓은 패턴도 확인해야 합니다.

검색 대상에 원본 객체 전체가 무조건 포함된다고 가정하지 마세요. 열 구성과 표시·접근 규칙을 함께 확인합니다.

검색어 변경과 서버 응답의 시간차 때문에 이전 결과가 잠시 남을 수 있습니다. 로딩과 결과 없음 안내를 구분하세요.