是否有ASP.net的虚拟列表视图?
我发现asp.net的大多数表(以及网格,列表视图,数据表,数据网格,网格视图,列表网格)都希望用户翻阅数据。
我想要一个包含例如10,000个项目的列表视图;我不想要10页。
1994年使用“虚拟”模式的列表视图解决了长列表的问题。控件只需要给出要显示的项目数。有关这些项目的控制信息(即用户将其滚动到视图中或尝试对列进行排序)。
是否有人创建了虚拟列表视图(可能使用异步Javascript和XML,或同步Javascript和XML)?
如果答案是“不”:不要害怕回答这个问题。答案是:
否
答案 0 :(得分:2)
我只创建一个虚拟的ListView示例。
我从一个转发器开始,我使用一个包含需要加载的数据库ID的属性来渲染div。
<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并放在正确的位置。
答案 1 :(得分:1)
尝试查看infinite scroll jQuery plugin。我认为这就像你在寻找什么。