고급 필터

여러 컬럼의 조건을 AND와 OR로 묶고 원하는 만큼 중첩합니다. 작성 창이나 setAdvancedFilter로 만들고 컬럼 필터와 함께 적용됩니다.

유료 기능 · 고급 필터. 새 도메인에서는 처음 30일 동안 무료로 쓸 수 있고, 그 뒤에는 무료 개인 키나 회사 키가 있어야 합니다. 요금 안내 보기

컬럼마다 조건 두 개를 그리고/또는으로, 여러 컬럼 조건은 작성 창으로 만듭니다.

이 데모의 코드

import { createGrid } from '@freegridjs/core';
import { demoColumns, makeRows } from '../data';
import { button, separator, text, tr, type DemoContext } from '../ui';

export default function mount(ctx: DemoContext) {
  const { lang } = ctx;
  const h = (en: string, ko: string) => tr(lang, { en, ko });
  const grid = createGrid(ctx.host, { columns: demoColumns(lang), data: makeRows(2000), locale: lang, statusBar: true });
  grid.on('advancedFilterChange', e => ctx.log(`advancedFilterChange → ${JSON.stringify(e.advancedFilter)}`));
  grid.on('filterChange', e => ctx.log(`filterChange → ${JSON.stringify(e.filters)}`));

  text(ctx, h('Open a column menu: it takes two conditions joined with And / Or. Conditions across columns: right-click → Advanced filter…',
    '컬럼 메뉴에서 조건 두 개를 그리고/또는으로 묶을 수 있습니다. 여러 컬럼에 걸친 조건은 우클릭 → 고급 필터…'));
  separator(ctx);
  button(ctx, h('Q1 between 20,000 and 40,000', '1분기 2만~4만'), () =>
    grid.setFilter('q1', { type: 'combined', operator: 'and', conditions: [{ type: 'number', op: 'gte', value: 20000 }, { type: 'number', op: 'lte', value: 40000 }] }));
  button(ctx, h('(Japan and Q4 > 80,000) or name starts with "Kim"', '(일본 그리고 4분기 > 8만) 또는 이름이 Kim으로 시작'), () =>
    grid.setAdvancedFilter({ operator: 'or', conditions: [
      { operator: 'and', conditions: [
        { colId: 'country', model: { type: 'text', op: 'equals', value: 'Japan' } },
        { colId: 'q4', model: { type: 'number', op: 'gt', value: 80000 } },
      ] },
      { colId: 'name', model: { type: 'text', op: 'startsWith', value: 'kim' } },
    ] }));
  button(ctx, h('Open the builder', '조건 작성 창 열기'), () => grid.openFilterBuilder());
  button(ctx, h('Clear', '모두 해제'), () => {
    grid.setAdvancedFilter(null);
    grid.setFilter('q1', null);
  });
  return grid;
}

컬럼 필터는 컬럼 하나만 봅니다. 고급 필터는 여러 컬럼의 조건을 AND와 OR로 묶고, 필요한 만큼 중첩합니다. "(상태가 완료이고 금액이 100 초과) 또는 고객 이름이 Kim으로 시작" 같은 조건입니다. 컬럼 필터, 필터 행, 빠른 검색과 함께 적용됩니다.

사용자는 작성 창에서 만듭니다. 셀을 우클릭해 고급 필터…를 고르고, 한 줄에 조건 하나(컬럼, 연산자, 값)씩 추가한 뒤 줄들을 "그리고"나 "또는"으로 묶습니다. 중첩 그룹은 코드로 만듭니다. 구조를 setAdvancedFilter에 넘기면, 작성 창에는 중첩 그룹이 지울 수 있는 한 줄로 보입니다. 조건 하나는 컬럼 ID와 일반 필터 모델이라서, setFilter에 넣을 수 있는 것은 여기에도 그대로 쓸 수 있습니다.

// (status = done AND amount > 100) OR customer starts with "Kim"
grid.setAdvancedFilter({ operator: 'or', conditions: [
  { operator: 'and', conditions: [
    { colId: 'status', model: { type: 'text', op: 'equals', value: 'done' } },
    { colId: 'amount', model: { type: 'number', op: 'gt', value: 100 } },
  ] },
  { colId: 'customer', model: { type: 'text', op: 'startsWith', value: 'kim' } },
] });

grid.getAdvancedFilter();     // the same object, or null
grid.openFilterBuilder();     // the dialog; right-click → Advanced filter… opens it too
grid.setAdvancedFilter(null); // clear it (the column filters stay)
grid.on('advancedFilterChange', e => save(e.advancedFilter));

// server data: getRows receives it as params.advancedFilter
createGrid(el, { columns, datasource: { getRows: p => api.rows({ ...p, where: p.advancedFilter }) } });

저장과 서버 데이터

고급 필터는 평범한 JSON이고 getState()에도 들어가므로, 사용자별 화면 설정과 함께 저장하고 복원할 수 있습니다. datasource를 쓰면 getRows가 advancedFilter로 받고, 서버 연동 함수가 이를 바인딩 변수를 쓰는 SQL로 바꿔 줍니다.

옵션, 메서드, 이벤트

이름	타입	설명
`setAdvancedFilter(filter \| null)`	`AdvancedFilter`	여러 컬럼에 걸친 조건을 걸거나 null로 지웁니다. 컬럼 필터와 함께 적용됩니다.
`getAdvancedFilter()`	`AdvancedFilter \| null`	지금 걸린 고급 필터.
`openFilterBuilder()`	`void`	조건을 만드는 창을 엽니다(우클릭 → 고급 필터…와 같습니다).
`AdvancedFilter`	`{ operator: 'and' \| 'or', conditions: (AdvancedFilter \| { colId, model })[] }`	그룹은 얼마든지 중첩할 수 있고, model은 { type: 'number', op: 'gt', value: 100 } 같은 컬럼 필터 모델입니다.
`advancedFilter`	`boolean (option)`	false면 우클릭 메뉴의 "고급 필터…"를 숨깁니다. setAdvancedFilter는 그대로 동작합니다.
`advancedFilterChange`	`{ advancedFilter } (event)`	코드나 작성 창에서 고급 필터가 바뀌었습니다.

이 페이지에 대한 질문

여러 컬럼 조건을 그리고/또는으로 묶을 수 있나요?

네. setAdvancedFilter에 "(상태 = 완료 그리고 금액 > 100) 또는 이름이 Kim으로 시작" 같은 중첩 조건을 넣고, 사용자는 우클릭 → 고급 필터…로 직접 만들 수 있습니다.