개발 매뉴얼 / 시작하기워크스페이스 ↗

FEATURE GUIDE

그리드 생성 · 데이터 연결

왼쪽에서 기능을 선택하세요. 실행 예제와 필요한 소스를 같은 화면에서 확인할 수 있습니다.

ZixoGrid(host, options)

그리드 생성 · 데이터 연결 예제

독립 실행 ↗

그리드 전역 headerAlign의 기본값은 center입니다. 이 예제는 전역 값을 명시해 헤더 제목을 가운데 정렬합니다. 개별 컬럼 headerAlign을 지정하면 그 컬럼 값이 우선합니다. rows 생성 옵션을 생략하고 그리드를 만든 뒤 grid.setRows(rows)로 데이터를 넣습니다. 조회한 배열도 같은 함수로 넣을 수 있습니다. 전체 교체 시 변경 상태·Undo/Redo는 초기화됩니다. Vue 3에서는 마운트 후 호출하고 해제 시 destroy합니다.

이 예제의 필수값
  • host 필수값 — 그리드를 붙일 실제 DOM 요소 또는 그 요소를 찾는 선택자입니다.
  • columns[].field 필수값 — 표시할 컬럼마다 고유한 문자열을 지정합니다.
  • 행의 rowKey 값 필수값 — setRows/생성 rows/추가 행에 데이터를 넣을 때 각 행에 고유 키가 필요합니다. 기본 키 이름은 id입니다.

이 예제는 생성 옵션 rows를 생략하고 생성 후 조회 데이터를 연결합니다. 생성 후 grid.setRows(rows)를 호출합니다.

데이터 설정과 행 추가의 차이

생성 옵션 rows는 생략할 수 있습니다. 생성 후 setRows(rows)로 조회 결과를 넣으면 전체 데이터를 교체하고 변경 상태·Undo/Redo를 초기화합니다. 기존 데이터에 신규 행을 추가하려면 insertRows(rows)를 사용합니다. insert(row)와 insert(rows)도 지원합니다. 일괄 추가는 한 번의 Undo로 취소되며 ID 중복·누락/계산 실패 시 모두 거부합니다. 컬럼 parse/validate는 셀 편집 때 적용되므로, 추가할 행 값은 호출 전에 준비하세요.

const grid = new ZixoGrid(host, { columns, rowKey: 'id' });
grid.setRows(rows); // 전체 교체 · 새 기준 데이터
grid.insertRows(newRows); // 기존 행 유지 · 여러 행을 변경 목록에 추가
grid.undo(); // 추가한 여러 행을 한 번에 취소

행 데이터: 최소 100행 · start.data.js · JavaScript와 Vue 3가 같은 데이터를 사용합니다.

실행: JavaScript · examples/features/start.js

이 기능의 소스

HTML은 해당 JavaScript 파일과 함께 사용합니다. 행 데이터 탭의 파일도 함께 사용하세요. Vue 3 탭은 해당 컴포넌트를 실행합니다. 실행 방식 전환 시 예제가 초기화됩니다. Vue 3 실행 ↗ · Vue 원본

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>그리드 생성 · 데이터 연결</title>
    <link rel="stylesheet" href="../../src/zixo.css" />
    <link rel="stylesheet" href="../demo.css" />
  </head>
  <body>
    <main>
      <h1>그리드 생성 · 데이터 연결</h1>
      <div id="grid"></div>
      <div id="report" class="notes result" aria-live="polite"></div>
    </main>
    <script type="module" src="start.js"></script>
  </body>
</html>