• range — 当前被选为 Range 对象的单元格。

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

<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>
var sheet = spreadsheet.activeSheet();sheet.range("A5").editor("color");

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

Kendo UI for jQuery | 下载试用

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


高端UI界面开发
标签:

声明:本站部分文章及图片源自用户投稿,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

上一篇 2021年7月1日
下一篇 2021年7月1日

相关推荐

发表回复

登录后才能评论