Kendo UI for jQuery数据管理使用教程:Spreadsheet - 自定义单元格编辑器

翻译|使用教程|编辑:龚雪|2021-08-02 09:54:22.620|阅读 31 次

概述:Kendo UI for jQuery中的Spreadsheet控件支持自定义单元格,本文将为大家介绍这个自定义单元格的编辑器及其使用。

# 31款JAVA开发必备控件和工具 # 企业数字化建设合规无风险[专题]

相关链接:

Kendo UI for jQuery最新版工具下载

自定义编辑器便于用户输入正确的值。

例如,自定义编辑器允许用户通过从日历中选择日期替代在单元格中输入日期,此功能是通过使用日期标准应用数据验证并选择显示按钮来显示日历复选框实现的。另一个内置编辑器用于列表验证标准,它显示一个显示允许值的弹出窗口。

要定义自定义编辑器,请使用 kendo.spreadsheet.registerEditor(name, editor)。 该名称是您选择的 ID,稍后将使用它来选择范围上的此特定编辑器。 编辑器可以是一个对象或一个函数,作为一个对象,它当前应该有一个edit方法和icon属性,如下所述。

  • range — 当前被选为 Range 对象的单元格。
  • rect — 带有所选单元格在屏幕上的位置矩形,它具有top, left, width, height, right和bottom属性,例如使用此选项可将编辑器定位在单元格附近。
  • callback — 选择值时编辑器调用的函数,它接收值和可选的第二个参数解析。当 parse 为 true 时,该值应为字符串,然后将其解析为最终用户通过内联编辑器输入的内容。 使用此选项可返回公式,例如 — callback("=sum(a1:a5)", true)。

icon 属性是一个字符串,其中包含要应用于下拉按钮的 CSS 类名称。

当编辑器是一个函数时,它会在带有这个编辑器的单元格显示时第一次被调用。 它返回一个对象,如前一种情况——具有edit方法和icon属性,结果被缓存,您可以使用这种方法将编辑器的初始化延迟到第一次需要时。

<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: "//demos.telerik.com/kendo-ui/service/export"
},
sheets: [{
rows: [{
cells: [
{ value: "Select color:", bold: true },
{ background: "#fef0cd",
editor: "color" }
]
}]
}]
});
});
</script>

定义编辑器后,您可以通过 API 将其应用到任何单元格。

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

结果当用户选择 A5 时,单元格旁边会显示一个显示图标的按钮。 单击时,自定义颜色选择器会弹出并允许用户选择颜色。

edit方法提供了完全的灵活性,例如您可以使用 Popup 小部件。如果您知道不会同时显示两个实例,请在每次调用编辑时缓存 UI 或创建一个新实例。 请注意,上面的示例是指模态对话框。

Kendo UI for jQuery | 下载试用

Kendo UI for jQuery是完整的jQuery UI组件库,可快速构建出色的高性能响应式Web应用程序。Kendo UI for jQuery提供在短时间内构建现在Web应用程序所需要的一切,从多个UI组件中选择,并轻松地将它们组合起来,创建出酷炫响应式的应用程序,同时将开发时间加快了50%。


了解最新Kendo UI最新资讯,请关注Telerik中文网!

慧都高端UI界面开发

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至hey@evget.com

文章转载自:慧都网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关产品
Kendo UI

全新升级的Kendo UI,是创建数据丰富的Web应用程序的最完整UI库。

Kendo UI for jQuery

完整的jQuery UI组件库,可快速构建出色的高性能响应式Web应用程序。

Kendo UI for Angular

完整的Angular UI组件库,助力构建高性能的现代Angular应用。

title
在线咨询
联系我们
TOP
在线客服系统
live chat