syidaxgrid
홈 가격 내 정보

GRID FEATURE

필요한 블록만 요청

한 번에 모든 주문을 내려받기 어려울 때 스크롤에 필요한 구간만 요청합니다. datasource는 시작·끝 행과 검색 조건을 받아 데이터를 공급하는 연결 객체입니다.

Markdown 원문 Features

동작 원리와 선택 기준

Grid는 요청을 만들고 앱은 서버 응답을 해석합니다. 마지막 데이터 위치 또는 전체 개수를 정확히 알려야 빈 구간을 반복 요청하거나 스크롤 길이가 잘못 표시되는 일을 막을 수 있습니다.

코드의 grid는 설치와 연결 장에서 준비한 Grid 요소입니다. 예제마다 필요한 데이터·설정을 확인하고, 코드에서 소개하는 앱 함수와 서버 주소는 프로젝트에 맞게 구현하세요.

예제 1. 구간 조회 API 연결

아래 서버는 startRow 이상 endRow 미만의 행과 전체 개수 total을 반환한다고 가정합니다. 응답 실패도 반드시 Grid에 알립니다.

javascript
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(); }
}};

결과 확인: 사용자가 이동한 구간에 행이 채워집니다. 예시 URL은 앱에서 구현할 조회 API입니다.

예제 2. 요청 크기와 캐시 조절

서버 왕복 시간이 길면 작은 블록을 너무 자주 요청하지 않도록 크기를 조절합니다.

javascript
grid.cacheBlockSize = 100;
grid.maxBlocksInCache = 5;

결과 확인: 한 번에 요청하는 행 묶음과 보관할 묶음 수를 제한합니다. 캐시를 줄이면 메모리는 줄지만 이전 구간 재방문 시 조회가 늘 수 있습니다.

예제 3. 서버 데이터가 바뀐 뒤 갱신

외부 화면에서 주문을 수정했으면 로드된 캐시가 오래된 상태일 수 있습니다.

javascript
await grid.refreshInfiniteCache();

결과 확인: 갱신 요청이 진행된 뒤 서버의 최신 값을 읽습니다. 로컬 셀만 바꾸는 트랜잭션과 서버 재조회는 서로 다른 작업입니다.

조합할 때와 문제를 해결할 때

성공과 실패 콜백은 요청마다 한 번만 호출합니다. 성공 콜백을 호출한 다음 예외를 다시 실패로 처리하지 않도록 응답 검증을 먼저 끝내세요.

서버 검색은 전체 데이터에 먼저 적용하고 그 결과에서 구간을 잘라야 합니다. 내려받은 100행에서만 검색하면 서버에 있는 다른 일치 행을 놓칩니다.

함께 읽기