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

原创|使用教程|编辑:我只采一朵|2014-06-30 10:53:26.000|阅读 4823 次

概述:本节为大家介绍kendo.ui.ComboBox,分为上下两篇,上篇先介绍ComboBox的Configuration。

相关链接:

本节为大家介绍kendo.ui.ComboBox,分为上下两篇,上篇先介绍ComboBox的Configuration。

Configuration


animation Object

设置建议弹出窗口的打开和关闭动画。将animation选项设置为false时,会禁用打开和关闭动画。

示例-禁用打开和关闭动画

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

示例-设置动画

<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
animation: {
close: {
effects: "fadeOut zoom:out",
duration: 300
},
open: {
effects: "fadeIn zoom:in",
duration: 300
}
}
});
</script>

animation.close Object

示例-设置关闭动画

<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
animation: {
close: {
effects: "zoom:out",
duration: 300
}
}
});
</script>

animation.close.effects String

显示关闭动画时的效果,多个效果之间应该由空格隔开。

animation.close.duration Number (default: 100)

关闭动画的持续时间以毫秒计算。

animation.open Object

建议窗口打开时的动画

示例-设置打开动画

<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
animation: {
open: {
effects: "zoom:in",
duration: 300
}
}
});
</script>

animation.open.effects String

显示打开动画时的效果。多个效果之间由空格隔开。

animation.open.duration Number (default: 200)

打开动画的持续时间以毫秒计算

autoBind Boolean(default: true)

控制是否在初始化极端绑定组件给数据源

示例

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

cascadeFrom String

使用这个字符创去设置父ComboBox组件的ID

示例

<input id="parent" />
<input id="child" />
<script>
$("#parent").kendoComboBox({
dataTextField: "parentName",
dataValueField: "parentId",
dataSource: [
{ parentName: "Parent1", parentId: 1 },
{ parentName: "Parent2", parentId: 2 }
]
});

$("#child").kendoComboBox({
cascadeFrom: "parent",
dataTextField: "childName",
dataValueField: "childId",
dataSource: [
{ childName: "Child1", childId: 1, parentId: 1 },
{ childName: "Child2", childId: 2, parentId: 2 },
{ childName: "Child3", childId: 3, parentId: 1 },
{ childName: "Child4", childId: 4, parentId: 2 }
]
});
</script>

cascadeFromField String

自定义筛选数据源的字段,如果没有定义,父节点的dataValueField选项会被使用。

示例

<input id="parent" />
<input id="child" />
<script>
$("#parent").kendoComboBox({
dataTextField: "name",
dataValueField: "id",
dataSource: [
{ name: "Parent1", id: 1 },
{ name: "Parent2", id: 2 }
]
});

$("#child").kendoComboBox({
cascadeFrom: "parent",
cascadeFromField: "parentId",
dataTextField: "name",
dataValueField: "id",
dataSource: [
{ name: "Child1", id: 1, parentId: 1 },
{ name: "Child2", id: 2, parentId: 2 },
{ name: "Child3", id: 3, parentId: 1 },
{ name: "Child4", id: 4, parentId: 2 }
]
});
</script>

dataSource Object|Array|kendo.data.DataSource

组件的数据源用于显示一串值。它可以是一个JavaScript对象,代表着一个有效的数据源配置、一个JavaScript数组或一个当前kendo.data.DataSource实体。

如果数据源选项设置为一个JavaScript对象或数组,组件会初始化一个新的kendo.data.DataSource实体。

如果数据源选项时当前的某个kendo.data.DataSource实体,组件会使用这个实体且不会再初始化。

示例-设置dataSource作为一个JavaScript对象

<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
dataSource: {
data: ["One", "Two"]
}
});
</script>

示例 - 设置dataSource作为JavaScript数组

<input id="combobox" />
<script>
var data = ["One", "Two"];
$("#combobox").kendoComboBox({
dataSource: data
});
</script>

示例- 设置dataSource作为当前的kendo.data.DataSource实体

<input id="combobox" />
<script>
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/products",
dataType: "jsonp"
}
}
});
$("#combobox").kendoComboBox({
dataSource: dataSource,
dataTextField: "ProductName",
dataValueField: "ProductID"
});
</script>

dataTextField String(default: "")

提供列表项文本内容的字段。组件会根据字段判断数据源。

重要提示:当定义dataTextField 后,thedataValueField 选项也必须设置。

示例 - 设置dataTextField

<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
dataSource: [
{ Name: "Parent1", Id: 1 },
{ Name: "Parent2", Id: 2 }
],
dataTextField: "Name",
dataValueField: "Id"
});
</script>

dataValueField String(default: "")

提供组件值的字段。

重要提示:当dataValueField定义后,thedataTextField选项也必须设置。

示例 - 设置dataValueField

<input id="combobox" />
<script>
$("#comboBox").kendoComboBox({
dataSource: [{
{ Name: "Parent1", Id: 1 },
{ Name: "Parent2", Id: 2 }
}]
dataTextField: "Name",
dataValueField: "Id"
});
</script>

delay Number(default: 200)

敲下键盘后弹出菜单显示出来之间的延迟。

示例-设置延迟

<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
delay: 500
});
</script>

enable Boolean(default: true)

如果设置为false,组件会被禁用,不允许用户输入。组件默认情况下是启用的,运行用户输入。

示例-禁用组件

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

filter String(default: "none")

这个过滤方法决定建议的当前值。

示例 - 设置过滤

<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
filter: "contains"
});
</script>

height Number(default: 200)

建议窗口的高度单位是像素,默认是200px。

示例-设置高度

<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
height: 500
});
</script>

highlightFirst Boolean(default: true)

如果设置为true,第一个建议会自动高亮显示。

示例 -设置highlightFirst

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

ignoreCase String(default: true)

如果设置为false,搜索时会区分字母大小写。组件默认情况下会执行区分大小写。

示例-禁用区分字母大小写

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

index Number(default: -1)

最初选中项的索引,索引是基于0的。

示例-选择第二个项

<input id="combobox" />
<script>
var items = [{ text: "Item 1", value: "1" }, { text: "Item 2", value: "2" }];
$("#combobox").kendoComboBox({
dataTextField: "text",
dataValueField: "value",
dataSource: items,
index: 1
});
</script>

minLength Number(default: 1)

搜索时用户必须输入的最小字符数。如果搜索能匹配的项目很多,将值设置为大于1的数。

示例-设置最小长度

<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
minLength: 3
});
</script>

placeholder String(default: "")

当占位符为空时组件会显示提示,默认情况下没有设置。

示例-指定占位符选项

<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
placeholder: "Select..."
});
</script>

示例-指定占位符作为HTML属性

<input id="combobox" placeholder="Select..." />

<script>
$("#combobox").kendoComboBox({
dataSource: ["Item1", "Item2"]
});
</script>

suggest Boolean(default: false)

如果设置为true,组件会自动适应第一个建议。

示例-启用自动建议

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

headerTemplate String|Function

指定一个静态HTML内容,作为弹出元素的头部。

重要提示:组件不会传递一个模块数据给header模板,这个选项只能用静态HTML。

示例 - 指定headerTemplate字符串

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

template String|Function

用于渲染项目的模板。默认情况下组件只显示数据项的文本(通过dataTextField配置)。

示例-设定一个函数作为模板

<input id="combobox" />
<script id="template" type="text/x-kendo-template">
<span>
<img src="/img/#: id #.png" alt="#: name #" />
#: name #
</span>
</script>
<script>
$("#combobox").kendoComboBox({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
dataValueField: "id",
template: kendo.template($("#template").html())
});
</script>

示例-设定一个字符串作为模板

<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
dataValueField: "id",
template: '<span><img src="/img/#: id #.png" alt="#: name #" />#: name #</span>'
});
</script>

text String(default: "")

当autoBind设置为false时,会运用的组件文本。

示例-指定组件文本

<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
autoBind: false,
text: "Chai"
});
</script>

value String(default: "")

组件的值。

示例-设定组件的值

<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
dataSource: ["Item1", "Item2"],
value: "Item1"
});
</script>

valuePrimitive Boolean(default: false)

当初始化模块值为空时,设定绑定操作的值。如果设置为true,View-Model字段会更新为选中的项目字段值。如果设置为false,View-Model字段会更新为选中的项目。

示例-设定View-Model字段更新为选中的项目值

<input id="combobox" data-bind="value: selectedProductId, source: products" />

<script>
$("#combobox").kendoComboBox({
valuePrimitive: true,
dataTextField: "name",
dataValueField: "id"
});
var viewModel = kendo.observable({
selectedProductId: null,
products: [
{ id: 1, name: "Coffee" },
{ id: 2, name: "Tea" },
{ id: 3, name: "Juice" }
]
});

kendo.bind($("#combobox"), viewModel);
</script>


标签: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