原創|使用教程|編輯:我只采一朵|2014-06-30 10:53:26.000|閱讀 6767 次
概述:本節為大家介紹kendo.ui.ComboBox,分為上下兩篇,上篇先介紹ComboBox的Configuration。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
本節為大家介紹kendo.ui.ComboBox,分為上下兩篇,上篇先介紹ComboBox的Configuration。
animation Object
設置建議彈出窗口的打開和關閉動畫。將animation選項設置為false時,會禁用打開和關閉動畫。
示例-禁用打開和關閉動畫
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
animation: false
});
</script>
示例-設置動畫
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
animation: {
close: {
effects: "fadeOut zoom:out",
duration: 300
},
open: {
effects: "fadeIn zoom:in",
duration: 300
}
}
});
</script>
animation.close Object
示例-設置關閉動畫
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
animation: {
close: {
effects: "zoom:out",
duration: 300
}
}
});
</script>
animation.close.effects String
顯示關閉動畫時的效果,多個效果之間應該由空格隔開。
animation.close.duration Number (default: 100)
關閉動畫的持續時間以毫秒計算。
animation.open Object
建議窗口打開時的動畫
示例-設置打開動畫
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
animation: {
open: {
effects: "zoom:in",
duration: 300
}
}
});
</script>
animation.open.effects String
顯示打開動畫時的效果。多個效果之間由空格隔開。
animation.open.duration Number (default: 200)
打開動畫的持續時間以毫秒計算
autoBind Boolean(default: true)
控制是否在初始化極端綁定組件給數據源
示例
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
autoBind: false
});
</script>
cascadeFrom String
使用這個字符創去設置父ComboBox組件的ID
示例
<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",
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>
cascadeFromField String
自定義篩選數據源的字段,如果沒有定義,父節點的dataValueField選項會被使用。
示例
<input id="parent" />
<input id="child" />
<script>
$("#parent").kendoComboBox({
dataTextField: "name",
dataValueField: "id",
dataSource: [
{ name: "Parent1", id: 1 },
{ name: "Parent2", id: 2 }
]
});
$("#child").kendoComboBox({
cascadeFrom: "parent",
cascadeFromField: "parentId",
dataTextField: "name",
dataValueField: "id",
dataSource: [
{ name: "Child1", id: 1, parentId: 1 },
{ name: "Child2", id: 2, parentId: 2 },
{ name: "Child3", id: 3, parentId: 1 },
{ name: "Child4", id: 4, parentId: 2 }
]
});
</script>
dataSource Object|Array|kendo.data.DataSource
組件的數據源用于顯示一串值。它可以是一個JavaScript對象,代表著一個有效的數據源配置、一個JavaScript數組或一個當前kendo.data.DataSource實體。
如果數據源選項設置為一個JavaScript對象或數組,組件會初始化一個新的kendo.data.DataSource實體。
如果數據源選項時當前的某個kendo.data.DataSource實體,組件會使用這個實體且不會再初始化。
示例-設置dataSource作為一個JavaScript對象
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
dataSource: {
data: ["One", "Two"]
}
});
</script>
示例 - 設置dataSource作為JavaScript數組
<input id="combobox" />
<script>
var data = ["One", "Two"];
$("#combobox").kendoComboBox({
dataSource: data
});
</script>
示例- 設置dataSource作為當前的kendo.data.DataSource實體
<input id="combobox" />
<script>
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "//demos.telerik.com/kendo-ui/service/products",
dataType: "jsonp"
}
}
});
$("#combobox").kendoComboBox({
dataSource: dataSource,
dataTextField: "ProductName",
dataValueField: "ProductID"
});
</script>
dataTextField String(default: "")
提供列表項文本內容的字段。組件會根據字段判斷數據源。
重要提示:當定義dataTextField 后,thedataValueField 選項也必須設置。
示例 - 設置dataTextField
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
dataSource: [
{ Name: "Parent1", Id: 1 },
{ Name: "Parent2", Id: 2 }
],
dataTextField: "Name",
dataValueField: "Id"
});
</script>
dataValueField String(default: "")
提供組件值的字段。
重要提示:當dataValueField定義后,thedataTextField選項也必須設置。
示例 - 設置dataValueField
<input id="combobox" />
<script>
$("#comboBox").kendoComboBox({
dataSource: [{
{ Name: "Parent1", Id: 1 },
{ Name: "Parent2", Id: 2 }
}]
dataTextField: "Name",
dataValueField: "Id"
});
</script>
delay Number(default: 200)
敲下鍵盤后彈出菜單顯示出來之間的延遲。
示例-設置延遲
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
delay: 500
});
</script>
enable Boolean(default: true)
如果設置為false,組件會被禁用,不允許用戶輸入。組件默認情況下是啟用的,運行用戶輸入。
示例-禁用組件
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
enable: false
});
</script>
filter String(default: "none")
這個過濾方法決定建議的當前值。
示例 - 設置過濾
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
filter: "contains"
});
</script>
height Number(default: 200)
建議窗口的高度單位是像素,默認是200px。
示例-設置高度
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
height: 500
});
</script>
highlightFirst Boolean(default: true)
如果設置為true,第一個建議會自動高亮顯示。
示例 -設置highlightFirst
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
highlightFirst: false
});
</script>
ignoreCase String(default: true)
如果設置為false,搜索時會區分字母大小寫。組件默認情況下會執行區分大小寫。
示例-禁用區分字母大小寫
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
ignoreCase: false
});
</script>
index Number(default: -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
});
</script>
minLength Number(default: 1)
搜索時用戶必須輸入的最小字符數。如果搜索能匹配的項目很多,將值設置為大于1的數。
示例-設置最小長度
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
minLength: 3
});
</script>
placeholder String(default: "")
當占位符為空時組件會顯示提示,默認情況下沒有設置。
示例-指定占位符選項
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
placeholder: "Select..."
});
</script>
示例-指定占位符作為HTML屬性
<input id="combobox" placeholder="Select..." />
<script>
$("#combobox").kendoComboBox({
dataSource: ["Item1", "Item2"]
});
</script>
suggest Boolean(default: false)
如果設置為true,組件會自動適應第一個建議。
示例-啟用自動建議
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
suggest: true
});
</script>
headerTemplate String|Function
指定一個靜態HTML內容,作為彈出元素的頭部。
重要提示:組件不會傳遞一個模塊數據給header模板,這個選項只能用靜態HTML。
示例 - 指定headerTemplate字符串
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
dataValueField: "id",
headerTemplate: '<div><h2>Fruits</h2></div>'
});
</script>
template String|Function
用于渲染項目的模板。默認情況下組件只顯示數據項的文本(通過dataTextField配置)。
示例-設定一個函數作為模板
<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>
text String(default: "")
當autoBind設置為false時,會運用的組件文本。
示例-指定組件文本
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
autoBind: false,
text: "Chai"
});
</script>
value String(default: "")
組件的值。
示例-設定組件的值
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
dataSource: ["Item1", "Item2"],
value: "Item1"
});
</script>
valuePrimitive Boolean(default: false)
當初始化模塊值為空時,設定綁定操作的值。如果設置為true,View-Model字段會更新為選中的項目字段值。如果設置為false,View-Model字段會更新為選中的項目。
示例-設定View-Model字段更新為選中的項目值
<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>
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自:慧都控件