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
- <input id="dropdownlist" />
- <script>
- $("#dropdownlist").kendoDropDownList({
- animation: {
- close: {
- effects: "fadeOut zoom:out",
- duration: 300
- },
- open: {
- effects: "fadeIn zoom:in",
- duration: 300
- }
- }
- });
2、自动绑定数据 autoBind
默认:true
说明:初始化时是否自动绑定到数据源。
- <input id="dropdownlist" />
- <script>
- $("#dropdownlist").kendoDropDownList({
- autoBind: false
- });
- </script>
3、上级关联 cascadeForm
说明:指定本下拉框的上级关联是谁。这在制作类似省市县联动菜单时非常必要。
- <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
- <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
6、值字段 dataValueField
- <input id="dropdownlist" />
- <script>
- $("#dropdownlist").kendoDropDownList({
- dataSource: [{
- { Name: "Parent1", Id: 1 },
- { Name: "Parent2", Id: 2 }
- }]
- dataTextField: "Name",
- dataValueField: "Id"
- });
- </script>
7、延时显示时间 delay
- <input id="dropdownlist" />
- <script>
- $("#dropdownlist").kendoDropDownList({
- delay: 500
- });
- </script>
8、是否可用 enable
- <input id="dropdownlist" />
- <script>
- $("#dropdownlist").kendoDropDownList({
- enable: false
- });
- </script>
9、过滤规则忽略大小写 ignoreCase
- <input id="dropdownlist" />
- <script>
- $("#dropdownlist").kendoDropDownList({
- ignoreCase: false
- });
- </script>
10、下拉列表高度 height
- <input id="dropdownlist" />
- <script>
- $("#dropdownlist").kendoDropDownList({
- height: 500
- });
- </script>
11、默认索引值 index
- <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
- <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
- <input id="<span style="font-family: arial, helvetica, sans-serif, ����;">dropdownlist</span><span style="font-family: arial, helvetica, sans-serif, ����;">" /></span>
- <script>
- $("#<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>
- ignoreCase: false
- });
- </script>
14、template
- <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
- <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
- <input id="dropdownlist" />
- <script>
- $("#dropdownlist").kendoDropDownList({
- autoBind: false,
- text: "Chai"
- });
- </script>
19、设置值 value
- <input id="dropdownlist" />
- <script>
- $("#dropdownlist").kendoDropDownList({
- dataSource: ["Item1", "Item2"],
- value: "Item1"
- });
- </script>
Fields 其他属性
1、数据源操作 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
- <input id="dropdownlist" />
- <script>
- $("#dropdownlist").kendoDropDownList();
- var dropdownlist = $("#dropdownlist").data("kendoDropDownList");
- var options = dropdownlist.options;
- <script>
3、列表集 list
- <input id="dropdownlist" />
- <script>
- $("#dropdownlist").kendoDropDownList();
- var dropdownlist = $("#dropdownlist").data("kendoDropDownList");
- var list = dropdownlist.list;
- <script>
4、列表 ul
- <input id="dropdownlist" />
- <script>
- $("#dropdownlist").kendoDropDownList();
- var dropdownlist = $("#dropdownlist").data("kendoDropDownList");
- var ul = dropdownlist.ul;
- <script>
5、输入框文件对象 span
- <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>
例子
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());
}
});