FreeGridv1.15.1English

찾기

Ctrl+F로 그리드 안 찾기 창을 열어 모든 행에서 찾고, 찾은 셀을 강조하며 이동합니다. find()로 코드에서도 씁니다.

실행 예제찾기

그리드 안에서 Ctrl+F: 찾은 셀을 강조하고 다음·이전으로 이동합니다.

이 데모의 코드
import { createGrid } from '@freegridjs/core';
import { demoColumns, makeRows } from '../data';
import { button, search, 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(5000),
    locale: lang,
    findBar: true, // Ctrl+F inside the grid opens the find bar
  });

  text(ctx, h('Click a cell and press Ctrl+F (⌘F), or type below. Enter goes to the next match, Shift+Enter to the previous one.',
    '셀을 클릭하고 Ctrl+F(⌘F)를 누르거나 아래에 입력해 보세요. Enter는 다음, Shift+Enter는 이전 결과로 갑니다.'));
  separator(ctx);
  search(ctx, h('Find in the grid', '그리드에서 찾기'), q => ctx.log(`find("${q}") → ${grid.find(q)}`));
  button(ctx, h('Previous', '이전'), () => grid.findPrevious());
  button(ctx, h('Next', '다음'), () => grid.findNext());
  button(ctx, h('Clear', '지우기'), () => grid.clearFind());
  return grid;
}

그리드는 화면에 보이는 행만 그리기 때문에 브라우저 찾기로는 나머지 행을 찾을 수 없습니다. 그리드에 포커스가 있을 때 Ctrl+F(⌘F)를 누르면 대신 그리드 안에 찾기 창이 열립니다. 모든 행을 찾아 일치하는 셀을 강조하고, 첫 셀로 스크롤한 뒤 "3/120"처럼 위치를 보여 줍니다. Enter는 다음, Shift+Enter는 이전 결과로 가고, Esc는 창을 닫고 강조를 지웁니다.

대소문자를 구분하지 않고 화면에 보이는 글자로 찾으므로, 서식이 붙은 숫자와 날짜도 보이는 그대로 찾을 수 있습니다. 찾기는 지금 정렬과 필터를 따르고 데이터가 바뀌면 다시 찾습니다. 코드에서는 find()가 찾은 개수를 돌려주고, findNext(), findPrevious(), clearFind()로 이동하고 지웁니다. 예제처럼 직접 만든 검색 칸에 붙여 쓸 수 있습니다.

createGrid(el, { columns, data, findBar: true });   // default: Ctrl+F opens the bar in the grid

const n = grid.find('Seoul');   // highlights matches, focuses the first, returns the count
grid.findNext();                // Enter in the bar
grid.findPrevious();            // Shift+Enter in the bar
grid.clearFind();               // remove the highlights

// findBar: false leaves Ctrl+F to the browser; find() still works

셀을 강조하는 대신 행을 걸러 내려면 필터의 빠른 검색(setQuickFilter())을 쓰세요.

여기서도 초성 검색이 됩니다. ㄱㅎㄴ으로 김하늘을 찾고, 필터·빠른 검색·컬럼 선택 검색에서도 똑같이 됩니다.

옵션과 메서드

이름타입설명
findBarbooleanCtrl+F(⌘F)로 그리드 안 찾기 창을 엽니다(기본 true). false면 Ctrl+F는 브라우저 찾기로 갑니다.
find(text)number글자가 들어 있는 셀을 강조하고(대소문자 무시, 화면에 보이는 글자 기준) 첫 셀로 이동한 뒤 찾은 개수를 돌려줍니다(최대 1만 개).
findNext() / findPrevious() / clearFind()void다음·이전 결과로 이동하거나 강조를 지웁니다.

이 페이지에 대한 질문

Ctrl+F로 화면 밖의 행도 찾을 수 있나요?

네. 그리드 안에서 Ctrl+F를 누르면 모든 행을 찾아 강조하는 찾기 창이 열리고, find(), findNext(), findPrevious()로 코드에서도 같은 일을 합니다.