您当前位置:首页 > 文章中心 > HTML5+CSS3 > kendo UI

kendoUI系列教程之combobox下拉列表框

稿件来源: 阳光企业网站管理系统   撰稿作者: 太阳光   发表日期: 2013-10-29   阅读次数: 1055   查看权限: 游客查看

kendoUI系列教程,kendoUI中文教程,kendoUI中文API说明文档之combobox下拉列表框。

combobox下拉列表与autocomplete自动补齐和DropDownList 下拉菜单非常相似,DropDownList其实就是select,只有下拉选择。autocomplete是输入内容后匹配生成下拉来选择。combobox就是他们俩的结合体,即可下拉选择,也可输入自动匹配。他们的用法与属性很多是一样的。以下是一个联动ajax的效果:

<div class="demo-section">
<h2>View Order Details</h2>
<p>
	<label for="categories">Categories:</label><input id="categories" style="width: 300px" />
</p>
<p>
	<label for="products">Products:</label><input id="products" disabled="disabled" style="width: 300px" />
</p>
<p>
	<label for="orders">Orders:</label><input id="orders" disabled="disabled" style="width: 300px" />
</p>
<button class="k-button" id="get">View Order</button>
</div>
<script>
	$(document).ready(function() {
		var categories = $("#categories").kendoComboBox({
			filter: "contains",
			placeholder: "Select category...",
			dataTextField: "CategoryName",
			dataValueField: "CategoryID",
			dataSource: {
				type: "odata",
				serverFiltering: true,
				transport: {
					read: "http://demos.kendoui.com/service/Northwind.svc/Categories"
				}
			}
		}).data("kendoComboBox");

		var products = $("#products").kendoComboBox({
			autoBind: false,
			cascadeFrom: "categories",
			filter: "contains",
			placeholder: "Select product...",
			dataTextField: "ProductName",
			dataValueField: "ProductID",
			dataSource: {
				type: "odata",
				serverFiltering: true,
				transport: {
					read: "http://demos.kendoui.com/service/Northwind.svc/Products"
				}
			}
		}).data("kendoComboBox");

		var orders = $("#orders").kendoComboBox({
			autoBind: false,
			cascadeFrom: "products",
			filter: "contains",
			placeholder: "Select order...",
			dataTextField: "Order.ShipCity",
			dataValueField: "OrderID",
			dataSource: {
				type: "odata",
				serverFiltering: true,
				transport: {
					read: "http://demos.kendoui.com/service/Northwind.svc/Order_Details?$expand=Order"
				}
			}
		}).data("kendoComboBox");

		$("#get").click(function() {
			var categoryInfo = "\nCategory: { id: " + categories.value() + ", name: " + categories.text() + " }",
				productInfo = "\nProduct: { id: " + products.value() + ", name: " + products.text() + " }",
				orderInfo = "\nOrder: { id: " + orders.value() + ", name: " + orders.text() + " }";
			alert("Order details:\n" + categoryInfo + productInfo + orderInfo);
		});
	});
</script>

Configuration配置项

1、动画 animation
类型:Object
说明:配置打开或者关闭下拉列表的特效。如果设值为false,打开或者关闭列表时将无动画。
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
  animation: {
   close: {
     effects: "fadeOut zoom:out",
     duration: 300
   },
   open: {
     effects: "fadeIn zoom:in",
     duration: 300
   }
  }
});
2、自动绑定数据 autoBind
类型:Boolean
默认:true
说明:初始化时是否自动绑定到数据源。
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
    autoBind: false
});
</script>
3、上级关联 cascadeForm
类型:String
说明:指定本下拉框的上级关联是谁。这在制作类似省市县联动菜单时非常必要。
<input id="parent" />
<input id="child" />
<script>
$("#parent").kendoComboBox({
    dataTextField: "parentName",
    dataValueField: "parentId",
    dataSource: [
        { parentName: "Parent1", parentId: 1 },
        { parentName: "Parent2", parentId: 2 }
    ]
});

$("#child").kendoComboBox({
    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").kendoComboBox({
  dataSource: {
    data: ["One", "Two"]
  }
});
//kendo的数据源
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "http://demos.kendoui.com/service/products",
      dataType: "jsonp"
    }
  }
});
$("#id").kendoComboBox({
  dataSource: dataSource,
  dataTextField: "ProductName",
  dataValueField: "ProductID"
});
</script>
5、文本字段 dataTextField
类型:String
默认:""
说明:ComboBox下拉菜单类似select的option需要text与value。必须指定。
6、值字段 dataValueField
类型:String
默认:""
说明:ComboBox下拉菜单类似select的option需要text与value。如果没有指定自动获取dataTextField。
<input id="combobox" />
<script>
$("#comboBox").kendoComboBox({
    dataSource: [{
        { Name: "Parent1", Id: 1 },
        { Name: "Parent2", Id: 2 }
    }]
    dataTextField: "Name",
    dataValueField: "Id"
});
</script>
7、延时显示时间 delay
类型:Number
默认:200
说明:当按下键盘与下拉列表出现的时间间隔,单位为毫秒。
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
  delay: 500
});
</script>
8、是否可用 enable
类型:Boolean
默认:true
说明:设置输入框与下拉列表是否可用。
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
  enable: false
});
</script>
9、过滤规则 filter
类型:String
默认:startswith
说明:过滤规则是决定下拉列表与输入字符串的关系。默认是“startswith”表示下拉列表的开头字符与输入框的字符一致。还支持的规则有endswith(末尾匹配)和contains(包含)。
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
  filter: "contains"
});
</script>
10、过滤规则忽略大小写 ignoreCase
类型:Boolean
默认:true
说明:过滤搜索时是否忽略大小写,设置为false将区分大小写过滤搜索。
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
  ignoreCase: false
});
</script>
11、下拉列表高度 height
类型:Number
默认:200
说明:定义下拉列表的高度,单位是像素(px)。
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
  height: 500
});
</script>
12、下拉列表第一个自动高亮 highlightFirst
类型:Boolean
默认:true
说明:定义下拉列表的第一个选项是否自动高亮(表示已经选择,回车即可选取)。
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
  highlightFirst: false
});
</script>
13、忽略大小写 ignoreCase
类型:Boolean
默认:true
说明:过滤时是否忽略大小写,默认是忽略。
<input id="combobox" />
<script>
    $("#combobox").kendoComboBox({
        ignoreCase: false
    });
</script>
14、最小长度minLength
类型:Number
默认:1
说明:需要输入至少多少个字符才启用搜索生成下拉列表,默认是输入1个字符。为了匹配更精确与减少服务器请求建议不要设置太小的值。
<input id="combobox" />
<script>
    $("#combobox").kendoComboBox({
        minLength: 3
    });
</script>
15、占位符 placeholder
类型:String
默认:""
说明:当输入框为空时显示的提示内容。这本是html5的新属性。
<input id="combobox" />
<script>
    $("#combobox").kendoComboBox({
        placeholder: "Enter value ..."
    });
    //也可直接html里定义<input id="combobox" placeholder="Enter value..." />
</script>
16、自动填充 suggest
类型:Boolean
默认:false
说明:当生成下拉列表时,是否自动填写第一个选项内容到输入框里。
<input id="combobox" />
<script>
    $("#combobox").kendoComboBox({
        suggest: true
    });
</script>
17、template
类型:String|Function
说明:自定义下拉列表模板,比如生成带相片的名单。
<input id="combobox" />
<script id="template" type="text/x-kendo-template">
  <span>
    <img src="/img/#: id #.png" alt="#: name #" />
    #: name #
  </span>
</script>
<script>
$("#combobox").kendoComboBox({
  dataSource: [
    { id: 1, name: "Apples" },
    { id: 2, name: "Oranges" }
  ],
  dataTextField: "name",
  dataValueField: "id",
  template: kendo.template($("#template").html())
});
</script>
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
  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="combobox" data-bind="value: selectedProductId, source: products" />

<script>
$("#combobox").kendoComboBox({
  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($("#combobox"), viewModel);
</script>
17、默认索引值 index
类型:Number
默认:-1
说明:初始化时自动设值的索引值,数组是从0开始的。
<input id="combobox" />
<script>
var items = [{ text: "Item 1", value: "1" }, { text: "Item 2", value: "2" }];
$("#combobox").kendoComboBox({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: items,
    index: 1//默认选中{ text: "Item 2", value: "2" }
});
</script>
18、默认文本 Text
类型:String
默认:""
说明:当自动绑定数据为false才可设置默认文本。
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
     autoBind: false,
     text: "Chai"
});
</script>
19、设置值 value
类型:String
默认:""
说明:设置默认值。
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
     dataSource: ["Item1", "Item2"],
     value: "Item1"
});
</script>

Fields 其他属性

1、数据源操作 dataSource
类型:kendo.data.DataSource
说明:通过它可操作数据项。
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
  dataSource: [
    { name: "Apples" },
    { name: "Oranges" }
  ],
  dataTextField: "name",
  dataValueField: "name"
});
var combobox = $("#combobox").data("kendoComboBox");
combobox.dataSource.add({ name: "Appricot" });
combobox.search("A");
</script>
2、选项集 options
类型:Object
说明:获取选项集对象。
<input id="combobox" />
<script>
$("#combobox").kendoComboBox();
var combobox = $("#combobox").data("kendoComboBox");
var options = combobox.options;
<script>
3、列表集 list
类型:JQuery
说明:获取下拉列表jquery对象。
<input id="combobox" />
<script>
$("#combobox").kendoComboBox();
var combobox = $("#combobox").data("kendoComboBox");
var list = combobox.list;
<script>
4、列表 ul
类型:JQuery
说明:获取下拉列表父框架ul的jquery对象。
<input id="combobox" />
<script>
$("#combobox").kendoComboBox();
var combobox = $("#combobox").data("kendoComboBox");
var ul = combobox.ul;
<script>
5、输入框 input
类型:JQuery
说明:获取下拉列框inputl的jquery对象。
<input id="combobox" />
<script>
$("#combobox").kendoComboBox();
var combobox = $("#combobox").data("kendoComboBox");
var input = combobox.input;
<script>

 

快捷键
序号 快捷键 作用
1 alt + w 获取焦点。需要设置html5的accesskey属性
2 up arrow 高亮下拉列表上一个选项
3 down arrow 高亮下拉列表下一个选项
4 enter 选中高亮的选项
5 esc 关闭下拉列表
6 alt + down arrow 打开下拉列表
7 alt + up arrow 关闭下拉列表

在线浏览:http://demos.kendoui.com/web/combobox/navigation.html

关键词: kendoui,html5,combobox   编辑时间: 2013-11-22 23:42:19

  • 感到高兴

    0

    高兴
  • 感到支持

    2

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    5

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    8

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
100%(7)
0%(0)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博  匿名评论  验证码:  点击更新
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐
  • kendo ui简介
  • QQ登录网站实战教程