文章目录
- 前言
- ComboBox下拉列表
- ComboBox配置项
- 🚂动画 animation
- 🚃自动绑定数据 autoBind
- 🚄上级关联 cascadeForm
- 🚅数据源 dataSource
- 🚆文本字段 dataTextField
- 🚇值字段 dataValueField
- 🚈延时显示时间 delay
- 🚉是否可用 enable
- 🚊过滤规则 filter
- 🚝过滤规则忽略大小写 ignoreCase
- 🚞下拉列表高度 height
- 🚋下拉列表第一个自动高亮 highlightFirst
- 🚌最小长度minLength
- 🚍占位符 placeholder
- 🚎自动填充 suggest
- 🚐模板template
- 🚑绑定原始值 valuePrimitive
- 🚒默认索引值 index
- 🚓默认文本 text
- 🚔设置值 value
- ComboBox其它操作
前言
本文转载自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的配置项有：
- 🚂动画 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 />
  true表示使用简单的value，false表示使用复杂形式的value<br />
<br />
viewModel.v = <span data-bind="text: v"></span><br />
每次点击提交，即可查看请求参数：<br />  <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>
运行效果如下图所示：
🚒默认索引值 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>
1056
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
