虚拟化
的剑道UI自动完成,组合框,DropDownList，和多选支持UI和数据虚拟化。
无论数据集大小如何，通过在ComboBox的弹出式列表中使用固定数量的列表项，虚拟化使您能够显示大型数据集。滚动列表时，ComboBox重用现有项来显示相关数据，而不是创建新项。
本文中演示的配置ComboBox虚拟化功能的方法与配置AutoComplete、DropDownList和MultiSelect小部件的分组功能的方法相同。
有关虚拟化的可运行示例，请参考以下演示:
开始
为了检索和显示整个数据集的一个子集，ComboBox结合了数据和用户界面(UI)虚拟化。为了实现数据虚拟化，ComboBox使用数据源的分页功能和远程数据检索。通过这种方式，小部件只检索指定的数据页，而不是一次请求整个数据集。要确保ComboBox正常工作，请正确配置数据源的分页。有关更多信息，请参阅服务器分页配置。
下面的示例演示如何设置最小的小部件和DataSource配置，使虚拟化按预期工作。
基本配置
为了使虚拟化正常工作:
设置项目和容器高度
ComboBox应用一种特定的策略，重用DOM元素列表来显示相应的数据块。这些元素的数量是根据高度和itemHeight选项。计算完数字后，小部件将创建这些元素，并开始重用它们来显示当前的数据源页面。
虚拟化列表中的所有项需要具有相同的高度。如果未指定高度值，则itemHeight将自动设置，因为它是设置在当前的主题和字体大小。
如果没有指定
itemHeight选项，则组合框将执行一个额外的数据源请求，这很少会导致任何关键问题。
虚拟列表容器需要有高度以像素为单位设置的选项。否则，列表将使用默认值高度的200 px。
设置页面大小
为确保组合框的正确工作，请使用页大小的值是根据(高度/itemHeight* 4)公式。ComboBox本身进行计算和定义页大小值如果与计算出的值不匹配，则覆盖该值。例如，如果高度设为520 px和itemHeight设为26,页大小将被设置为80因为(520 / 26)* 4)等于80。
- 启用分页和设置
页大小只有配置了ComboBox的虚拟化后才有效。- 为了避免多个初始请求，定义一个正确的
页大小价值。
返回适当的数据
每个虚拟化请求的响应必须包含以下字段:
- 具有指定数据页的数组。
- 的数据集中存在的所有项的总数
总计字段。
可以指定包含数组的字段数据和总计在ComboBox的数据源模式的配置中。一旦在客户机上接收到一页数据，它就会被缓存，如果用户滚动列表，就不会对以前的数据页发出新的请求，虚拟化将只在客户机上进行。
为防止对最后一页数据的无限请求，请确保
总计计数已达。如果不是，则小部件将发出请求，直到它接收到所表示的唯一项的总数。
值的映射
自剑道UI R3 2016发布以来，实现了
valueMapper函数是可选的，只有当小部件包含初始值或使用价值方法。
与数据和UI虚拟化不同，valueMapper之所以引入，是因为ComboBox需要维护选中的项，并仅根据值显示选中的数据项。要显示所选文本，小部件必须检索所选数据项，该数据项是您不知道的特定数据页的一部分。收集所需的信息valueMapper回调。它传递选定的值并请求相应的行指数或dataItem这个值取决于mapValueTo配置选项。
映射索引值
当小部件接收到尚未从远程服务器获取的值时，它调用valueMapper函数并传递该函数中的选定值。如果mapValueTo没有显式设置为dataItem,valueMapper实现期望返回相应的数据项索引。从这个索引中，小部件计算出页码，并以这种方式通过发送一个额外的Ajax请求来预取特定的页面。如果该值不存在，则valueMapper预计会回归零，[],或1小部件将取消选择当前选中的项目。
valueMapper: function(options){$。ajax({url: "https://demos.telerik.com/kendo-ui/service/Orders/ValueMapper"，类型:"GET"，数据:options。Value， //发送值到服务器成功:function (data) {options.success(data);//返回对应数据项的索引号}})}映射数据项值
剑道UI R3 2016版引入的更改使您能够确定是否valueMapper必须将值解析为指数或者a的一个值dataItem。配置mapValueTo选项，接受两个可能的值-“指数”或“dataItem”。默认情况下，mapValueTo设为“指数”，不影响虚拟化进程的当前行为。
如果你实现了mapValueTo:“dataItem”配置中,valueMapper预计会退货吗dataItems对应于所选值。小部件将使用返回的dataItems以呈现所选值，但不会将列表滚动到所选值。当用户打开列表时，小部件将显示第一个数据页面中的选项，而不管所选值是否属于第一个页面的一部分。的主要限制mapValueTo: dataItem配置。
mapValueTo: "dataItem"， valueMapper: function(options){$。ajax({url: "https://demos.telerik.com/kendo-ui/service/Orders/ValueMapper"，类型:"GET"，数据:options。value， //发送值到服务器成功:function (dataItems) {options.success(dataItems);//返回与提供的值相对应的数据项}})}将值映射到索引
的mapValueTo:“指数”默认为配置。的valueMapper当要选择数据源中不存在的数据项时，调用。
要查看实际过程，请使用带有以下小部件配置的示例案例:
- 的
页大小设为50。 - 所选值为
喷火。
在初始加载时，小部件检查所选值是否存在于加载的数据中。如果不是，则执行以下操作:
- 它调用
valueMapper，请求与所选值对应的行索引喷火。 - 的
valueMapper调用服务1，传递所选值喷火到它。 - 的
服务1方法对应的行索引喷火价值。在这种情况下是1250。 - 的
valueMapper函数将此行索引返回给小部件。 - 小部件计算页码。在这种情况下是
25。 - 控件请求它
服务2使用数据源。 - 的
服务2返回对应的第25页。 - 的
数据源将该页更改为25并显示显示所选项目的项目。
函数的结果的valueMapper当有多个选择可用时，期望返回行索引或索引列表。也就是说，服务应该返回一个索引(数字)或一个索引列表。如果该值不存在，则valueMapper返回零，[],或1，小部件取消选择当前选中的项。举个例子，请参考的结果测试服务这是在在线演示中使用的。
美元。ajax({url: "https://demos.telerik.com/kendo-ui/service/Orders/ValueMapper"， type: "GET"， dataType: "jsonp"， data: {"values[0]": "10661"} success: function (data){//返回数据为[413]。options.success(数据);}})Ajax方法调用的url类似于https://demos.telerik.com/kendo-ui/service/Orders/ValueMapper?values [0] = 10661结果是callback([413]) //结果是JSONP。
函数实现服务将所选值映射到特定的行索引。此功能的实现完全在您的控制之下。但是，最简化的实现包括对所有项进行迭代，计算行索引。更优化的解决方案仍然是使用专用的SQL方法在内部处理此操作。您可以使用ROW_NUMBER ()函数。
将值映射到dataItem
的mapValueTo:“dataItem”配置可作为剑道UI R3 2016。的valueMapper当要选择数据源中不存在的数据项时，调用。
要查看实际过程，请使用带有以下小部件配置的示例案例:
- 的
页大小设为50。 - 所选值为
喷火。
在初始加载时，小部件检查所选值是否存在于加载的数据中。如果不是，则执行以下操作:
- 它调用
valueMapper，请求与所选值对应的dataItem喷火。 - 的
valueMapper调用服务1，传递所选值喷火到它。 - 的
服务1对象对应的dataItem喷火价值。在这种情况下是{text: "bar"， value: "foo"}。 - 的
valueMapper函数将此dataItem返回给小部件。 - 小部件呈现所选项目模板。
- 小部件请求来自的第一个页面
服务2使用数据源。 - 的
服务2返回第一个数据页。 - 小部件列表显示来自第一页的项目，无论所选项目是否属于第一页。
函数的结果的valueMapper当有多个选择可用时，期望返回一个数据项或数据项列表。也就是说，服务应该返回一个数据项(对象)或一个数据项列表。如果值不存在，则valueMapper返回零或[]，小部件取消选择当前选定的值。
已知的限制
- 虚拟化特性可以处理对象，而不支持对原始值的虚拟化。
- 渲染的物品应该有相等的高度。虚拟列表中的每个项目都显示通过控件设置的高度
itemHeight选择。 - 虚拟化特性执行复杂的数据预取，并假设在小部件不知情的情况下，DataSource状态不会改变。任何手动数据操作，例如
读，页面，过滤器，添加，删除等，可能会导致小部件出现意外行为，因此不受支持。