FreeGridv1.15.1English

행보다 많이 붙여넣기

pasteAddsRows를 켜면 마지막 행을 넘는 붙여넣기 줄이 함수가 만든 새 행이 되고, 컬럼 규칙으로 검사되며, 추가로 기록되고 붙여넣기와 함께 실행 취소됩니다.

실행 예제붙여넣기로 행 추가

3행 그리드에 엑셀 10줄 붙여넣기.

이 데모의 코드
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 });
  let next = 100;
  const grid = createGrid(ctx.host, {
    columns: [
      { field: 'id', header: 'ID', type: 'number', width: 70 },
      { field: 'name', header: h('Name', '이름'), width: 170, editable: true, required: true },
      { field: 'qty', header: h('Qty', '수량'), type: 'number', width: 100, editable: true, editor: { type: 'number', min: 0 } },
      { field: 'city', header: h('City', '도시'), width: 140, editable: true },
    ],
    data: [{ id: 1, name: 'Kim', qty: 3, city: 'Seoul' }, { id: 2, name: 'Lee', qty: 5, city: 'Busan' }, { id: 3, name: 'Park', qty: 1, city: 'Incheon' }],
    locale: ctx.lang, getRowId: r => String(r.id),
    pasteAddsRows: () => ({ id: ++next }),
  });
  grid.on('paste', e => ctx.log(JSON.stringify(e)));
  const lines = ['Choi\t2\tDaegu', 'Jung\t7\tGwangju', 'Kang\tabc\tSuwon', 'Cho\t4\tUlsan', 'Yoon\t9\tJeju', 'Jang\t1\tSejong', 'Lim\t6\tPohang'].join('\n');
  button(ctx, h('Paste 7 lines at row 3', '3행에 7줄 붙여넣기'), () => {
    grid.setRange({ start: { rowIndex: 2, colId: 'name' }, end: { rowIndex: 2, colId: 'name' } });
    grid.pasteText(lines);
  });
  button(ctx, h('Undo', '실행 취소'), () => grid.undo());
  button(ctx, h('Changes', '변경 내역'), () => { const m = grid.getModifiedRows(); ctx.log(`created ${m.created.length}, updated ${m.updated.length}`); });
  text(ctx, h('Or copy rows from Excel and press Ctrl+V on a cell near the end. "abc" is not a number, so it is skipped.',
    '엑셀에서 행을 복사해 끝쪽 셀에서 Ctrl+V를 눌러도 됩니다. "abc"는 숫자가 아니라 건너뜁니다.'));
  return grid;
}

기본으로 붙여넣기는 포커스 셀 아래 행을 채우고 마지막 행에서 멈춥니다. 스프레드시트에서 복사한 내용은 그보다 줄이 많을 때가 많은데, pasteAddsRows를 켜면 남는 줄이 끝에 새 행으로 들어갑니다.

let next = 1000;
createGrid(el, {
  columns: [
    { field: 'id' },                                   // not editable: filled by the function below
    { field: 'name', editable: true, required: true },
    { field: 'qty', type: 'number', editable: true, editor: { type: 'number', min: 0 } },
  ],
  data,
  getRowId: r => String(r.id),
  pasteAddsRows: ({ index }) => ({ id: ++next, status: 'draft' }),   // or simply true
});

옵션

이름타입설명
pasteAddsRowsboolean | ({ index }) => Rowtrue면 빈 행을, 함수면 그 함수가 만든 행(id, 기본값)을 추가합니다. index는 새 행을 0부터 셉니다.

새 행을 채우는 방식

  1. 들어가는 줄은 전처럼 포커스 셀 아래 기존 행을 채웁니다.
  2. 남는 줄마다 새 행을 만듭니다(함수로, 또는 빈 행).
  3. 값마다 보통 붙여넣기와 같은 변환·규칙을 거칩니다: 숫자·날짜 변환, 옵션 맞추기, min·max, required, unique, validate 검사. 통과하지 못한 값은 건너뛰어 셉니다.
  4. 편집할 수 없는 컬럼은 함수가 만든 값 그대로입니다.
  5. 새 행은 데이터 끝에 추가되고 추가된 행으로 표시됩니다(getModifiedRows().created, 추가 행 표시).

결과와 실행 취소

const r = grid.pasteText('Kim\t10\nLee\t20\nPark\tabc');
// { changed: 5, skipped: 1, added: 2 }   — 'abc' is not a number
grid.undo();   // the pasted values and the two new rows go away together
  • Ctrl+V와 pasteText() 모두 같고, paste 이벤트도 added를 알려 줍니다.
  • 값 하나를 선택 범위에 채울 때는 행을 추가하지 않습니다.
  • 정렬·필터가 걸려 있으면 새 행은 정렬 위치에 나오고, 필터에 걸려 안 보일 수 있습니다.
  • datasource에서는 동작하지 않습니다(행의 주인이 서버).

이 페이지에 대한 질문

엑셀에서 복사한 행을 그리드에 새 행으로 붙여넣으려면?

pasteAddsRows를 켜세요(true 또는 새 행을 만드는 함수). 마지막 행을 넘는 줄은 새 행이 되고, Ctrl+Z 한 번으로 붙여넣기와 새 행이 함께 되돌아갑니다.