单元格按钮

单元格按钮是一组多个预定义按钮,可以嵌入到单元中并可以运行各种命令。

SpreadJS现在在单元格中具有按钮功能。 这些预定义的按钮将使您可以向工作簿添加更多功能。 使用命令选项,开发人员可以为用户单击按钮时执行的特定行为编写代码。 例如:
var spreadNS = GC.Spread.Sheets; window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); initSpread(spread); }; function initSpread(spread) { var sheet = spread.getSheet(0); sheet.suspendPaint(); sheet.setColumnWidth(0, 180); sheet.setColumnWidth(1, 240); var style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "Insert" }, { caption: "Delete" } ]; sheet.setText(0, 0, "caption"); sheet.setStyle(0, 1, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "right", position: GC.Spread.Sheets.ButtonPosition.right }, { caption: "left", position: GC.Spread.Sheets.ButtonPosition.left } ]; sheet.setText(1, 0, "position"); sheet.setStyle(1, 1, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "Insert", useButtonStyle: true }, { caption: "Delete", useButtonStyle: true }, { caption: "Update", useButtonStyle: false } ]; sheet.setText(2, 0, "useButtonStyle"); sheet.setStyle(2, 1, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "enable", useButtonStyle: true, enabled: true }, { caption: "enable", useButtonStyle: false, enabled: true }, { caption: "disable", useButtonStyle: true, enabled: false }, { caption: "disable", useButtonStyle: false, enabled: false } ]; sheet.setText(3, 0, "enabled"); sheet.setStyle(3, 1, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { width: 12, useButtonStyle: true }, { width: 24, useButtonStyle: true }, { width: 36, useButtonStyle: true } ]; sheet.setText(4, 0, "width"); sheet.setStyle(4, 1, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { useButtonStyle: true, imageType: GC.Spread.Sheets.ButtonImageType.right }, { useButtonStyle: true, imageType: GC.Spread.Sheets.ButtonImageType.search }, { useButtonStyle: true, imageType: GC.Spread.Sheets.ButtonImageType.custom, imageSrc: "data:image/bmp;base64,Qk1eAAAAAAAAAD4AAAAoAAAACAAAAAgAAAABAAEAAAAAACAAAADEDgAAxA4AAAAAAAAAAAAAAAAAAP///wB+AAAApQAAANsAAAClAAAApQAAANsAAAClAAAAfgAAAA==" } ]; sheet.setText(5, 0, "imageType & imageSrc"); sheet.setStyle(5, 1, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { useButtonStyle: true, imageSize: { height: 12, width: 12 }, imageType: GC.Spread.Sheets.ButtonImageType.right }, { useButtonStyle: true, imageSize: { height: 18, width: 18 }, imageType: GC.Spread.Sheets.ButtonImageType.search }, { useButtonStyle: true, imageType: GC.Spread.Sheets.ButtonImageType.custom, imageSize: { height: 8, width: 8 }, imageSrc: "data:image/bmp;base64,Qk1eAAAAAAAAAD4AAAAoAAAACAAAAAgAAAABAAEAAAAAACAAAADEDgAAxA4AAAAAAAAAAAAAAAAAAP///wB+AAAApQAAANsAAAClAAAApQAAANsAAAClAAAAfgAAAA==" } ]; sheet.setText(6, 0, "image size"); sheet.setStyle(6, 1, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { useButtonStyle: true, caption: "search", captionAlign: GC.Spread.Sheets.CaptionAlignment.right, imageType: GC.Spread.Sheets.ButtonImageType.search }, { useButtonStyle: true, caption: "search", captionAlign: GC.Spread.Sheets.CaptionAlignment.left, imageType: GC.Spread.Sheets.ButtonImageType.search } ]; sheet.setText(7, 0, "caption align"); sheet.setStyle(7, 1, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "always", useButtonStyle: true }, { caption: "onselect", useButtonStyle: true, visibility: GC.Spread.Sheets.ButtonVisibility.onSelected }, { caption: "onedit", useButtonStyle: true, visibility: GC.Spread.Sheets.ButtonVisibility.onEditing } ]; sheet.setText(8, 0, "visibility"); sheet.setStyle(8, 1, style); style = new GC.Spread.Sheets.Style(); style.cellButtons= [{ caption: 'Left', useButtonStyle: true, hoverBackColor: "#3390FF" }, { caption: 'onSelected', useButtonStyle: true, visibility: GC.Spread.Sheets.ButtonVisibility.onSelected, hoverBackColor: "#3390FF" }, { caption: 'enabled', useButtonStyle: true, enabled: false, hoverBackColor: "#3390FF" }, { caption: 'Right', useButtonStyle: false, hoverBackColor: "#3390FF" } ]; sheet.setText(9, 0, "hoverBackColor"); sheet.setStyle(9, 1, style); style = new GC.Spread.Sheets.Style(); style.cellButtons= [{ caption: 'Left', useButtonStyle: true, hoverBackColor: "red", buttonBackColor: "#1E90FF" }, { caption: 'enabled', useButtonStyle: true, enabled: false, hoverBackColor: "#3390FF", buttonBackColor: "#DA70D6" }, { caption: 'Right', useButtonStyle: false, hoverBackColor: "yellow", buttonBackColor: "#4169E1" } ]; sheet.setText(10, 0, "buttonBackColor"); sheet.setStyle(10, 1, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { imageType: GC.Spread.Sheets.ButtonImageType.dropdown, command: "openColorPicker" }, { imageType: GC.Spread.Sheets.ButtonImageType.search, command: (sheet, row, col, option) => { if (sheet.zoom() === 1) { sheet.zoom(1.5); } else { sheet.zoom(1); } } } ]; sheet.setText(11, 0, "command"); sheet.setStyle(11, 1, style); sheet.resumePaint(); };
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta name="spreadjs culture" content="zh-cn" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" style="width:100%; height: 100%"></div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }