半岛权威十大直营(官方)网站

上篇跟大家介绍了kendo.ui.ComboBox的ComboBox的Configuration。接下来介绍它的Fields和Method的上半部分。

Fields

dataSource kendo.data.DataSource

组件的数据源。通过dataSource选项进行配置。

数据源发生的变化会显示在组件上.

重要提示：部署新的数据源不会有任何影响，可以使用setDataSource方法代替。

示例-添加一个数据项到数据源中

<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
dataSource: [
{ name: "Apples" },
{ name: "Oranges" }
],
dataTextField: "name",
dataValueField: "name"
});
var combobox = $("#combobox").data("kendoComboBox");
combobox.dataSource.add({ name: "Appricot" });
combobox.search("A");
</script>

input jQuery

用户输入的jQuery对象。

示例-获取输入元素

<input id="combobox" />
<script>
$("#combobox").kendoComboBox();

var combobox = $("#combobox").data("kendoComboBox");

var input = combobox.input;
<script>

options Object

保存了组件的所有选项。

示例-获取组件的选项

<input id="combobox" />
<script>
$("#combobox").kendoComboBox();

var combobox = $("#combobox").data("kendoComboBox");

var options = combobox.options;
<script>

list jQuery

下拉列表项的jQuery对象。

示例-获取列表元素

<input id="combobox" />
<script>
$("#combobox").kendoComboBox();

var combobox = $("#combobox").data("kendoComboBox");

var list = combobox.list;
<script>

ul jQuery

ul元素的jQuery对象，用于处理可用的选项。

示例-获取ul元素

<input id="combobox" />
<script>
$("#combobox").kendoComboBox();

var combobox = $("#combobox").data("kendoComboBox");

var ul = combobox.ul;
<script>

Methods

close

关闭组件的弹出菜单。

示例-关闭建议弹出菜单

<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
dataSource: [ "Apples", "Oranges" ]
});
var combobox = $("#combobox").data("kendoComboBox");
// Search for items starting with "A" - will open the suggestion popup and show "Apples"
combobox.search("A");
// Close the suggestion popup
combobox.close();
</script>

dataItem

返回指定索引的数据项。如果未指定索引，如果没有指定索引,将使用选中的索引。

Parameters

index Number (optional)

数据记录从0开始的索引。

Returns

Object 原始数据记录。如果没有数据返回undefined。

示例

<input id="combobox" />
<script>

$("#combobox").kendoComboBox({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
dataValueField: "id",
index: 1
});

var combobox = $("#combobox").data("kendoComboBox");

// get the dataItem corresponding to the selectedIndex.
var dataItem = combobox.dataItem();

// get the dataItem corresponding to the passed index.
var dataItem = combobox.dataItem(0);
</script>

destroy

分离所有事件处理器并删除jQuery.data属性，以避免内存泄露。

重要提示：这个方法不会删除DOM中的ComboBox元素。

示例

<input id="combobox" />
<script>
$("#combobox").kendoComboBox();
var combobox = $("#combobox").data("kendoComboBox");
combobox.destroy();
</script>

enable

启用或禁用组件。

Parameters

enable Boolean

如果设置为true，组件会被启用，反正则被禁用。

示例-启用组件

<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
enable: false
});
var combobox = $("#combobox").data("kendoComboBox");
combobox.enable(true);
</script>

readonly

切换组件的只读状态。当组件为只读状态时不允许用户输入。

注意：只读模式和禁用之间有一个区别。禁用组件的值不会作为菜单的一部分，而只读会作为菜单的一部分值。

Parameters

readonly Boolean

如果设置为true，组件不允许用户输入。如果设置为false，组件允许用户输入。

示例-设置组件为只读模式

<input id="combobox" />
<script>
$("#combobox").kendoComboBox();
var combobox = $("#combobox").data("kendoComboBox");
combobox.readonly(true);
</script>

focus

聚焦组件

示例-

<input id="combobox" />
<script>
$("#combobox").kendoComboBox();
var combobox = $("#combobox").data("kendoComboBox");
combobox.focus();
</script>

open

打开弹出菜单。

示例-

<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
dataValueField: "id",
index: 1
});

var combobox = $("#combobox").data("kendoComboBox");
combobox.focus();
</script>

refresh

通过重新渲染所有的项目刷新弹出菜单。

示例-刷新项目

<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
dataValueField: "id",
index: 1
});

var combobox = $("#combobox").data("kendoComboBox");

combobox.refresh();
</script>

search

根据提供的值搜索数据源并显示匹配的建议。

Parameters

word String

过滤值。

示例-搜索组件

<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
dataValueField: "id",
index: 1
});

var combobox = $("#combobox").data("kendoComboBox");

combobox.search("App");
</script>

下载Kendo UI最新试用版