일부 행만 검사하기

validate()에 rows·colIds·changedOnly를 주어 일부만, validateCell()로 셀 하나를 검사해, 저장 버튼이 보낼 것만 확인하게 합니다.

실행 예제일부 행 검사

저장할 때 바꾼 행만 검사.

이 데모의 코드

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

export default function mount(ctx: DemoContext) {
  const h = (en: string, ko: string) => tr(ctx.lang, { en, ko });
  const data = makeRows(300).map((r, i) => ({ ...r, email: i % 37 === 0 ? '' : r.email }));
  const grid = createGrid(ctx.host, {
    columns: [
      { field: 'name', header: h('Name', '이름'), width: 170, editable: true, required: true },
      { field: 'email', header: h('Email', '이메일'), width: 260, editable: true, required: true, validate: v => (!v || String(v).includes('@') ? true : h('Needs an @', '@가 필요합니다')) },
      { field: 'q1', header: h('Q1', '1분기'), type: 'number', width: 120, editable: true, editor: { type: 'number', min: 0, max: 100000 } },
    ],
    data, locale: ctx.lang,
  });
  button(ctx, h('Check everything', '전체 검사'), () => ctx.log(h(`all rows: ${grid.validate().length} problems`, `전체: 문제 ${grid.validate().length}개`)));
  button(ctx, h('Save (check changed rows only)', '저장(바꾼 행만 검사)'), () => {
    const problems = grid.validate({ changedOnly: true });
    if (!problems.length) { ctx.log(h('saved', '저장했습니다')); grid.commitChanges(); return; }
    const p = problems[0];
    grid.scrollToRow(Math.max(0, p.rowIndex));
    ctx.log(`${problems.length}: ${p.colId} — ${p.message}`);
  });
  text(ctx, h('Some rows already lack an email. Edit a few cells (try an email without @), then Save: only your changes are checked.',
    '몇몇 행은 원래 이메일이 비어 있습니다. 셀 몇 개를 고치고(@ 없는 이메일도) 저장을 누르면 바꾼 것만 검사합니다.'));
  return grid;
}

validate()는 편집 가능한 모든 셀을 컬럼 규칙(required, unique, validate, 숫자 편집기의 min·max)으로 검사합니다. 옵션을 주면 일부만 검사하는데, 보통 저장할 행만 검사할 때 씁니다.

saveButton.onclick = async () => {
  const problems = grid.validate({ changedOnly: true });   // created and edited rows only
  if (problems.length) {
    const p = problems[0];
    grid.scrollToRow(p.rowIndex);
    toast(`${p.colId}: ${p.message}`);
    return;
  }
  await saveChanges(grid.getModifiedRows());
  grid.commitChanges();
};

옵션

이름	타입	설명
`rows`	`Row[]`	이 행 객체만.
`colIds`	`string[]`	이 컬럼만(숨긴 컬럼도 값이 저장되므로 포함).
`changedOnly`	`boolean`	마지막 commitChanges() 뒤 추가되거나 바뀐 행만.
`validateCell(row, colId)`	`string \| null`	셀 하나의 안내 문구, 통과하면(또는 편집할 수 없으면) null.

결과

문제마다 { row, rowIndex, colId, message }이고, rowIndex는 화면 위치(필터로 숨었으면 -1)입니다. 옵션은 함께 씁니다: { changedOnly: true, colIds: ["email"] }은 바뀐 행의 이메일만 검사합니다.

grid.on('cellValueChanged', e => {
  const message = grid.validateCell(e.row, 'email');
  if (message) showWarning(e.rowIndex, message);
});