DropDownList下拉菜单

其他 2021-03-03 23:34:47 阅读次数: 0

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 
说明：初始化时是否自动绑定到数据源。 

<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<span style="font-family: arial, helvetica, sans-serif, ����;">({</span>  
  dataSource: {  
    data: ["One", "Two"]  
  }  
});  
//kendo的数据源  
var dataSource = new kendo.data.DataSource({  
  transport: {  
    read: {  
      url: "http://demos.kendoui.com/service/products",  
      dataType: "jsonp"  
    }  
  }  
});  
$("#id").kendoDropDownList<span style="font-family: arial, helvetica, sans-serif, ����;">({</span>  
  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。 

  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());
            }
        });

猜你喜欢

转载自blog.csdn.net/baiduwenku112/article/details/109524871
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022