# GeeGrid 실행 예제
언어: [한국어](./index.ko.md) | [English](./index.en.md)
API 레퍼런스: [/docs/api/](/docs/api/)
전체 AI 문서: [/ai-ko.txt](/ai-ko.txt)
다음 예제는 GeeGrid v3 실제 사용 규칙을 따릅니다. mock 데이터로 화면을 먼저 확인한 뒤 검증된 실제 API를 연결합니다.
# 예제 1: 객체 행 Grid
~~~html
사용자 GridID이름
~~~
# 예제 2: 배열 행
~~~js
var grid = new GeeGrid('userGrid');
grid.setTotalCount(2);
grid.setCurrentPage(1);
grid.setViewLength(20);
grid.setArrayData(
['id', 'name'],
[
[1, '홍길동'],
[2, '김철수']
]
);
grid.makePaging();
~~~
# 예제 3: JSON 레코드
~~~js
var records = [
{ id: 1, name: '홍길동', status: 'READY' }
];
grid.setTotalCount(records.length);
grid.setCurrentPage(1);
grid.setViewLength(20);
grid.setJsonData(records);
grid.makePaging();
~~~
검증 기준:
- 생성자 id와 DOM id가 같아야 합니다.
- handler와 sort_handler는 GeeGrid.on 등록 이름과 같아야 합니다.
- 콜백 속성에는 이름만 작성합니다.
- 실제 데이터 모양에 맞는 setter를 사용합니다.
- total count, page, view length, data, paging 순서를 유지합니다.
- 실제 API 전에 mock 흐름을 확인합니다.