필요한 블록만 요청

주문이 수십만 건일 때 모든 행을 한꺼번에 내려받는 대신, 사용자가 스크롤한 구간만 서버에서 가져오는 방식입니다.

앱에서 연결하는 순서

1. 조회 API 준비

   시작 행과 끝 행을 받아 그 구간의 주문을 반환하는 API가 필요합니다. 현재 페이지의 표는 로컬 샘플이며 서버로 추가 행을 요청하지 않습니다.

2. 요청 연결하기

   datasource.getRows에서 params.startRow와 params.endRow를 서버로 전달하세요. 사용자가 정렬하거나 검색했다면 해당 조건도 함께 전달합니다.

3. 성공·실패 알리기

   응답 행과 전체 개수로 params.success를 호출하세요. 요청에 실패하면 params.fail을 호출해 로딩이 끝나도록 처리합니다.

getRows 한 번에 성공 또는 실패 콜백은 한 번만 호출하세요. 아래 /api/orders는 연결 방법을 보여 주는 예시 경로입니다.

알아두면 쉬운 용어

datasource

Grid의 데이터 요청을 서버 API로 연결하는 객체입니다.

블록

한 번의 요청으로 가져오는 행 묶음입니다.

핵심 API 예시

등록된 Grid 요소를 grid로 참조하는 앱 코드입니다.

grid.datasource = {getRows: async params => {
  try {
    const response = await fetch('/api/orders', {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({startRow:params.startRow,endRow:params.endRow,sortModel:params.sortModel,filterModel:params.filterModel,quickFilter:params.quickFilter})});
    if (!response.ok) throw new Error('조회 실패');
    const {rows,total} = await response.json();
    params.success(rows,total);
  } catch { params.fail(); }
}};