Kendo UI for jQuery最新版工具下載

自定義編輯器便于用戶輸入正確的值。

例如，自定義編輯器允許用戶通過(guò)從日歷中選擇日期替代在單元格中輸入日期，此功能是通過(guò)使用日期標(biāo)準(zhǔn)應(yīng)用數(shù)據(jù)驗(yàn)證并選擇顯示按鈕來(lái)顯示日歷復(fù)選框?qū)崿F(xiàn)的。另一個(gè)內(nèi)置編輯器用于列表驗(yàn)證標(biāo)準(zhǔn)，它顯示一個(gè)顯示允許值的彈出窗口。

要定義自定義編輯器，請(qǐng)使用 kendo.spreadsheet.registerEditor(name, editor)。 該名稱是您選擇的 ID，稍后將使用它來(lái)選擇范圍上的此特定編輯器。 編輯器可以是一個(gè)對(duì)象或一個(gè)函數(shù)，作為一個(gè)對(duì)象，它當(dāng)前應(yīng)該有一個(gè)edit方法和icon屬性，如下所述。

• range — 當(dāng)前被選為 Range 對(duì)象的單元格。
• rect — 帶有所選單元格在屏幕上的位置矩形，它具有top, left, width, height, right和bottom屬性，例如使用此選項(xiàng)可將編輯器定位在單元格附近。
• callback — 選擇值時(shí)編輯器調(diào)用的函數(shù)，它接收值和可選的第二個(gè)參數(shù)解析。當(dāng) parse 為 true 時(shí)，該值應(yīng)為字符串，然后將其解析為最終用戶通過(guò)內(nèi)聯(lián)編輯器輸入的內(nèi)容。 使用此選項(xiàng)可返回公式，例如 — callback("=sum(a1:a5)", true)。

icon 屬性是一個(gè)字符串，其中包含要應(yīng)用于下拉按鈕的 CSS 類名稱。

當(dāng)編輯器是一個(gè)函數(shù)時(shí)，它會(huì)在帶有這個(gè)編輯器的單元格顯示時(shí)第一次被調(diào)用。 它返回一個(gè)對(duì)象，如前一種情況——具有edit方法和icon屬性，結(jié)果被緩存，您可以使用這種方法將編輯器的初始化延遲到第一次需要時(shí)。

<div id="spreadsheet" style="width: 100%;"></div>
<script>
kendo.spreadsheet.registerEditor("color", function(){
var context, dlg, model;
// Further delay the initialization of the UI until the `edit` method is
// actually called, so here just return the object with the required API.
return {
edit: function(options) {
context = options;
open();
},
icon: "k-icon k-i-background"
};
// This function actually creates the UI if not already there, and
// caches the dialog and the model.
function create() {
if (!dlg) {
model = kendo.observable({
value: "#000000",
ok: function() {
// This is the result when OK is clicked.
// Invoke the callback with the value.
context.callback(model.value);
dlg.close();
},
cancel: function() {
dlg.close();
}
});
var el = $("<div data-visible='true' data-role='window' data-modal='true' data-resizable='false' data-title='Select color'>" +
" <div data-role='flatcolorpicker' data-bind='value: value'></div>" +
" <div style='margin-top: 1em; text-align: right'>" +
" <button style='width: 5em' class='k-button' data-bind='click: ok'>OK</button>" +
" <button style='width: 5em' class='k-button' data-bind='click: cancel'>Cancel</button>" +
" </div>" +
"</div>");
kendo.bind(el, model);

// Cache the dialog.
dlg = el.getKendoWindow();
}
}
function open() {
create();
dlg.open();
dlg.center();
// If the selected cell already contains some value, reflect
// it in the custom editor.
var value = context.range.value();
if (value != null) {
model.set("value", value);
}
}
});

$(function() {
$("#spreadsheet").kendoSpreadsheet({
sheetsbar: false,
excel: {
// Required to enable Excel Export in some browsers.
proxyURL: "http://demos.telerik.com/kendo-ui/service/export"
},
sheets: [{
rows: [{
cells: [
{ value: "Select color:", bold: true },
{ background: "#fef0cd",
editor: "color" }
]
}]
}]
});
});
</script>

定義編輯器后，您可以通過(guò) API 將其應(yīng)用到任何單元格。

var sheet = spreadsheet.activeSheet();
sheet.range("A5").editor("color");

結(jié)果當(dāng)用戶選擇 A5 時(shí)，單元格旁邊會(huì)顯示一個(gè)顯示圖標(biāo)的按鈕。 單擊時(shí)，自定義顏色選擇器會(huì)彈出并允許用戶選擇顏色。

edit方法提供了完全的靈活性，例如您可以使用 Popup 小部件。如果您知道不會(huì)同時(shí)顯示兩個(gè)實(shí)例，請(qǐng)?jiān)诿?次調(diào)用編輯時(shí)緩存 UI 或創(chuàng)建一個(gè)新實(shí)例。 請(qǐng)注意，上面的示例是指模態(tài)對(duì)話框。

Kendo UI for jQuery | 下載試用

Kendo UI for jQuery是完整的jQuery UI組件庫(kù)，可快速構(gòu)建出色的高性能響應(yīng)式Web應(yīng)用程序。Kendo UI for jQuery提供在短時(shí)間內(nèi)構(gòu)建現(xiàn)在Web應(yīng)用程序所需要的一切，從多個(gè)UI組件中選擇，并輕松地將它們組合起來(lái)，創(chuàng)建出酷炫響應(yīng)式的應(yīng)用程序，同時(shí)將開(kāi)發(fā)時(shí)間加快了50%。