무한 스크롤(infinite scroll) 구현하기 > 지식 쉐어링

본문 바로가기

SpreadJS

지식 쉐어링

개발꿀팁 무한 스크롤(infinite scroll) 구현하기

페이지 정보

작성자 GCK루카스 작성일 22-11-23 17:10 조회 64회 댓글 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);
    }






  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@grapecity.com | 전화 : 1670-0583 | 경기도 안양시 동안구 시민대로 230, B-703(관양동, 아크로타워) 그레이프시티(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 Copyright ⓒ 2022 GrapeCity inc.