무한 스크롤이란?

불러올 데이터의 양이 많아 한 번에 화면에 표시하기에 부담이 될 때, 최초에 부담이 되지 않는 양을 표시한 후 사용자가 스크롤 할 때 이후 일정량의 데이터를 불러오는 것을 의미합니다.

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

• TopRowChanged 이벤트
  
• getViewportBottomRow 메소드
  
• getRowCount 메소드
  
• setArray 메소드