개발꿀팁 무한 스크롤(infinite scroll) 구현하기
페이지 정보
작성자 GCK루카스 작성일 2022-11-23 17:10 조회 813회 댓글 0건본문
관련링크
무한 스크롤이란?
불러올 데이터의 양이 많아 한 번에 화면에 표시하기에 부담이 될 때, 최초에 부담이 되지 않는 양을 표시한 후 사용자가 스크롤 할 때 이후 일정량의 데이터를 불러오는 것을 의미합니다.
SpreadJS는 무한 스크롤을 기본 기능으로써 지원하지 않습니다.
일반적인 그리드와 달리 SpreadJS는 엑셀의 성격을 가지고 있기 때문에 무한 스크롤을 구현할 경우 아래 쪽의 셀을 참조하는 셀 값에 문제가 생길 수 있습니다.
하지만 만약 셀이 서로 참조하지 않는다면 코드 상으로 무한 스크롤을 구현할 수 있습니다.
SpreadJS에서 무한 스크롤을 구현하는 순서는 아래와 같습니다.
1. setArray()를 통해 일정량의 데이터 불러오기
2. 스크롤을 내려 화면에 보이는 최하단 행과 현재 시트의 전체 행 개수를 비교
3. 스크롤이 하단과 가까워지면 행 추가 후 추가된 행 만큼 setArray()를 통해 데이터 불러오기
1. setArray()를 통해 일정량의 데이터 불러오기
전체 데이터를 arr 배열에 가져온 후, 시트의 행 개수만큼 arr2 배열에 옮겨 담고 시트에 입력합니다.
for(let i=0;i<sheet.getRowCount();i++) { arr2.push(arr.shift()); } sheet.setArray(0,0,arr2);
2 & 3. 스크롤을 내려 화면에 보이는 최하단 행과 현재 시트의 전체 행 개수를 비교, 행 추가 후 데이터 불러오기
TopRowChanged 이벤트를 이용하여 스크롤이 될 때 이벤트를 발생 시키고, 화면의 제일 하단 행의 인덱스와 전체 행 개수를 비교하여 가까워지면 행을 추가하고 추가된 행만큼 데이터를 추가합니다.
var bottomRow = sheet.getViewportBottomRow(1), rowCount = sheet.getRowCount(); if (bottomRow + 3 > rowCount) { sheet.setRowCount(rowCount + 10); let arr2 = []; for(let i=rowCount;i<rowCount+10;i++) { arr2.push(arr.shift()); } sheet.setArray(rowCount,0,arr2); }
댓글목록
등록된 댓글이 없습니다.