2012-06-11 36 views
2

是否有ASP.net的虚拟列表视图?ASP.net的虚拟列表视图?


大多数表(和网格,列表视图,数据表,数据网格,网格视图,列表网格),我找到asp.net期望通过数据用户页面。

我想要一个列表视图,其中包含,例如,10,000个项目;我不想要10页。

长列表的问题在1994年在“虚拟”模式下使用listview解决。该控件只需要给出要显示的项目数量。有关这些项目的控制信息(如用户将它们滚动到视图中或尝试在列上排序)。

是否有人创建了一个虚拟列表视图(可能使用异步JavaScript和XML或同步Javascript和XML)?


如果答案的“不”:不要害怕回答这个问题。这没有什么错的话回答:

回答

1

尝试看看infinite scroll jQuery plugin。我认为这就像你在找什么。

+1

缺点Twitter的/谷歌式的“无限”长卷,是滚动条不再代表滚动内容的大小。 –

2

我只是做一个虚拟的ListView示例。

我从一个中继器开始,我使用包含需要加载的数据库ID的属性来呈现div。

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

接下来的javascript,检查这个div是否可见,并使用ajax获取数据。

<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