Question

我试图在gridview上实现Infinite Scrolling来加速我的Web应用程序，因为gridview被绑定到一个sql查询，它在开始时返回了数千条记录（它是客户端＆＃39我希望，我无法改变它。）

所以我一直在按照向无法滚动添加到{grid {3}}的网格视图的说明，它确实有效 - 用户第一次滚动到div的底部。第二次，没什么。

这是我用来跟踪div滚动事件的代码。原始代码是为Jquery 1.8.3编写的;我为Jquery 1.11更改了它。我还添加了后续方法，以便您了解当事情有效时会发生什么。

$("#dvGrid").scroll(function (e) {
    var $o = $(e.currentTarget);
    //if ($o[0].scrollHeight - $o.scrollTop() <= $o.outerHeight()) {
    //  GetRecords();
    //}
    if ($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) {
        GetRecords();
        console.log('end reached');
    }
});

//Function to make AJAX call to the Web Method
        function GetRecords() {
            pageIndex++;
            if (pageIndex == 2 || pageIndex <= pageCount) {

            //Show Loader
            if ($("#resultGrid .loader").length == 0) {
                var row = $("#resultGrid tr").eq(0).clone(true);
                row.addClass("loader");
                row.children().remove();
                row.append('<td colspan = "999" style = "background-color:white"><img id="loader" alt="" /></td>');
                $("#resultGrid").append(row);
            }
            $.ajax({
                type: "POST",
                url: "testPage.aspx/GetCustomers",
                data: '{pageIndex: ' + pageIndex + '}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response.d);
                },
                error: function (response) {
                    alert(response.d);
                }
            });
        }
    }

    //Function to recieve XML response append rows to GridView
    function OnSuccess(response) {
        var xmlDoc = $.parseXML(response.d);
        var xml = $(xmlDoc);
        pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
        var mills = xml.find("DBTableName");
        $("#resultGrid .loader").remove();
        mills.each(function () {
            var mill = $(this);
            var row = $("#resultGrid tr").eq(0).clone(true);
            $(".class", row).html(mill.find("data_item").text());

            // rinse, lather and repeat for each data item ...

            $("#resultGrid").append(row);
        });

        //Hide Loader
        $(".loader").hide();
    }

GetRecords是触发我的ajax更新的方法，就像我说的，它是第一次工作。广泛的断点表明，在第一次更新之后，我再也无法检测到用户何时滚动到div的底部。

div的高度没有变化，但是gridview的高度确实如此：10行被添加到更新的末尾，将行数从10增加到20。 scroll（）方法是原始代码检查到达div底部的方式;第二个条件是检查我从here得到的方法，但是我仍然遇到同样的问题，即使第二个条件中的数学每次都应该评估为真。有谁知道出了什么问题？

Answer 1

我明白了。在我的条件检查到达div的底部：

if ($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) {
    GetRecords();
    console.log('end reached');
}

“$（this）.scrollTop（）”返回了一个小数结果，这意味着在第一次更新之后，条件中的语句实际上加起来的数量一个像素的十分之一< / em>害羞的总滚动高度 - 1109.9而不是1110。

所以我用这种方式改变了条件：

if (Math.ceil($(this).scrollTop()) + $(this).innerHeight() >= this.scrollHeight) { GetRecords(); }

现在数学运算正常，每次都会触发更新。 Egad，我喜欢学习过程：P

使用asp.net gridview进行无限滚动，在第一次更新后没有检测到div滚动到底部

1 个答案: