kendoUI之combobox下拉列表框
一、Configuration配置项
<input id="combobox" />
<script>
$("#parent").kendoComboBox({
// 动画 animation
animation: {
close: {
effects: "fadeOut zoom:out",
duration: 300
},
open: {
effects: "fadeIn zoom:in",
duration: 300
}
},
// 自动绑定数据 autoBind
autoBind: true,
// 展示值
dataTextField: "name",
// 绑定值
dataValueField: "value",
// 数据源
dataSource: [
{
name: "Parent1", value: 1 },
{
name: "Parent2", value: 2 }
],
// 当按下键盘与下拉列表出现的时间间隔，单位为毫秒
delay: 500,
// 设置输入框与下拉列表是否可用
enable: false,
// 过滤规则 filter
filter: "contains",
// 过滤规则忽略大小写 ignoreCase
ignoreCase: false,
// 下拉列表高度 height
height: 500,
// 下拉列表第一个自动高亮 highlightFirst
highlightFirst: false,
// 忽略大小写 ignoreCase
ignoreCase: false,
// 最小长度minLength
minLength: 3,
// 占位符 placeholder
placeholder: "Enter value ...",
// 自动填充 suggest
suggest: true,
// 绑定原始值 valuePrimitive
valuePrimitive: true,
// 默认索引值 index
index: 1,
// 默认文本 Text
text: "默认占位",
// 设置值 value
value: "value1",
});
// 联动数据
$("#child").kendoComboBox({
cascadeFrom: "parent",//关联id=parent 的下拉框
dataTextField: "childName",
dataValueField: "childId",
dataSource: [
{
childName: "Child1", childId: 1, parentId: 1 },
{
childName: "Child2", childId: 2, parentId: 2 },
]
});
</script>
1.1 动画 animation
类型： Object
说明： 配置打开或者关闭下拉列表的特效。如果设值为false，打开或者关闭列表时将无动画。
1.2 自动绑定数据 autoBind
类型： Boolean
默认： true
说明： 初始化时是否自动绑定到数据源
1.3 上级关联 cascadeForm
类型： String
说明： 指定本下拉框的上级关联是谁。这在制作类似省市县联动菜单时非常必要。
1.4 数据源 dataSource
类型： Object|Array|kendo.data.DataSource
说明： 指定下拉列表的数据来源，可以是对象或者数据，或者是kendo的数据源。
1.5 文本字段 dataTextField
类型： String
默认：“”
说明： ComboBox下拉菜单类似select的option需要text与value。必须指定。
1.6 值字段 dataValueField
类型： String
默认：“”
说明： ComboBox下拉菜单类似select的option需要text与value。如果没有指定自动获取dataTextField。
1.7 延时显示时间 delay
类型： Number
默认： 200
说明： 当按下键盘与下拉列表出现的时间间隔，单位为毫秒。
1.8 是否可用 enable
类型： Boolean
默认： true
说明： 设置输入框与下拉列表是否可用。
1.9 过滤规则 filter
类型： String
默认： startswith
说明：过滤规则是决定下拉列表与输入字符串的关系。默认是“startswith”表示下拉列表的开头字符与输入框的字符一致。还支持的规则有endswith（末尾匹配）和contains（包含）。
1.10 过滤规则忽略大小写 ignoreCase
类型： Boolean
默认： true
说明： 过滤搜索时是否忽略大小写，设置为false将区分大小写过滤搜索。
1.11 下拉列表高度 height
类型： Number
默认： 200
说明： 定义下拉列表的高度，单位是像素(px)。
1.12 下拉列表第一个自动高亮 highlightFirst
类型： Boolean
默认： true
说明： 定义下拉列表的第一个选项是否自动高亮（表示已经选择，回车即可选取）。
1.13 忽略大小写 ignoreCase
类型： Boolean
默认： true
说明： 过滤时是否忽略大小写，默认是忽略。
1.14 最小长度minLength
类型： Number
默认： 1
说明： 需要输入至少多少个字符才启用搜索生成下拉列表，默认是输入1个字符。为了匹配更精确与减少服务器请求建议不要设置太小的值。
1.15 占位符 placeholder
类型： String
默认：“”
说明： 当输入框为空时显示的提示内容。这本是html5的新属性。
1.16 自动填充 suggest
类型： Boolean
默认： false
说明： 当生成下拉列表时，是否自动填写第一个选项内容到输入框里。
1.17 绑定原始值 valuePrimitive
类型： Boolean
默认： false
说明： 当为true时输入框获取dataValueField对应的值，为false时获取dataTextField对应的值。(感谢：Yuliyana Kirova)
1.18 默认索引值 index
类型： Number
默认：-1
说明： 初始化时自动设值的索引值，数组是从0开始的。
1.19 默认文本 Text
类型： String
默认：“”
说明： 当自动绑定数据为false才可设置默认文本。
1.20 设置值 value
类型： String
默认：“”
说明： 设置默认值。
二、Fields 其他属性
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
// 1.dataSource数据源
dataSource: [
{
name: "value1" },
{
name: "value2" }
],
dataTextField: "name",
dataValueField: "name"
});
var combobox = $("#combobox").data("kendoComboBox");
combobox.dataSource.add({
name: "Appricot" });
combobox.search("A");
// 2.获取选项集对象
var options = combobox.options;
// 3.获取下拉列表jquery对象
var list = combobox.list;
// 4.获取下拉列表父框架ul的jquery对象
var ul = combobox.ul;
// 5.获取下拉列框inputl的jquery对象
var input = combobox.input;
</script>
2.1 数据源操作 dataSource
类型： kendo.data.DataSource
说明： 通过它可操作数据项。
2.2 选项集 options
类型： Object
说明： 获取选项集对象。
2.3 列表集 list
类型： JQuery
说明： 获取下拉列表jquery对象。
2.4 列表 ul
类型： JQuery
说明： 获取下拉列表父框架ul的jquery对象。
2.5 输入框 input
类型： JQuery
说明： 获取下拉列框inputl的jquery对象。