kendoUI之combobox下拉列表框
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对象。