kendoUI之combobox下拉列表框
一、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>
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对象。
如果觉得《kendoUI之combobox下拉列表框》对你有帮助,请点赞、收藏,并留下你的观点哦!