ASP.net에 대한 가상 목록보기?

ASP.net에 대한 가상 목록보기가 있습니까?ASP.net에 대한 가상 목록보기?

대부분의 테이블 (및 그리드, 목록보기, 데이터 테이블, 데이터 그리드, 그리드 뷰리스트 그리드) 내가 asp.net에 대한 검색 데이터를 통해 페이지로 사용자를 기대합니다.

예를 들어 10,000 개의 항목이 포함 된 목록보기를 원합니다. 나는 10 페이지를 원하지 않는다.

긴 목록의 문제는 "가상"모드에서 listview를 사용하여 1994 년에 해결되었습니다. 컨트롤에는 표시 할 항목 수만 지정하면됩니다. 필요한 항목 (예 : 사용자가보기로 스크롤하거나 항목을 정렬하려고 할 때)에 대한 정보를 제어합니다.

누구나 가상 목록 뷰 (비동기식 자바 스크립트 및 XML, 동기식 자바 스크립트 및 XML 사용)를 만들었습니까?

만약 대답은 "NO" : 질문에 대답하는 것을 두려워하지 않습니다.하지

번호 infinite scroll jQuery plugin 보는

출처

2012-06-11 Ian Boyd

시도 :의 답변 아무 문제가 없습니다. 나는 그것이 당신이 찾고있는 것과 같다고 생각합니다.

출처

2012-06-11 13:55:20

단점 트위터/구글 스타일 "무한"스크롤, 스크롤 막대가 더 이상 스크롤 내용의 크기를 나타내는 없습니다. –

난 그냥 하나의 가상 ListView 샘플을 만듭니다.

로드해야하는 데이터베이스 ID를 포함하는 속성으로 div를 렌더링하는 리피터부터 시작합니다.

<asp:Repeater ID="Repeater1" runat="server"> 
<ItemTemplate> 
     <div data-id="<%# GetID(Container.DataItem) %>" class="DataLine"> 
     loading... 
     </div> 
    </ItemTemplate> 
</asp:Repeater>

다음으로이 div가 표시되는지 확인하고 아약스를 사용하여 데이터를 가져 오는 자바 스크립트입니다. 여기

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 

<script> 
function isScrolledIntoView(elem) 
{ 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 

    var elemTop = elem.offset().top; 
    var elemBottom = elemTop + elem.height(); 

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
} 

var cTimerID = null; 
function RunWithSomeDelay() 
{ 
    if(cTimerID) 
     clearTimeout(cTimerID); 

    cTimerID = setTimeout(CheckWhatToShow, 1000); 
} 

function CheckWhatToShow() 
{ 
    $(".DataLine").each(function(i, selected) { 

     var ThisOne = $(selected); 

     if(ThisOne.attr("Done") != "1") 
     { 
      if(isScrolledIntoView(ThisOne)) 
      {     
       ThisOne.attr("Done", "1"); 
       // here you can use a simple ajax load, to load your data. 
       ThisOne.text(ThisOne.attr("data-id")); 
      } 
     } 
    }); 
} 

$(document).ready(function() { 
    // first time run 
    CheckWhatToShow(); 
    // run on scrool 
    $(window).scroll(RunWithSomeDelay); 
}); 

</script>

및

한

public partial class Dokimes_StackOverFlow_VirtualList : System.Web.UI.Page 
{ 
    List<int> oMainIds = new List<int>(); 

    protected void Page_Load(object sender, EventArgs e) 
    { 
     for (int i = 0; i < 3000; i++)    
      oMainIds.Add(i);    

     Repeater1.DataSource = oMainIds; 
     Repeater1.DataBind(); 
    } 

    public int GetID(object oItem){ 
     return (int)oItem; 
    } 
}

내가 테스트하고 그냥 찾아 작동하는지 테스트로 뒤에 내 코드입니다. 수행 할 수 있습니다 http://www.planethost.gr/VirtualList.rar

개선 :

스크롤 포인트에 가시성베이스를 검색 할 수 div에 무엇을 최적화하기 위해 여기
및
는 소스 코드입니다.
데이터의 그룹을로드하고 좀 속도를 최적화 할 div의

업데이트에 그들을 배치하고 Ajax 호출 테스트를 추가합니다. 이 최적화 작업을 위해 데이터가 포함 된 div의 높이가 페이지에서 동일해야합니다. 왼쪽에있는 데이터 그룹을로드하고 json으로 가져 와서 올바른 위치에 배치합니다.

http://www.planethost.gr/VirtualList2.rar

출처

2012-06-11 14:12:09 Aristos

ASP.net에 대한 가상 목록보기?

답변

관련 문제