Kendo UI API中文介绍七:ComboBox (2)

原创|使用教程|编辑:我只采一朵|2014-08-15 09:53:42.000|阅读 7386 次

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

相关链接:

上篇跟大家介绍了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对象。

示例-获取输入元素

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

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

var input = combobox.input;
&lt;script>


options Object

保存了组件的所有选项。

示例-获取组件的选项

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

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

var options = combobox.options;
&lt;script>


list jQuery

下拉列表项的jQuery对象。

示例-获取列表元素

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

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

var list = combobox.list;
&lt;script>

ul jQuery

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

示例-获取ul元素

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

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

var ul = combobox.ul;
&lt;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最新试用版


kendo ui线下培训



标签:APIKendoUI

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:慧都控件

登录慧都网发表评论登录


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
相关厂商
相关产品
Kendo UI Web

运用JavaScript和HTML5就能快速创建性能最优的Web应用程序

Kendo UI Mobile

使用HTML5和JavaScript快速开发跨平台原生移动应用程序的移动应用程序框架

Kendo UI DataViz

跨平台跨设备的数据可视化组件

Kendo UI Server Wrappers

帮助你开发基于Kendo UI的出色的HTML5应用程序,并且无需亲自编写JavaScript。

Kendo UI Core

Kendo UI Core是Kendo UI的开源免费版,是HTML5构架下的用于网络和移动开发的工具。

Kendo UI

全新升级的Kendo UI,是创建数据丰富的Web应用程序的最完整UI库。

在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat