asp.net - ASP.net 的虚拟 ListView ？

Question

是否有用于 ASP.net 的虚拟 ListView ？

---

我为 asp.net 找到的大多数表(以及网格、 ListView 、数据表、数据网格、 GridView 、列表网格)都希望用户翻阅数据。

我想要一个包含例如 10,000 个项目的 ListView ；我不想要 10 页。

1994 年，在“虚拟”模式下使用 ListView 解决了长列表的问题。控件只需要指定要显示的项目数。根据需要(即当用户将它们滚动到 View 中或尝试对列进行排序时)有关这些项目的控制信息。

有没有人创建过虚拟 ListView (大概使用异步 Javascript 和 XML，或者同步 Javascript 和 XML)？

---

如果答案是“否”:不要害怕回答这个问题。答案没有错:

No.

Answer 1

我只制作了一个虚拟 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

可以做的改进:

• 根据滚动点优化搜索可见性的div。
• 加载一组数据并将它们放在div上

更新我做了一些速度优化，并添加了 ajax 调用测试。对于此优化工作，正确的包含数据的 div 的高度必须在整个页面上相同。左加载一组数据，将它们获取为json并将它们放在正确的位置。

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