Kendo UI API中文介绍七：ComboBox (1)-控件新闻-慧都网

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

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

概述：本节为大家介绍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>

标签：API KendoUI

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自：慧都控件

上一篇：如何在Github中比较图片修改前后效果下一篇：DevExpress使用心得七：为图表创建动态数据源