셀 편집 플러그인

셀 편집 · editorsPlugin

셀 안에서 값을 편집하고 확정·취소·입력 검증을 처리합니다. 날짜·선택·자동완성은 컬럼 설정으로 선택합니다.

설치 함수: editorsPlugin() · 해제 이름: editors

설정 속성 · 기본값

필수값은 해당 입력에서 반드시 제공하는 값입니다. 조건부 필수값은 설명에 적힌 기능을 사용할 때 필요합니다. 표시가 없는 옵션은 생략할 수 있으며 기본값을 사용합니다. 빈 문자열·누락과 0·false를 혼동하지 마세요.

설정 위치와 동작
설정	기본값	설명
`함수 인수`	없음	editorsPlugin()에는 별도 설정 객체를 전달하지 않습니다.
`column.editor`	text	text/date/select/combo를 선택합니다. radio·checkbox·button의 상시 셀 컨트롤과 type:image/type:button 표시는 Core에서 제공합니다.
`column.parse / validate`	없음	parse 후 validate를 실행합니다. validate는 true/undefined 성공, false/문자열 실패이며 동기 함수입니다.
`column.options`	[]	select 선택지 배열 또는 row를 받는 함수. 원시 값 또는 {value,label} 항목이며 원래 값 타입을 유지합니다.
`column.dateFormat`	locale 표시	날짜 표시·입력 형식. YYYY/yyyy, MM/M, DD/dd/D/d를 각각 한 번 사용합니다. 저장은 YYYY-MM-DD입니다.
`referenceYear`	편집 시 현재 연도	그리드 옵션입니다. 918/0918 같은 날짜 단축 입력의 기준 연도를 지정합니다.
`column.loadOptions`	없음	loadOptions(query,row,{signal})이 선택지 배열을 반환합니다. debounce 기본 180ms이며 이전 요청을 취소합니다.

사용 순서

editorsPlugin()을 plugins에 등록하고 편집 가능한 컬럼을 선언합니다.
Enter/F2/더블클릭 또는 문자 입력으로 편집을 시작합니다. select는 셀에서 직접 선택합니다.
Enter/Tab 또는 다른 셀 클릭으로 확정하고 Escape로 취소합니다. 검증에 실패하면 이전 값을 유지합니다.

연결 API

플러그인 또는 연결된 Core API
호출 / 인수	반환값	동작	사용 예
`grid.edit(JSON.stringify(id), field, initialValue?)`	undefined	편집 요청. id 인수는 현재 API에서 JSON으로 인코딩한 행 키입니다.	grid.edit(JSON.stringify(1),"name"); 필수값 `grid.edit` 인수: `id`, `field`
`grid.closeEditor()`	undefined	편집 UI와 연결된 요청·팝업을 정리합니다. 값 확정 용도가 아닙니다.	grid.closeEditor();

설치 · 해제 · Vue 3 수명주기

생성 시 plugins에 등록하거나, 아직 설치하지 않은 인스턴스에서 grid.install을 호출합니다. 같은 name은 중복 설치할 수 없습니다. 설정에 쓰는 데이터·함수는 아래 전체 예제 소스를 참고하세요.

grid.install(editorsPlugin());
grid.uninstall('editors'); // 플러그인 해제
// Vue 3 컴포넌트가 종료될 때
onBeforeUnmount(() => grid.destroy());

해제 시 편집 UI·비동기 요청을 종료하고 editrequest 리스너와 렌더 래핑을 정리합니다. Vue에서는 onBeforeUnmount에서 grid.destroy()를 호출합니다.

실행 예제 · 실제 원본

아래 소스는 examples/features/inline-edit.js와 Vue 원본입니다. 해당 예제 경로를 기준으로 import하며, 행 데이터는 별도 파일을 함께 사용합니다.

JavaScript 예제 실행 ↗ · Vue 3 예제 실행 ↗ · 행 데이터 원본

JavaScript 전체 소스 · inline-edit.js

import { ZixoGrid, editorsPlugin } from '../../src/index.js';
import { rows } from './inline-edit.data.js';

const host = document.querySelector('#grid'),
  report = document.querySelector('#report');

const options = {
  rowKey: 'id',
  height: 360,
  rows: rows,
  columns: [
    { field: 'name', title: '주문', width: 240 },
    {
      field: 'qty',
      title: '수량',
      parse: Number,
      validate: (v) =>
        (Number.isFinite(v) && v >= 0) || '0 이상 숫자를 입력하세요',
    },
    {
      field: 'scrollRowKey',
      title: '참조 · 행 키',
      width: 360,
      editable: false,
      sortable: false,
      format: (_value, row) => String(row.id ?? row.code ?? row.name ?? ''),
    },
    {
      field: 'scrollName',
      title: '참조 · 이름',
      width: 360,
      editable: false,
      sortable: false,
      format: (_value, row) => String(row.name ?? ''),
    },
    {
      field: 'scrollCategory',
      title: '참조 · 분류 / 지역',
      width: 360,
      editable: false,
      sortable: false,
      format: (_value, row) =>
        String(row.category ?? row.region ?? row.status ?? ''),
    },
    {
      field: 'scrollNote',
      title: '참조 · 상세 문구',
      width: 360,
      editable: false,
      sortable: false,
      format: (_value, row) =>
        String(row.note ?? row.description ?? row.name ?? ''),
    },
  ],
  plugins: [editorsPlugin()],
};

const grid = new ZixoGrid(host, options);

window.addEventListener('pagehide', () => grid.destroy(), { once: true });
grid.on(
  'validationerror',
  (detail) => (report.textContent = detail.error.message),
);

report.textContent =
  'Enter/F2/더블클릭으로 셀을 직접 편집합니다. Enter/Tab 확정, Escape 취소. parse 후 validate를 실행합니다.';

Vue 3 전체 소스 · vue-inline-edit.vue

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { ZixoGrid, editorsPlugin } from '../../src/index.js';
import { rows } from './inline-edit.data.js';

// Instance and DOM belong to this component, never to window or a global ID.
const gridHost = ref(null);
const message = ref('');

let grid;
let alive = true;

onMounted(() => {
  const options = {
    rowKey: 'id',
    height: 360,
    rows: rows,
    columns: [
      { field: 'name', title: '주문', width: 240 },
      {
        field: 'qty',
        title: '수량',
        parse: Number,
        validate: (v) =>
          (Number.isFinite(v) && v >= 0) || '0 이상 숫자를 입력하세요',
      },
      {
        field: 'scrollRowKey',
        title: '참조 · 행 키',
        width: 360,
        editable: false,
        sortable: false,
        format: (_value, row) => String(row.id ?? row.code ?? row.name ?? ''),
      },
      {
        field: 'scrollName',
        title: '참조 · 이름',
        width: 360,
        editable: false,
        sortable: false,
        format: (_value, row) => String(row.name ?? ''),
      },
      {
        field: 'scrollCategory',
        title: '참조 · 분류 / 지역',
        width: 360,
        editable: false,
        sortable: false,
        format: (_value, row) =>
          String(row.category ?? row.region ?? row.status ?? ''),
      },
      {
        field: 'scrollNote',
        title: '참조 · 상세 문구',
        width: 360,
        editable: false,
        sortable: false,
        format: (_value, row) =>
          String(row.note ?? row.description ?? row.name ?? ''),
      },
    ],
    plugins: [editorsPlugin()],
  };

  grid = new ZixoGrid(gridHost.value, options);

  grid.on(
    'validationerror',
    (detail) => (message.value = detail.error.message),
  );

  message.value =
    'Enter/F2/더블클릭으로 셀을 직접 편집합니다. Enter/Tab 확정, Escape 취소. parse 후 validate를 실행합니다.';
});
onBeforeUnmount(() => {
  alive = false;
  grid?.destroy(); // Cancels grid requests, removes events and releases plugins.
  grid = undefined;
});
defineExpose({ getGrid: () => grid });
</script>

<template>
  <main>
    <h1>셀 내부 편집 · 검증</h1>

    <div ref="gridHost" class="vue-grid-host"></div>
    <div class="notes result" aria-live="polite">{{ message }}</div>
  </main>
</template>

제약 사항 · 주의할 동작

parse/validate는 동기입니다. 비동기 validate는 지원하지 않습니다.
readonly/permissions는 화면 편집 제한이며 서버 권한 검증을 대신하지 않습니다.
인라인 편집은 text/number/date/combo에 사용합니다.

연결 기능 메뉴

셀 내부 편집 · 검증 · 원클릭 select · radio · checkbox · 날짜 입력 · 달력 · 비동기 자동완성 · 조건부 readonly · 이미지 · 텍스트 · 버튼 컬럼

이 플러그인 상세 페이지 독립 열기 ↗ · 플러그인 설명 전체