syidaxgrid
홈 가격 내 정보

GRID FEATURE

열마다 다른 조건

열 필터는 특정 열에 조건을 적용합니다. 텍스트·숫자·날짜별로 입력과 비교 방식이 다르며 여러 열의 조건은 함께 결과를 좁힙니다.

Markdown 원문 Features

동작 원리와 선택 기준

필터 UI의 작성 중 상태와 실제 적용된 모델을 구분하세요. 사용자 정의 필터처럼 비동기 처리가 있는 경우 setFilterModel의 반환 보고서를 기다려야 합니다.

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

예제 1. 제품명과 수량 입력칸

열 종류에 맞는 기본 필터를 켭니다.

javascript
grid.headerFilterRow = true;
grid.columnDefs = [{ field: 'product', headerName: '제품', filter: 'text' },
  { field: 'quantity', headerName: '수량', filter: 'number' }];

결과 확인: 제품명은 텍스트, 수량은 숫자 조건으로 검색합니다. 문자열 100과 숫자 100의 의미가 다르지 않도록 원본 타입을 확인합니다.

예제 2. 사용자 필터 보관

적용된 모델을 보관했다가 같은 열 정의에서 복원합니다.

javascript
const saved = await grid.getFilterModel();
const report = await grid.setFilterModel(saved);
console.log(report);

결과 확인: 복원은 모델 구조와 열 종류가 맞아야 합니다. 반환 보고서에서 적용되지 않은 항목을 확인하세요.

예제 3. 조건 초기화

검색 결과가 없을 때 모든 필터 계열을 해제하는 동작입니다.

javascript
await grid.setFilterModel(null);
grid.addEventListener('filterChanged', event => console.log(event.detail));

결과 확인: null은 전역 필터 모델 해제입니다. 특정 열 하나만 지우려면 setColumnFilterModel 계약을 사용하고 다른 조건을 유지합니다.

조합할 때와 문제를 해결할 때

빈칸·null·문자열 숫자의 처리 정책을 테스트하세요. 날짜는 시간대와 저장 형식까지 맞아야 같은 날짜 조건이 일관되게 동작합니다.

열 필터, 빠른 검색, 외부 필터, 고급 조건이 겹칠 수 있습니다. 결과가 적을 때는 어느 조건이 남아 있는지 각각 읽어보세요.

함께 읽기