Kendo UI之ComboBox下拉列表

本文主要是介绍Kendo UI之ComboBox下拉列表_转载，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

前言
ComboBox下拉列表
ComboBox配置项
- - 🚂动画 animation
  - 🚃自动绑定数据 autoBind
  - 🚄上级关联 cascadeForm
  - 🚅数据源 dataSource
  - 🚆文本字段 dataTextField
  - 🚇值字段 dataValueField
  - 🚈延时显示时间 delay
  - 🚉是否可用 enable
  - 🚊过滤规则 filter
  - 🚝过滤规则忽略大小写 ignoreCase
  - 🚞下拉列表高度 height
  - 🚋下拉列表第一个自动高亮 highlightFirst
  - 🚌最小长度minLength
  - 🚍占位符 placeholder
  - 🚎自动填充 suggest
  - 🚐模板template
  - 🚑绑定原始值 valuePrimitive
  - 🚒默认索引值 index
  - 🚓默认文本 text
  - 🚔设置值 value
ComboBox其它操作
- - 数据源操作 dataSource
  - 选项集 options
  - 列表集 list
  - 列表 ul
  - 输入框 input

前言

本文转载自http://www.scscms.com/html/article/20131029-combobox.html
在原文基础上做了部分修改。

ComboBox下拉列表

ComboBox下拉列表是AutoComplete自动补齐和DropDownList 下拉框的综合体，它即可以下拉选择，也可以输入后自动匹配。下面是一个代码完整的示例：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Kendo UI combobox</title><link rel="stylesheet" type="text/css" href="./css/styles/kendo.common.min.css" /><link rel="stylesheet" type="text/css" href="./css/styles/kendo.default.min.css" /><script src="./js/kendojs/jquery.min.js"></script><script src="./js/kendojs/kendo.web.min.js"></script>
</head>
<body><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 categoryData = [{ CategoryName: "水果", CategoryID: 1 },{ CategoryName: "蔬菜", CategoryID: 2 },{ CategoryName: "电子产品", CategoryID: 3 }];var categoryDs = new kendo.data.DataSource({data: categoryData});// 分类下拉框初始化var categories = $("#categories").kendoComboBox({filter: "contains",placeholder: "Select category...",dataTextField: "CategoryName",dataValueField: "CategoryID",dataSource: categoryDs}).data("kendoComboBox");// 产品的本地数据源var productData = [{ ProductName: "苹果", ProductID: 1, CategoryID: 1 },{ ProductName: "香蕉", ProductID: 2, CategoryID: 1 },{ ProductName: "西红柿", ProductID: 3, CategoryID: 2 },{ ProductName: "菠菜", ProductID: 4, CategoryID: 2 },{ ProductName: "手机", ProductID: 5, CategoryID: 3 },{ ProductName: "电脑", ProductID: 6, CategoryID: 3 }];var productDs = new kendo.data.DataSource({data: productData});// 产品下拉框初始化var products = $("#products").kendoComboBox({autoBind: false,cascadeFrom: "categories",filter: "contains",placeholder: "Select product...",dataTextField: "ProductName",dataValueField: "ProductID",dataSource: productDs}).data("kendoComboBox");// 订单本地数据源var orderData = [{ ShipCity: "北京", OrderID: 1, ProductID: 1 },{ ShipCity: "上海", OrderID: 2, ProductID: 1 },{ ShipCity: "西安", OrderID: 3, ProductID: 2 },{ ShipCity: "天津", OrderID: 4, ProductID: 2 },{ ShipCity: "广州", OrderID: 5, ProductID: 3 },{ ShipCity: "新疆", OrderID: 6, ProductID: 3 },{ ShipCity: "太原", OrderID: 7, ProductID: 4 },{ ShipCity: "内蒙", OrderID: 8, ProductID: 4 },{ ShipCity: "青岛", OrderID: 9, ProductID: 5 },{ ShipCity: "广西", OrderID: 10, ProductID: 5 },{ ShipCity: "甘肃", OrderID: 11, ProductID: 6 },{ ShipCity: "四川", OrderID: 12, ProductID: 6 }];var orderDs = new kendo.data.DataSource({data: orderData});// 订单下拉框初始化var orders = $("#orders").kendoComboBox({autoBind: false,cascadeFrom: "products",filter: "contains",placeholder: "Select order...",dataTextField: "ShipCity",dataValueField: "OrderID",dataSource: orderDs}).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>
</body>
</html>

运行效果如下图所示：
combobox

ComboBox配置项

ComboBox的配置项有：

🚂动画 animation
🚃自动绑定数据 autoBind
🚄上级关联 cascadeForm
🚅数据源 dataSource
🚆文本字段 dataTextField
🚇值字段 dataValueField
🚈延时显示时间 delay
🚉是否可用 enable
🚊过滤规则 filter
🚝过滤规则忽略大小写 ignoreCase
🚞下拉列表高度 height
🚋下拉列表第一个自动高亮 highlightFirst
🚌最小长度minLength
🚍占位符 placeholder
🚎自动填充 suggest
🚐模板template
🚑绑定原始值 valuePrimitive
🚒默认索引值 index
🚓默认文本 Text
🚔设置值 value

🚂动画 animation

<<返回目录🏡
配置打开或者关闭下拉列表的特效。如果设值为false，打开或者关闭列表时将无动画。代码片断如下：

<input id="combobox" />
<script>$("#combobox").kendoComboBox({animation: {close: {effects: "fadeOut zoom:out",// 持续时间，单位毫秒duration: 300},open: {effects: "fadeIn zoom:in",duration: 300}}});  
</script>

🚃自动绑定数据 autoBind

<<返回目录🏡
表示初始化时是否自动绑定到数据源，默认值是true。代码片断如下：

<input id="combobox" />
<script>$("#combobox").kendoComboBox({autoBind: false});  
</script>

🚄上级关联 cascadeForm

<<返回目录🏡
指定本下拉框的上级关联是谁。这在制作类似省市县联动菜单时非常必要。代码片断如下：

<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>

🚅数据源 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>

🚆文本字段 dataTextField

<<返回目录🏡
ComboBox下拉菜单类似于<select>的<option>需要text与value。

🚇值字段 dataValueField

<<返回目录🏡
ComboBox下拉菜单类似于<select>的<option>需要text与value，是必须要指定的。dataTextField和dataValueField的代码片断如下：

<input id="combobox" />
<script>$("#comboBox").kendoComboBox({dataSource: [{ Name: "Parent1", Id: 1 },{ Name: "Parent2", Id: 2 }],dataTextField: "Name",dataValueField: "Id"});  
</script>

🚈延时显示时间 delay

<<返回目录🏡
当按下键盘与下拉列表出现的时间间隔，单位为毫秒，默认值是200毫秒。代码片断如下：

<input id="combobox" />
<script>$("#combobox").kendoComboBox({delay: 500});  
</script>

🚉是否可用 enable

<<返回目录🏡
设置输入框与下拉列表是否可用，默认是true。代码片断如下：

<input id="combobox" />
<script>$("#combobox").kendoComboBox({enable: false});  
</script>

🚊过滤规则 filter

<<返回目录🏡
过滤规则是决定下拉列表与输入字符串的关系。默认是“startswith”表示下拉列表的开头字符与输入框的字符一致。还支持的规则有endswith（末尾匹配）和contains（包含）。代码片断如下：

<input id="combobox" />
<script>$("#combobox").kendoComboBox({filter: "contains"});  
</script>

🚝过滤规则忽略大小写 ignoreCase

<<返回目录🏡
过滤搜索时是否忽略大小写，设置为false将区分大小写过滤搜索，默认是true。代码片断如下：

<input id="combobox" />
<script>$("#combobox").kendoComboBox({ignoreCase: false});  
</script>

🚞下拉列表高度 height

<<返回目录🏡
定义下拉列表的高度，单位是像素(px)，默认是200px。代码片断如下：

<input id="combobox" />
<script>$("#combobox").kendoComboBox({height: 500});  
</script>

🚋下拉列表第一个自动高亮 highlightFirst

<<返回目录🏡
定义下拉列表的第一个选项是否自动高亮（表示已经选择，回车即可选取），默认是true。代码片断如下：

<input id="combobox" />
<script>$("#combobox").kendoComboBox({highlightFirst: false});  
</script>

🚌最小长度minLength

<<返回目录🏡
需要输入至少多少个字符才启用搜索生成下拉列表，默认是输入1个字符。为了匹配更精确与减少服务器请求建议不要设置太小的值。代码片断如下：

<input id="combobox" />
<script>$("#combobox").kendoComboBox({minLength: 3});  
</script>

🚍占位符 placeholder

<<返回目录🏡
当输入框为空时显示的提示内容。代码片断如下：

<input id="combobox" />
<script>$("#combobox").kendoComboBox({placeholder: "Enter value ..."});  
</script>

🚎自动填充 suggest

<<返回目录🏡
当生成下拉列表时，是否自动填写第一个选项内容到输入框里，默认为false。代码片断如下：

<input id="combobox" />
<script>$("#combobox").kendoComboBox({suggest: true});  
</script>

🚐模板template

<<返回目录🏡
自定义下拉列表模板，比如生成带相片的名单。代码片断如下：

<!-- 方式一 -->
<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>

🚑绑定原始值 valuePrimitive

<<返回目录🏡
当为true时，表示使用dataValueField对应的值（它比较简单、原始，所以叫primitive），而当它为false时，表示使用一个比较复杂的值（一个即包含dataValueField，也包含dataTextField的对象）。完整代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Kendo UI combobox</title><link rel="stylesheet" type="text/css" href="./css/styles/kendo.common.min.css" /><link rel="stylesheet" type="text/css" href="./css/styles/kendo.default.min.css" /><script src="./js/kendojs/jquery.min.js"></script><script src="./js/kendojs/kendo.web.min.js"></script>
</head>
<body><form id="myform" action="" method="get"><input id="combobox" data-bind="value:v, source: products" name="productId" /><button type="button" id="form_btn" class="k-button" data-bind="click: btn">提交</button></form><hr />【动态展示】<br />comboBox.options.valuePrimitive = <span data-bind="text: primitive"></span><br />&emsp;&emsp;true表示使用简单的value，false表示使用复杂形式的value<br /><br />viewModel.v = <span data-bind="text: v"></span><br />每次点击提交，即可查看请求参数：<br />&emsp;&emsp;<span data-bind="text: req"></span><hr /><script>$("#combobox").kendoComboBox({// 这里的true和false要手动改valuePrimitive: false,dataTextField: "name",dataValueField: "id"});var comboBox = $("#combobox").data("kendoComboBox");console.log("comboBox =>");console.log(comboBox);var viewModel = kendo.observable({v: null,req: null,btn: function () {this.set("req", $("#myform").serialize());console.log("viewModel.v =>");console.log(viewModel.v);},primitive: comboBox.options.valuePrimitive,products: [{id: 1,name: "Coffee"},{id: 2,name: "Tea"},{id: 3,name: "Juice"}]});kendo.bind($("#combobox"), viewModel);kendo.bind($("span"), viewModel);kendo.bind($("#form_btn"), viewModel);</script>
</body>
</html>

运行效果如下图所示：
combobox_primitive

🚒默认索引值 index

<<返回目录🏡
初始化时自动设值的索引值，索引值是从0开始的，相当于数组下标，默认值为-1，代表没有初值。代码片断如下：

<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>

🚓默认文本 text

<<返回目录🏡
当自动绑定数据为false才可设置默认文本。代码片断如下：

<input id="combobox" />
<script>$("#combobox").kendoComboBox({autoBind: false,text: "Chai"});  
</script>

🚔设置值 value

<<返回目录🏡
设置默认值。代码片断如下：

<input id="combobox" />
<script>$("#combobox").kendoComboBox({dataSource: ["Item1", "Item2"],value: "Item1"});  
</script>

ComboBox其它操作

数据源操作 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>

选项集 options

获取选项集对象。代码片断如下：

<input id="combobox" />
<script>$("#combobox").kendoComboBox();var combobox = $("#combobox").data("kendoComboBox");var options = combobox.options;  
</script>

列表集 list

获取下拉列表jquery对象。代码片断如下：

<input id="combobox" />
<script>$("#combobox").kendoComboBox();var combobox = $("#combobox").data("kendoComboBox");var list = combobox.list;  
</script>

列表 ul

获取下拉列表父框架ul的jquery对象。代码片断如下：

<input id="combobox" />
<script>$("#combobox").kendoComboBox();var combobox = $("#combobox").data("kendoComboBox");var ul = combobox.ul;
</script>

输入框 input

获取下拉列框inputl的jquery对象。代码片断如下：

<input id="combobox" />
<script>$("#combobox").kendoComboBox();var combobox = $("#combobox").data("kendoComboBox");var input = combobox.input;  
</script>

这篇关于Kendo UI之ComboBox下拉列表_转载的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

Kendo UI之ComboBox下拉列表_转载