ASP.net 有虚拟列表视图吗？
我为 asp.net 找到的大多数表（和网格、列表视图、数据表、数据网格、网格视图、列表网格）都希望用户对数据进行分页。
我想要一个包含例如 10,000 个项目的列表视图；而且我不想要 10 页。
1994 年，使用“虚拟”模式下的列表视图解决了长列表的问题。控件只需要给出要显示的项目数。根据需要（即当用户将它们滚动到视图中，或尝试按列排序时）有关这些项目的控制信息。
有没有人创建一个虚拟列表视图（大概使用异步 Javascript 和 XML，或同步 Javascript 和 XML）？
如果答案是“否”：不要害怕回答问题。答案没有错：
没有。
【问题讨论】：
标签： asp.net listview virtualmode
我只制作了一个虚拟 ListView 示例。
我从渲染 div 的转发器开始，其属性包含需要加载的数据库 ID。
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div data-id="<%# GetID(Container.DataItem) %>" class="DataLine">
loading...
</div>
</ItemTemplate>
</asp:Repeater>
接下来是检查这个 div 是否可见的 javascript，并使用 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
可以做的改进：
更新 我做了一些速度优化，并添加了ajax调用测试。对于此优化工作，包含数据的 div 的高度在整个页面中必须相同。留下来加载一组数据，将它们获取为json并放置在正确的位置。
【讨论】：
尝试查看infinite scroll jQuery plugin。我想这就是你要找的东西。
【讨论】：