가상 스크롤을위한 검색 구현

Question

이 질문에 대한 제작 코드는 없습니다. 연구 내용입니다. 나는 angularjs와 함께 작업하고 특정 데이터 그리드를 만들고 싶습니다. 이 데이터 그리드는 1 백만 개 이상의 큰 데이터를 표시 할 수 있습니다. 그래서 나는 묶음으로 데이터를 얻는다. 문제는 페이지 선택기 또는 무한 스크롤을 원하지 않는다는 것입니다.하지만 가상 스크롤을 원합니다. 간단한 해결책은 행의 높이를 곱한 총 행에 따라 스크롤 막대의 높이를 계산하는 것입니다. 하지만 최근에 나는 새로운 도전이 있습니다 : 행 높이가 데이터에 의존하고 스크롤 높이를 계산하는 "표준"행 높이를 정의 할 수 없습니다.

인터넷에서 검색하지만 문제는 페이지 선택기로만 해결되는 것 같습니다. 그래서이 목표를 달성하기위한 아이디어가 있습니까? 또는 내 참조를 기반으로하는 모든 참조, 구현?

도움을 주셔서 감사합니다. 제 질문에 답변 해 주시기 바랍니다.

추신 : 아니요?

Answer 1

나는 ag-grid에 대해 잘 모르지만 검도 그리드가 목적에 부합 할 것입니다. http://demos.telerik.com/kendo-ui/grid/virtualization-local-data

원격 데이터 - - http://demos.telerik.com/kendo-ui/grid/virtualization-remote-data 다음은 검도

로컬 데이터에 가상 스크롤을 사용하여 더 많은 데이터를로드하기위한 링크입니다.

HTML 트리 그리드도 좋습니다. http://htmltreegrid.com/Home/Demo 성능면에서 모두 비슷합니다. HTML 트리 그리드에는 다른 목적을위한 그리드도 있습니다. 그러나이 그리드의 커스터마이징이 성능을 떨어 뜨립니다.

Answer 2

당신은 동적으로 행 높이를 측정 할 수 있습니다 ... 표준 행 높이를 정의 할 필요가 없습니다 ..

HTML 표 :

<input type="button" onclick="rowHeights();" value="Row Heights"> 
    <table id="rowHeight" border="1"> 
     <tr> 
      <td> 
       Column One<br /> 
       Big Column 
      </td> 

      <td> 
       Column Two 
      </td> 
     </tr> 
     <tr> 
      <td> 
       Second row column 1 
      </td> 
     </tr> 
    </table> 

자바 스크립트 :

function rowHeights() { 
     var tbl = document.getElementById('rowHeight').rows; 
     alert("First Row Height: " + tbl[0].offsetHeight); 
     alert("Second Row Height: " + tbl[1].offsetHeight); 
     //all row height 
     var allrowHeight = 0; 
     for (var i = 0; i < tbl.length; i++) { 
      allrowHeight += tbl[i].offsetHeight; 
     } 
     alert("Total Row Height: " + allrowHeight); 
    } 

나는 희망 이것은 당신을 도울 것입니다. JsFiddle : https://jsfiddle.net/x1Luxb5a/

Answer 3

Silvinus는이 개념에 좀 걸릴 :

가상 페이징에 따라 서버 에서 게으른 부하 행에 그리드를 할 수 있습니다

가상 페이징/무한 스크롤을 무엇 스크롤 위치는 그리드의 위치입니다.

그리드가 시작 부분에 총 페이지 수를 알고있는 경우 이 서버에서로드되지 않았더라도 전체 데이터 세트와 일치하도록 스크롤 의 크기가 조정됩니다.

그리드가 처음 몇 페이지인지 알지 못하는 경우 스크롤은 이 마지막 행에 도달 할 때까지 자동으로 확장됩니다. 이 기능은 다른 그리드에서 무한 스크롤로 알려진 입니다.

참고 : 페이지 매김과 가상 페이징은 같은 문제에 대한 다른 해결책입니다. 동시에 두 가지를 적용 할 수는 없습니다.

예 : https://www.ag-grid.com/angular-grid-virtual-paging/virtualPaging.html

참조 : 당신은 약을 계산해야 https://www.ag-grid.com/angular-grid-virtual-paging/

Answer 4

. 행의 평균 높이를 추정하거나 행의 높이가 비슷하거나 백엔드에서 레코드를 저장하는 동안 대략 행 높이를 계산하여 데이터베이스에 저장하십시오 (예 : 텍스트 길이를 기준으로). 그런 다음 데이터를로드하면 모든 높이를 합산하고 서버에서 가져올 수 있습니다.