kendoUI系列教程之DropDownList下拉菜单

5 篇文章 0 订阅

DropDownList其实就是select,只有下拉选择。可以把现有的select或者input渲染成下拉菜单:

  1. <input id="color" value="1" />  
  2. <select id="size">  
  3.     <option>S - 6 3/4"</option>  
  4.     <option>M - 7 1/4"</option>  
  5.     <option>L - 7 1/8"</option>  
  6.     <option>XL - 7 5/8"</option>  
  7. </select>  
  8. <script>  
  9.     $(document).ready(function() {  
  10.         var data = [  
  11.             { text: "Black", value: "1" },  
  12.             { text: "Orange", value: "2" },  
  13.             { text: "Grey", value: "3" }  
  14.         ];  
  15.         $("#color").kendoDropDownList({  
  16.             dataTextField: "text",  
  17.             dataValueField: "value",  
  18.             dataSource: data,  
  19.             index: 0  
  20.         });  
  21.         $("#size").kendoDropDownList();  
  22.     });  
  23. </script>  

Configuration配置项

1、动画 animation
类型:Object
说明:配置打开或者关闭下拉列表的特效。如果设值为false,打开或者关闭列表时将无动画。
  1. <input id="dropdownlist" />  
  2. <script>  
  3. $("#dropdownlist").kendoDropDownList({  
  4.   animation: {  
  5.    close: {  
  6.      effects: "fadeOut zoom:out",  
  7.      duration: 300  
  8.    },  
  9.    open: {  
  10.      effects: "fadeIn zoom:in",  
  11.      duration: 300  
  12.    }  
  13.   }  
  14. });  
2、自动绑定数据 autoBind
类型:Boolean
默认:true
说明:初始化时是否自动绑定到数据源。
  1. <input id="dropdownlist" />  
  2. <script>  
  3. $("#dropdownlist").kendoDropDownList({  
  4.     autoBind: false  
  5. });  
  6. </script>  
3、上级关联 cascadeForm
类型:String
说明:指定本下拉框的上级关联是谁。这在制作类似省市县联动菜单时非常必要。
  1. <input id="parent" />  
  2. <input id="child" />  
  3. <script>  
  4. $("#parent").kendoDropDownList({  
  5.     dataTextField: "parentName",  
  6.     dataValueField: "parentId",  
  7.     dataSource: [  
  8.         { parentName: "Parent1", parentId: 1 },  
  9.         { parentName: "Parent2", parentId: 2 }  
  10.     ]  
  11. });  
  12.   
  13. $("#child").kendoDropDownList({  
  14.     cascadeFrom: "parent",//关联id=parent 的下拉框  
  15.     dataTextField: "childName",  
  16.     dataValueField: "childId",  
  17.     dataSource: [  
  18.         { childName: "Child1", childId: 1, parentId: 1 },  
  19.         { childName: "Child2", childId: 2, parentId: 2 },  
  20.         { childName: "Child3", childId: 3, parentId: 1 },  
  21.         { childName: "Child4", childId: 4, parentId: 2 }  
  22.     ]  
  23. });  
  24. </script>  
4、数据源 dataSource
类型:Object|Array|kendo.data.DataSource
说明:指定下拉列表的数据来源,可以是对象或者数据,或者是kendo的数据源。
  1. <script>  
  2. //数组型数据源  
  3. $("#id").kendoDropDownList<span style="font-family: arial, helvetica, sans-serif, ����;">({</span>  
  4.   dataSource: {  
  5.     data: ["One""Two"]  
  6.   }  
  7. });  
  8. //kendo的数据源  
  9. var dataSource = new kendo.data.DataSource({  
  10.   transport: {  
  11.     read: {  
  12.       url: "http://demos.kendoui.com/service/products",  
  13.       dataType: "jsonp"  
  14.     }  
  15.   }  
  16. });  
  17. $("#id").kendoDropDownList<span style="font-family: arial, helvetica, sans-serif, ����;">({</span>  
  18.   dataSource: dataSource,  
  19.   dataTextField: "ProductName",  
  20.   dataValueField: "ProductID"  
  21. });  
  22. </script>  
5、文本字段 dataTextField
类型:String
默认:""
说明:DropDownList下拉菜单的option需要text与value。必须指定。
6、值字段 dataValueField
类型:String
默认:""
说明:DropDownList下拉菜单t的option需要text与value。如果没有指定自动获取dataTextField。
  1. <input id="dropdownlist" />  
  2. <script>  
  3. $("#dropdownlist").kendoDropDownList({  
  4.     dataSource: [{  
  5.         { Name: "Parent1", Id: 1 },  
  6.         { Name: "Parent2", Id: 2 }  
  7.     }]  
  8.     dataTextField: "Name",  
  9.     dataValueField: "Id"  
  10. });  
  11. </script>  
7、延时显示时间 delay
类型:Number
默认:200
说明:当用户清除搜索文本之后下拉列表消除的时间,单位为毫秒。
  1. <input id="dropdownlist" />  
  2. <script>  
  3. $("#dropdownlist").kendoDropDownList({  
  4.   delay: 500  
  5. });  
  6. </script>  
8、是否可用 enable
类型:Boolean
默认:true
说明:设置下拉菜单是否可用。
  1. <input id="dropdownlist" />  
  2. <script>  
  3. $("#dropdownlist").kendoDropDownList({  
  4.   enable: false  
  5. });  
  6. </script>  
9、过滤规则忽略大小写 ignoreCase
类型:Boolean
默认:true
说明:过滤搜索时是否忽略大小写,设置为false将区分大小写过滤搜索。
  1. <input id="dropdownlist" />  
  2. <script>  
  3. $("#dropdownlist").kendoDropDownList({  
  4.   ignoreCase: false  
  5. });  
  6. </script>  
10、下拉列表高度 height
类型:Number
默认:200
说明:定义下拉列表的高度,单位是像素(px)。
  1. <input id="dropdownlist" />  
  2. <script>  
  3. $("#dropdownlist").kendoDropDownList({  
  4.   height: 500  
  5. });  
  6. </script>  
11、默认索引值 index
类型:Number
默认:0

 

说明:初始化时自动设值的索引值,数组是从0开始的。
  1. <input id="dropdownlist" />  
  2. <script>  
  3.     var items = [{ text: "Item 1", value: "1" }, { text: "Item 2", value: "2" }];  
  4.     $("#dropdownlist").kendoDropDownList({  
  5.         dataTextField: "text",  
  6.         dataValueField: "value",  
  7.         dataSource: items,  
  8.         index: 1  
  9.     });  
  10. </script>  
12、optionLabel
类型:String | Object
默认:""
说明:下拉菜单默认选项,默认选项数据必须与数据源格式一致。如果要求必须含有dataValueField 和 dataTextField,默认选项值就必须是Object。
  1. <input id="dropdownlist" />  
  2. <script>  
  3. $("#dropdownlist").kendoDropDownList({  
  4.     dataSource: ["Apples""Oranges"],  
  5.     optionLabel: "Select a fruit..." //此情况可以是文本,表示值与文本一样  
  6. });  
  7. </script>  
  1. <input id="dropdownlist" />  
  2. <script>  
  3. $("#dropdownlist").kendoDropDownList({  
  4.     dataSource: [  
  5.         { productName: "Product 1", productId: 1 },  
  6.         { productName: "Product 2", productId: 2 }  
  7.     ],  
  8.     dataTextField: "productName",  
  9.     dataValueField: "productId",  
  10.     optionLabel: {  
  11.         productName: "Select a product...",  
  12.         productId: ""  
  13.     }//因数据源是对象,所以默认选项也必须是对象  
  14. });  
  15. </script>  
13、忽略大小写 ignoreCase
类型:Boolean
默认:true
说明:过滤时是否忽略大小写,默认是忽略。
  1. <input id="<span style="font-family: arial, helvetica, sans-serif, ����;">dropdownlist</span><span style="font-family: arial, helvetica, sans-serif, ����;">" /></span>  
  2. <script>  
  3.     $("#<span style="font-family: arial, helvetica, sans-serif, ����;">dropdownlist</span><span style="font-family: arial, helvetica, sans-serif, ����;">").</span><span style="font-family: arial, helvetica, sans-serif, ����;">kendoDropDownList</span><span style="font-family: arial, helvetica, sans-serif, ����;">({</span>  
  4.         ignoreCase: false  
  5.     });  
  6. </script>  
14、template
类型:String|Function
说明:自定义下拉列表模板,比如生成带相片的名单。
  1. <input id="dropdownlist" />  
  2. <script id="template" type="text/x-kendo-template">  
  3.   <span>  
  4.     <img src="/img/#: id #.png" alt="#: name #" />  
  5.     #: name #  
  6.   </span>  
  7. </script>  
  8. <script>  
  9. $("#dropdownlist").kendoDropDownList({  
  10.   dataSource: [  
  11.     { id: 1, name: "Apples" },  
  12.     { id: 2, name: "Oranges" }  
  13.   ],  
  14.   dataTextField: "name",  
  15.   dataValueField: "id",  
  16.   template: kendo.template($("#template").html())  
  17. });  
  18. </script>  
  1. <input id="dropdownlist" />  
  2. <script>  
  3. $("#dropdownlist").kendoDropDownList({  
  4.   dataSource: [  
  5.     { id: 1, name: "Apples" },  
  6.     { id: 2, name: "Oranges" }  
  7.   ],  
  8.   dataTextField: "name",  
  9.   dataValueField: "id",  
  10.   template: '<span><img src="/img/#: id #.png" alt="#: name #" />#: name #</span>'  
  11. });  
  12. </script>  
16、绑定原始值  valuePrimitive
类型:Boolean
默认:false
说明:当为true时输入框获取dataValueField对应的值,为false时获取dataTextField对应的值。(感谢:Yuliyana Kirova)
  1. <input id="dropdownlist" data-bind="value: selectedProductId, source: products" />  
  2.   
  3. <script>  
  4. $("#dropdownlist").kendoDropDownList({  
  5.   valuePrimitive: true,  
  6.   dataTextField: "name",  
  7.   dataValueField: "id"  
  8. });  
  9. var viewModel = kendo.observable({  
  10.   selectedProductId: null,  
  11.   products: [  
  12.     { id: 1, name: "Coffee" },  
  13.     { id: 2, name: "Tea" },  
  14.     { id: 3, name: "Juice" }  
  15.   ]  
  16. });  
  17.   
  18. kendo.bind($("#dropdownlist"), viewModel);  
  19. </script>  
18、默认文本 Text
类型:String
默认:""
说明:当自动绑定数据为false才可设置默认文本。
  1. <input id="dropdownlist" />  
  2. <script>  
  3. $("#dropdownlist").kendoDropDownList({  
  4.      autoBind: false,  
  5.      text: "Chai"  
  6. });  
  7. </script>  
19、设置值 value
类型:String
默认:""
说明:设置默认值。
  1. <input id="dropdownlist" />  
  2. <script>  
  3. $("#dropdownlist").kendoDropDownList({  
  4.      dataSource: ["Item1""Item2"],  
  5.      value: "Item1"  
  6. });  
  7. </script>  

Fields 其他属性

1、数据源操作 dataSource
类型:kendo.data.DataSource
说明:通过它可操作数据项。
  1. <input id="dropdownlist" />  
  2. <script>  
  3. $("#dropdownlist").kendoDropDownList({  
  4.   dataSource: [  
  5.     { name: "Apples" },  
  6.     { name: "Oranges" }  
  7.   ],  
  8.   dataTextField: "name",  
  9.   dataValueField: "name"  
  10. });  
  11. var dropdownlist = $("#dropdownlist").data("kendoDropDownList");  
  12. dropdownlist.dataSource.add({ name: "Appricot" });  
  13. dropdownlist.search("A");  
  14. </script>  
2、选项集 options
类型:Object
说明:获取选项集对象。
  1. <input id="dropdownlist" />  
  2. <script>  
  3. $("#dropdownlist").kendoDropDownList();  
  4. var dropdownlist = $("#dropdownlist").data("kendoDropDownList");  
  5. var options = dropdownlist.options;  
  6. <script>  
3、列表集 list
类型:JQuery
说明:获取下拉列表jquery对象。
  1. <input id="dropdownlist" />  
  2. <script>  
  3. $("#dropdownlist").kendoDropDownList();  
  4. var dropdownlist = $("#dropdownlist").data("kendoDropDownList");  
  5. var list = dropdownlist.list;  
  6. <script>  
4、列表 ul
类型:JQuery
说明:获取下拉列表父框架ul的jquery对象。
  1. <input id="dropdownlist" />  
  2. <script>  
  3. $("#dropdownlist").kendoDropDownList();  
  4. var dropdownlist = $("#dropdownlist").data("kendoDropDownList");  
  5. var ul = dropdownlist.ul;  
  6. <script>  
5、输入框文件对象 span
类型:JQuery
说明:显示被选择文本的jquery对象。
  1. <input id="dropdownlist" />  
  2. <script>  
  3. $("#dropdownlist").kendoDropDownList();  
  4. var dropdownlist = $("#dropdownlist").data("kendoDropDownList");  
  5. var span = dropdownlist.span;  
  6. span.css("background-color""red");  
  7. <script>  

Motheds 方法

  1. <input id="dropdownlist" />  
  2. <script>  
  3. $("#dropdownlist").kendoDropDownList({  
  4.   dataSource: [  
  5.     { id: 1, name: "Apples" },  
  6.     { id: 2, name: "Oranges" }  
  7.   ],  
  8.   dataTextField: "name",  
  9.   dataValueField: "id",  
  10.   index: 1  
  11. });  
  12. var dataSource = new kendo.data.DataSource({  
  13.   data: [ "Bananas""Cherries" ]  
  14. });  
  15. var dropdownlist = $("#dropdownlist").data("kendoDropDownList");  
  16. dropdownlist.search("A");//搜索"A"将弹出下拉菜单Apples  
  17. dropdownlist.close();//关闭下拉菜单  
  18. dropdownlist.open();//打开下拉菜单  
  19. dropdownlist.toggle();//自动切换打开还是关闭下拉菜单  
  20. dropdownlist.readonly(true);//设为只读,将不能开下拉菜单  
  21. var dataItem = dropdownlist.dataItem();//获取已经选择项的Item对象  
  22. var dataItem = dropdownlist.dataItem(0);//获取指定下标的Item对象  
  23. dropdownlist.focus();//自动获取焦点  
  24. dropdownlist.setDataSource(dataSource);//设置数据源  
  25. dropdownlist.refresh();//刷新控件  
  26. dropdownlist.select(dropdownlist.ul.children().eq(0));//选择下拉菜单,支持几种形式  
  27. dropdownlist.select(1);  
  28. dropdownlist.select(function(dataItem) {  
  29.     return dataItem.text === "Apples";  
  30. });  
  31. var selectedIndex = dropdownlist.select();//获取已经选择的下标  
  32. dropdownlist.text("Apples");//设置下拉菜单文本,将自动选择对应的Item  
  33. dropdownlist.value("Oranges");//设置下拉菜单的值,如果不存在此值将设置不成功  
  34. dropdownlist.destroy(); //销毁下拉菜单  
  35. </script>  

Events 事件

  1. <input id="dropdownlist" />  
  2. <script>  
  3. $("#dropdownlist").kendoDropDownList({  
  4.   change: function(e) {  
  5.     var value = this.value();//打开下拉菜单时触发  
  6.   },  
  7.   close: function(e) {  
  8.     // 关闭下拉菜单时触发  
  9.   },  
  10.   open: function(e) {  
  11.     // 打开下拉菜单时触发  
  12.   },  
  13.   dataBound: function(e) {  
  14.       // 绑定数据时触发  
  15.   },  
  16.   select: function(e) {  
  17.     var item = e.item;  
  18.     var text = item.text();  
  19.     // 选择下拉菜单时触发  
  20.   },cascade: function() {  
  21.     // Handle the event  
  22.   }  
  23. });  
  24. </script>  


例子

  var JX_TYPE = $("#aint0");
        JX_TYPE.kendoDropDownList({
            dataTextField: "text",//json返回的name
            dataValueField: "value",
            dataSource: data,
            value: "@Model.aint0",
            index:0,
            change: onChange,
        });


  dept.kendoDropDownList({
            cascadeFrom: "P_ORG_ID",//父id
            cascadeFromField: "PARENT_ID",//子数据中的key名称
            dataTextField: "NAME",//json返回的name
            dataValueField: "ID",
            value: "@Model.S_ORG_ID",
            index: 0,
            dataSource: obj_dict_dept
        });


   org_id.kendoDropDownList({
            dataTextField: "NAME",//json返回的name
            dataValueField: "ID",
            dataSource: obj_org_id,
            change: function (e) {
                so_change(this.value(), $("#TITLE").val());
            }
        });

  • 0
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值