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

Question

Kendoui版本2015.2.805

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

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

当小部件首次在 fiddler 中初始化时，我看到 valueMapper 被调用时值为 -1 并且服务器 returns []，然后小部件调用分页数据（take=80 , skip=0) 和服务器 return 并且小部件正常显示数据。

当我向下翻页到未加载的项目时，小部件调用第二页数据（take=80，skip=80）并且服务器 returns 它，但小部件不断重新请求数据。小部件在第一次调用后永远不会调用 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;
}

Answer 1

数据源 return 编辑的数据必须 return 总记录数以及分页数据。这与 kendo 数据网格中的分页相同。所以将服务器输出更改为：

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

和架构到：

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

解决了问题。

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

Kendo ui dropdownlist virtualization fails on 2nd page retrieval

kendo-ui

kendo-dropdown