文章目錄
- 前言
- 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>