Kendo ui 下拉列表虚拟化在第二页检索时失败答案

【问题标题】：Kendo ui dropdownlist virtualization fails on 2nd page retrievalKendo ui 下拉列表虚拟化在第二页检索时失败
【发布时间】：2017-01-14 18:36:09
【问题描述】：

剑道ui版本2015.2.805

我在 kendo 文档中为每个示例配置了一个 kendo 下拉列表来进行数据分页。它适用于第 1 页，使用 take/skip 参数从服务器加载 80 个条目。当我将列表向下翻到应该加载新项目的位置时，我可以在提琴手中看到小部件正在请求 take=80、skip=80（即第 2 页）并且服务器正在返回请求的记录。但是这个小部件只是一遍又一遍地重新请求同一个页面，直到我停止它。在此期间，未加载的条目在列表中显示为带有动画微调器的“正在加载”。

要进行虚拟化，小部件需要一个 valueMapper（我使用的是较旧的 kendo UI，所以它是必需的）。我已经实现了它，虽然我不清楚它应该返回什么（我相信的项目索引）我从文档中知道，如果它请求一个不存在的值来返回 []，这就是我在这种情况下所做的.我修改了 convertValues 函数以仅发送单个索引而不是示例数组，但 valueMapper 仅在初始化时调用一次，因此我返回的任何错误都不会对这个问题产生任何影响（我相信）。

当小部件第一次在提琴手中初始化时，我看到 valueMapper 被调用，值为 -1 并且服务器返回 []，然后小部件调用分页数据（take=80，skip=0）和服务器返回，小部件正常显示数据。

当我向下翻页到未加载的项目时，小部件调用第二页数据（take=80，skip=80）并且服务器返回它，但小部件不断重新请求数据。小部件在第一次调用后从不调用 valueMapper（这可能是正常的）。

我为高度和 itemHeight 正确设置了页面大小，但这只会导致第一页被加载两次（事实并非如此）。

设置如下：

wizard.paramMap = function (data, type) {
var params = {};
params.take = data.take;
params.skip = data.skip;
return params;
};


$("#clientField").kendoDropDownList({
autoWidth: true,
dataTextField: "text",
dataValueField: "value",
virtual: {
    itemHeight: 26,
    valueMapper: function(options) {
        $.ajax({
            url: resturi + "clientlist/valueMapper",
            dataType: "json",
            type: "GET",
            data: convertValues(options.value),
            success: function (data) {
                console.log("valueMapper = " + data)
                options.success(JSON.parse(data));
            }
        })
    }
},
height: 520,
dataSource: {
    transport: {
        read: {
            url: resturi + "clientlist",
            dataType: "json",
            type: "get"
        },
        parameterMap: wizard.paramMap
    },
    schema: {
        data: function (response) {
            console.log("clientlist = " + response);
            var o = JSON.parse(response);
            return o;
        }
    },
    pageSize: 80,
    serverPaging: true
}
});

function convertValues(value) {

var data = {};
value = $.isArray(value) ? value : [value];

for (var idx = 0; idx < value.length; idx++) {
    //data["values[" + idx + "]"] = value[idx];
    data["values"] = value[idx];
    break;
}

return data;
}

【问题讨论】：

我知道出了什么问题，但它引发了更多问题。结果集中只有 96 个条目，所以第 1 页工作正常，第 2 页请求 80 但只得到 16，所以它一直在询问。如果在服务器端我将空白记录填充到结果并返回 80 它可以工作，但是下拉列表允许我继续向下滚动到第 3、4、n 页，因为它不知道有多少记录。仅出于这个原因，剑道数据网格中的分页需要一个页面来返回总记录数 - 这应该如何用于下拉列表？
已解决 - 服务器必须返回每个页面的总数据计数 - 请参阅下面的答案。

标签： kendo-ui kendo-dropdown

【解决方案1】：

数据源返回的数据必须与分页数据一起返回总记录数。这与剑道数据网格中的分页相同。因此将服务器输出更改为：

{"total":X,"data":[...some data...]}

和架构：

schema: {
        total: function (response) {
            return (JSON.parse(response).total);
        },
        data: function (response) {
            return (JSON.parse(response).data);
        }
    }

解决问题。

【讨论】：