Kendo ui 用web listview实现无止境滚动

我知道listview的web版不像移动版那样具有开箱即用的无限滚动功能。我仍然需要在我的解决方案中实现这一点，但我不确定从哪里开始。我拥有的所有IDE都需要我重新加载所有数据。假设我加载了25行。你到达滚动点，它会再加载25个，按照我的实现方式，它会重新加载前25个，然后再添加25个。这当然会让你越慢，所以这不是一个选择哈，有人这样做成功吗？有没有好的开源无止境滚动解决方案？如有任何提示/信息/代码，将不胜感激

---

谢谢

此功能在web中的剑道网格中可用（请参见剑道网站中的虚拟滚动示例）。如何使用网格虚拟滚动和修改显示模板，使其看起来像listview

虚拟滚动网格的示例代码为：

 $("#yourList").kendoGrid({
        dataSource: {
            type: "json",                
            pageSize: 25,
            transport: {
                read: {
                    cache: false,
                    url: "controller/actionmethod",
                    type: "post",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json"
                }
            }
        },

        height: 150,
        width: 50,
        pageable: true,
        //selectable: "multiple",
        scrollable: {
            virtual: true
        },

        columns: [ { field: "col1", title: "col1" }]

    });

---

我最终想出了一个解决办法。使用网格进行虚拟滚动不是我想要的。我抛弃了listview，使用了数据源和普通的剑道模板渲染

下面是它的工作原理。。。我的数据有一个父div。我将一个事件附加到我的datasource change事件，一旦读取了一个新的数据页，父div就会附加一个子div，在该子div中呈现新的数据页。到目前为止，这对我来说是完美的

所以我的DOM看起来像这样

<div id="EndlesslyScrollabledata" >
    <div id="DataPage1">
       .....
   </div>
    <div id="DataPage2">
       .....
   </div>
</div>
<button> Load more data </button>

.....
.....
加载更多数据

---

每次单击load more data（加载更多数据）都会将数据源移动到下一页，附加下一个“DataPage”，并使用附加的“DataPage”中的数据呈现模板。

我找到了一个解决方案，它使用dataBinging事件来模拟此行为：

MVC代码：

@(Html.Kendo().ListView<your.custom.Class>()
    .Name("searchResults")
    .TagName("div")
    .ClientTemplateId("tptSearchResult")
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("Search", "ControllerName").Data("searchResults_AdditionalData");
        });


    })
)

---

只剩下一件事：同步后滚动到列表中添加的第一个元素。

+1我希望看到这一点。完整地展示您的代码是明智和谨慎的，这样我们就可以看到它是如何完成的，因为如果您不亲自来，我们也会向您共享相同的解决方案：）

function Search(page) {
    currentPage = page;
    if(page == 1) {
        searchResults = [];
    }

    $("#searchResults").data("kendoListView").dataSource.read();
}

function searchResults_AdditionalData(ev) {
    return {
        code: $("#txtSearchCode").val(),
        pageNumber: currentPage,
        pageSize: pageSize
    };
}

var currentPage = 1;
var pageSize = 20;
var searchResults = [];
$(document).ready(function () {

    $("#searchResults").data("kendoListView").bind("dataBinding", function(ev) {

        if(searchResults.length != (currentPage * pageSize)) {
            if(!!ev && !!ev.items && ev.items.length == pageSize) {
                $("#btnLoadMoreData").show();
            } else {
                $("#btnLoadMoreData").hide();
            }

            searchResults = $.merge(searchResults, ev.items);
            this.dataSource.data(searchResults);
            this.dataSource.sync();
        }

    });
});