文章分类 Classification
kendoUI系列教程之DropDownList下拉菜单
稿件来源: 阳光企业网站管理系统 撰稿作者: 太阳光 发表日期: 2013-11-12 阅读次数: 18176 查看权限: 游客查看
kendoUI系列教程,kendoUI中文教程,kendoUI中文API说明文档之DropDownList下拉菜单。
DropDownList其实就是select,只有下拉选择。可以把现有的select或者input渲染成下拉菜单:
<input id="color" value="1" /> <select id="size"> <option>S - 6 3/4"</option> <option>M - 7 1/4"</option> <option>L - 7 1/8"</option> <option>XL - 7 5/8"</option> </select> <script> $(document).ready(function() { var data = [ { text: "Black", value: "1" }, { text: "Orange", value: "2" }, { text: "Grey", value: "3" } ]; $("#color").kendoDropDownList({ dataTextField: "text", dataValueField: "value", dataSource: data, index: 0 }); $("#size").kendoDropDownList(); }); </script>
Configuration配置项
1、动画 animation
类型:Object
说明:配置打开或者关闭下拉列表的特效。如果设值为false,打开或者关闭列表时将无动画。
<input id="dropdownlist" /> <script> $("#dropdownlist").kendoDropDownList({ animation: { close: { effects: "fadeOut zoom:out", duration: 300 }, open: { effects: "fadeIn zoom:in", duration: 300 } } });
2、自动绑定数据 autoBind
类型:Boolean
默认:true
说明:初始化时是否自动绑定到数据源。
默认:true
说明:初始化时是否自动绑定到数据源。
<input id="dropdownlist" /> <script> $("#dropdownlist").kendoDropDownList({ autoBind: false }); </script>
3、上级关联 cascadeForm
类型:String
说明:指定本下拉框的上级关联是谁。这在制作类似省市县联动菜单时非常必要。
说明:指定本下拉框的上级关联是谁。这在制作类似省市县联动菜单时非常必要。
<input id="parent" /> <input id="child" /> <script> $("#parent").kendoDropDownList({ dataTextField: "parentName", dataValueField: "parentId", dataSource: [ { parentName: "Parent1", parentId: 1 }, { parentName: "Parent2", parentId: 2 } ] }); $("#child").kendoDropDownList({ cascadeFrom: "parent",//关联id=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>
4、数据源 dataSource
类型:Object|Array|kendo.data.DataSource
说明:指定下拉列表的数据来源,可以是对象或者数据,或者是kendo的数据源。
<script> //数组型数据源 $("#id").kendoDropDownList({ dataSource: { data: ["One", "Two"] } }); //kendo的数据源 var dataSource = new kendo.data.DataSource({ transport: { read: { url: "http://demos.kendoui.com/service/products", dataType: "jsonp" } } }); $("#id").kendoDropDownList({ dataSource: dataSource, dataTextField: "ProductName", dataValueField: "ProductID" }); </script>
5、文本字段 dataTextField
类型:String
默认:""
说明:DropDownList下拉菜单的option需要text与value。必须指定。
6、值字段 dataValueField
类型:String
默认:""
说明:DropDownList下拉菜单t的option需要text与value。如果没有指定自动获取dataTextField。
<input id="dropdownlist" /> <script> $("#dropdownlist").kendoDropDownList({ dataSource: [{ { Name: "Parent1", Id: 1 }, { Name: "Parent2", Id: 2 } }] dataTextField: "Name", dataValueField: "Id" }); </script>
7、延时显示时间 delay
类型:Number
默认:200
说明:当用户清除搜索文本之后下拉列表消除的时间,单位为毫秒。
<input id="dropdownlist" /> <script> $("#dropdownlist").kendoDropDownList({ delay: 500 }); </script>
8、是否可用 enable
类型:Boolean
默认:true
说明:设置下拉菜单是否可用。
<input id="dropdownlist" /> <script> $("#dropdownlist").kendoDropDownList({ enable: false }); </script>
9、过滤规则忽略大小写 ignoreCase
类型:Boolean
默认:true
说明:过滤搜索时是否忽略大小写,设置为false将区分大小写过滤搜索。
<input id="dropdownlist" /> <script> $("#dropdownlist").kendoDropDownList({ ignoreCase: false }); </script>
10、下拉列表高度 height
类型:Number
默认:200
说明:定义下拉列表的高度,单位是像素(px)。
<input id="dropdownlist" /> <script> $("#dropdownlist").kendoDropDownList({ height: 500 }); </script>
11、默认索引值 index
类型:Number
默认:0
说明:初始化时自动设值的索引值,数组是从0开始的。
<input id="dropdownlist" /> <script> var items = [{ text: "Item 1", value: "1" }, { text: "Item 2", value: "2" }]; $("#dropdownlist").kendoDropDownList({ dataTextField: "text", dataValueField: "value", dataSource: items, index: 1 }); </script>
12、optionLabel
类型:String | Object
默认:""
说明:下拉菜单默认选项,默认选项数据必须与数据源格式一致。如果要求必须含有dataValueField 和 dataTextField,默认选项值就必须是Object。
<input id="dropdownlist" /> <script> $("#dropdownlist").kendoDropDownList({ dataSource: ["Apples", "Oranges"], optionLabel: "Select a fruit..." //此情况可以是文本,表示值与文本一样 }); </script>
<input id="dropdownlist" /> <script> $("#dropdownlist").kendoDropDownList({ dataSource: [ { productName: "Product 1", productId: 1 }, { productName: "Product 2", productId: 2 } ], dataTextField: "productName", dataValueField: "productId", optionLabel: { productName: "Select a product...", productId: "" }//因数据源是对象,所以默认选项也必须是对象 }); </script>
13、忽略大小写 ignoreCase
类型:Boolean
默认:true
说明:过滤时是否忽略大小写,默认是忽略。
<input id="dropdownlist" /> <script> $("#dropdownlist").kendoDropDownList({ ignoreCase: false }); </script>
14、template
类型:String|Function
说明:自定义下拉列表模板,比如生成带相片的名单。
<input id="dropdownlist" /> <script id="template" type="text/x-kendo-template"> <span> <img src="/img/#: id #.png" alt="#: name #" /> #: name # </span> </script> <script> $("#dropdownlist").kendoDropDownList({ dataSource: [ { id: 1, name: "Apples" }, { id: 2, name: "Oranges" } ], dataTextField: "name", dataValueField: "id", template: kendo.template($("#template").html()) }); </script>
<input id="dropdownlist" /> <script> $("#dropdownlist").kendoDropDownList({ 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>
16、绑定原始值 valuePrimitive
类型:Boolean
默认:false
说明:当为true时输入框获取dataValueField对应的值,为false时获取dataTextField对应的值。(感谢:Yuliyana Kirova)
<input id="dropdownlist" data-bind="value: selectedProductId, source: products" /> <script> $("#dropdownlist").kendoDropDownList({ 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($("#dropdownlist"), viewModel); </script>
18、默认文本 Text
类型:String
默认:""
说明:当自动绑定数据为false才可设置默认文本。
<input id="dropdownlist" /> <script> $("#dropdownlist").kendoDropDownList({ autoBind: false, text: "Chai" }); </script>
19、设置值 value
类型:String
默认:""
说明:设置默认值。
<input id="dropdownlist" /> <script> $("#dropdownlist").kendoDropDownList({ dataSource: ["Item1", "Item2"], value: "Item1" }); </script>
Fields 其他属性
1、数据源操作 dataSource
类型:kendo.data.DataSource
说明:通过它可操作数据项。
<input id="dropdownlist" /> <script> $("#dropdownlist").kendoDropDownList({ dataSource: [ { name: "Apples" }, { name: "Oranges" } ], dataTextField: "name", dataValueField: "name" }); var dropdownlist = $("#dropdownlist").data("kendoDropDownList"); dropdownlist.dataSource.add({ name: "Appricot" }); dropdownlist.search("A"); </script>
2、选项集 options
类型:Object
说明:获取选项集对象。
<input id="dropdownlist" /> <script> $("#dropdownlist").kendoDropDownList(); var dropdownlist = $("#dropdownlist").data("kendoDropDownList"); var options = dropdownlist.options; <script>
3、列表集 list
类型:JQuery
说明:获取下拉列表jquery对象。
<input id="dropdownlist" /> <script> $("#dropdownlist").kendoDropDownList(); var dropdownlist = $("#dropdownlist").data("kendoDropDownList"); var list = dropdownlist.list; <script>
4、列表 ul
类型:JQuery
说明:获取下拉列表父框架ul的jquery对象。
<input id="dropdownlist" /> <script> $("#dropdownlist").kendoDropDownList(); var dropdownlist = $("#dropdownlist").data("kendoDropDownList"); var ul = dropdownlist.ul; <script>
5、输入框文件对象 span
类型:JQuery
说明:显示被选择文本的jquery对象。
<input id="dropdownlist" /> <script> $("#dropdownlist").kendoDropDownList(); var dropdownlist = $("#dropdownlist").data("kendoDropDownList"); var span = dropdownlist.span; span.css("background-color", "red"); <script>
Motheds 方法
<input id="dropdownlist" /> <script> $("#dropdownlist").kendoDropDownList({ dataSource: [ { id: 1, name: "Apples" }, { id: 2, name: "Oranges" } ], dataTextField: "name", dataValueField: "id", index: 1 }); var dataSource = new kendo.data.DataSource({ data: [ "Bananas", "Cherries" ] }); var dropdownlist = $("#dropdownlist").data("kendoDropDownList"); dropdownlist.search("A");//搜索"A"将弹出下拉菜单Apples dropdownlist.close();//关闭下拉菜单 dropdownlist.open();//打开下拉菜单 dropdownlist.toggle();//自动切换打开还是关闭下拉菜单 dropdownlist.readonly(true);//设为只读,将不能开下拉菜单 var dataItem = dropdownlist.dataItem();//获取已经选择项的Item对象 var dataItem = dropdownlist.dataItem(0);//获取指定下标的Item对象 dropdownlist.focus();//自动获取焦点 dropdownlist.setDataSource(dataSource);//设置数据源 dropdownlist.refresh();//刷新控件 dropdownlist.select(dropdownlist.ul.children().eq(0));//选择下拉菜单,支持几种形式 dropdownlist.select(1); dropdownlist.select(function(dataItem) { return dataItem.text === "Apples"; }); var selectedIndex = dropdownlist.select();//获取已经选择的下标 dropdownlist.text("Apples");//设置下拉菜单文本,将自动选择对应的Item dropdownlist.value("Oranges");//设置下拉菜单的值,如果不存在此值将设置不成功 dropdownlist.destroy(); //销毁下拉菜单 </script>
Events 事件
<input id="dropdownlist" /> <script> $("#dropdownlist").kendoDropDownList({ change: function(e) { var value = this.value();//打开下拉菜单时触发 }, close: function(e) { // 关闭下拉菜单时触发 }, open: function(e) { // 打开下拉菜单时触发 }, dataBound: function(e) { // 绑定数据时触发 }, select: function(e) { var item = e.item; var text = item.text(); // 选择下拉菜单时触发 },cascade: function() { // Handle the event } }); </script>
关键词: kendoui,html5,dropdownlist 编辑时间: 2013-11-22 23:49:43
11
高兴10
支持2
搞笑1
不解0
谎言0
枪稿0
震惊0
无奈0
无聊1
反对0
愤怒
58.51%(55)
41.49%(39)
- 暂无评论
文章图片 article Pictrue
网友评论