5

我知道列表视图的网络版本没有像移动版本那样开箱即用的无限滚动功能。我仍然需要在我的解决方案中实现这一点，我不确定从哪里开始。我拥有的所有想法都需要我再次重新加载所有数据。所以可以说我加载了 25 行。你到达滚动点，它又加载了 25 个，我实现它的方式是重新加载前 25 个，然后再添加 25 个。这当然会随着你走得越慢而变慢所以这不是一个选择有没有人成功地完成了这样的事情？有没有好的开源无限滚动解决方案可用？任何提示/信息/代码将不胜感激。

谢谢！

4

3 回答 3

0

此功能在网络中的剑道网格中可用（请参阅剑道网站中的虚拟滚动示例）。使用带有虚拟滚动的网格并修改显示模板看起来像 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" }]

    });
于 2013-03-20T21:55:01.610 回答
0

我最终想出了一个解决方案。带有网格的虚拟滚动不是我想要的。我放弃了 listview 并使用了数据源和普通的 kendo 模板渲染。

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

所以我的 DOM 看起来像这样。

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

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

于 2013-04-03T08:55:28.733 回答
0

我找到了一个使用 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");
        });


    })
)

如果要将搜索参数或其他内容发送到搜索服务，则应使用“AdditionalData”方法。

Javascript代码：

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();
        }

    });
});

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

于 2015-03-02T09:44:39.090 回答