原創|使用教程|編輯:我只采一朵|2014-08-15 09:53:42.000|閱讀 8593 次
概述:上篇跟大家介紹了kendo.ui.ComboBox的ComboBox的Configuration。接下來介紹它的Fields和Method的上半部分。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
上篇跟大家介紹了kendo.ui.ComboBox的ComboBox的Configuration。接下來介紹它的Fields和Method的上半部分。
dataSource kendo.data.DataSource
組件的數據源。通過dataSource選項進行配置。
數據源發生的變化會顯示在組件上.
重要提示:部署新的數據源不會有任何影響,可以使用setDataSource方法代替。
示例-添加一個數據項到數據源中
<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>
input jQuery
用戶輸入的jQuery對象。
示例-獲取輸入元素
<input id="combobox" />
<script>
$("#combobox").kendoComboBox();
var combobox = $("#combobox").data("kendoComboBox");
var input = combobox.input;
<script>
options Object
保存了組件的所有選項。
示例-獲取組件的選項
<input id="combobox" />
<script>
$("#combobox").kendoComboBox();
var combobox = $("#combobox").data("kendoComboBox");
var options = combobox.options;
<script>
list jQuery
下拉列表項的jQuery對象。
示例-獲取列表元素
<input id="combobox" />
<script>
$("#combobox").kendoComboBox();
var combobox = $("#combobox").data("kendoComboBox");
var list = combobox.list;
<script>
ul jQuery
ul元素的jQuery對象,用于處理可用的選項。
示例-獲取ul元素
<input id="combobox" />
<script>
$("#combobox").kendoComboBox();
var combobox = $("#combobox").data("kendoComboBox");
var ul = combobox.ul;
<script>
close
關閉組件的彈出菜單。
示例-關閉建議彈出菜單
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
dataSource: [ "Apples", "Oranges" ]
});
var combobox = $("#combobox").data("kendoComboBox");
// Search for items starting with "A" - will open the suggestion popup and show "Apples"
combobox.search("A");
// Close the suggestion popup
combobox.close();
</script>
dataItem
返回指定索引的數據項。如果未指定索引,如果沒有指定索引,將使用選中的索引。
Parameters
index Number (optional)
數據記錄從0開始的索引。
Returns
Object 原始數據記錄。如果沒有數據返回undefined。
示例
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
dataValueField: "id",
index: 1
});
var combobox = $("#combobox").data("kendoComboBox");
// get the dataItem corresponding to the selectedIndex.
var dataItem = combobox.dataItem();
// get the dataItem corresponding to the passed index.
var dataItem = combobox.dataItem(0);
</script>
destroy
分離所有事件處理器并刪除jQuery.data屬性,以避免內存泄露。
重要提示:這個方法不會刪除DOM中的ComboBox元素。
示例
<input id="combobox" />
<script>
$("#combobox").kendoComboBox();
var combobox = $("#combobox").data("kendoComboBox");
combobox.destroy();
</script>
enable
啟用或禁用組件。
Parameters
enable Boolean
如果設置為true,組件會被啟用,反正則被禁用。
示例-啟用組件
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
enable: false
});
var combobox = $("#combobox").data("kendoComboBox");
combobox.enable(true);
</script>
readonly
切換組件的只讀狀態。當組件為只讀狀態時不允許用戶輸入。
注意:只讀模式和禁用之間有一個區別。禁用組件的值不會作為菜單的一部分,而只讀會作為菜單的一部分值。
Parameters
readonly Boolean
如果設置為true,組件不允許用戶輸入。如果設置為false,組件允許用戶輸入。
示例-設置組件為只讀模式
<input id="combobox" />
<script>
$("#combobox").kendoComboBox();
var combobox = $("#combobox").data("kendoComboBox");
combobox.readonly(true);
</script>
focus
聚焦組件
示例-
<input id="combobox" />
<script>
$("#combobox").kendoComboBox();
var combobox = $("#combobox").data("kendoComboBox");
combobox.focus();
</script>
open
打開彈出菜單。
示例-
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
dataValueField: "id",
index: 1
});
var combobox = $("#combobox").data("kendoComboBox");
combobox.focus();
</script>
refresh
通過重新渲染所有的項目刷新彈出菜單。
示例-刷新項目
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
dataValueField: "id",
index: 1
});
var combobox = $("#combobox").data("kendoComboBox");
combobox.refresh();
</script>
search
根據提供的值搜索數據源并顯示匹配的建議。
Parameters
word String
過濾值。
示例-搜索組件
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
dataValueField: "id",
index: 1
});
var combobox = $("#combobox").data("kendoComboBox");
combobox.search("App");
</script>
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自:慧都控件