失眠网 > kendoUI之combobox下拉列表框

kendoUI之combobox下拉列表框

时间：2018-08-09 20:52:13

一、Configuration配置项

<input id="combobox" /> <script> $("#parent").kendoComboBox({// 动画 animationanimation: {close: {effects: "fadeOut zoom:out", duration: 300 }, open: {effects: "fadeIn zoom:in", duration: 300 } },// 自动绑定数据 autoBindautoBind: true,// 展示值dataTextField: "name", // 绑定值dataValueField: "value", // 数据源dataSource: [ {name: "Parent1", value: 1 }, {name: "Parent2", value: 2 } ],// 当按下键盘与下拉列表出现的时间间隔，单位为毫秒delay: 500,// 设置输入框与下拉列表是否可用enable: false,// 过滤规则 filterfilter: "contains",// 过滤规则忽略大小写 ignoreCaseignoreCase: false,// 下拉列表高度 heightheight: 500,// 下拉列表第一个自动高亮 highlightFirsthighlightFirst: false,// 忽略大小写 ignoreCaseignoreCase: false,// 最小长度minLengthminLength: 3,// 占位符 placeholderplaceholder: "Enter value ...",// 自动填充 suggestsuggest: true,// 绑定原始值 valuePrimitivevaluePrimitive: true,// 默认索引值 indexindex: 1,// 默认文本 Texttext: "默认占位",// 设置值 valuevalue: "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>