单元格按钮

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

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.getRange(2, 0, 1, 10) .setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin) , { bottom: true }); sheet.getRange(5, 0, 1, 10) .setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin) , { bottom: true }); sheet.getRange(8, 0, 1, 10) .setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin) , { bottom: true }); sheet.getRange(11, 0, 1, 10) .setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin) , { bottom: true }); sheet.getRange(14, 0, 1, 10) .setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin) , { bottom: true }); sheet.getRange(0, 4, 15, 1) .setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin) , { right: true }); sheet.getRange(0, 9, 15, 1) .setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin) , { right: true }); for (var i = 0; i < 10; i++) { sheet.setColumnWidth(i, 100); } for (var i = 0; i < 30; i++) { sheet.setRowHeight(i, 25); i++; sheet.setRowHeight(i, 25); i++; } sheet.getCell(0, 0).value("基本按钮样式 (useButtonStyle)").font("bold 16px Calibri"); sheet.getCell(3, 0).value("按钮颜色 (buttonBackColor)").font("bold 16px Calibri"); sheet.getCell(6, 0).value("命令按钮 (command)").font("bold 16px Calibri"); sheet.getCell(9, 0).value("悬停按钮 (hoverBackColor)").font("bold 16px Calibri"); sheet.getCell(12, 0).value("按钮位置 (position)").font("bold 16px Calibri"); sheet.getCell(0, 5).value("按钮大小 (width)").font("bold 16px Calibri"); sheet.getCell(3, 5).value("图像标题 (imageType & imageSrc & imagesize)").font("bold 16px Calibri"); sheet.getCell(6, 5).value("按钮可见性 (visibility) - 选择单元格 G8 查看另一个按钮").font("bold 16px Calibri"); sheet.getCell(9, 5).value("禁用按钮 (enabled)").font("bold 16px Calibri"); sheet.getCell(12, 5).value("文本对齐 (CaptionAlignment)").font("bold 16px Calibri"); sheet.addSpan(7, 7, 1, 2); sheet.addSpan(7, 2, 1, 2); sheet.addSpan(4, 7, 1, 2); sheet.getCell(4, 7).value("搜索").vAlign(GC.Spread.Sheets.VerticalAlign.bottom); sheet.getCell(7, 7).value("选择单元格..").vAlign(GC.Spread.Sheets.VerticalAlign.bottom); sheet.getCell(7, 2).value("点击此处的按钮 ->").vAlign(GC.Spread.Sheets.VerticalAlign.bottom); sheet.getCell(7, 1).value("缩放!").vAlign(GC.Spread.Sheets.VerticalAlign.bottom); var style = new GC.Spread.Sheets.Style(); //basic styling style.cellButtons = [ { caption: "默认" } ]; sheet.setStyle(1, 0, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "基本样式", useButtonStyle: true } ]; sheet.setStyle(1, 1, style); //button colors style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "红色", buttonBackColor: "#F44336" } ]; sheet.setStyle(4, 0, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "绿色", buttonBackColor: "#82BC00", } ]; sheet.setStyle(4, 1, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "灰色", buttonBackColor: "#DDDDDD" } ]; sheet.setStyle(4, 2, style); //Command buttons style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { imageType: GC.Spread.Sheets.ButtonImageType.dropdown, command: "openColorPicker" } ]; sheet.setStyle(7, 0, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "缩放", buttonBackColor: "#DDDDDD", command: (sheet, row, col, option) => { if (sheet.zoom() === 1) { sheet.zoom(1.25); } else { sheet.zoom(1); } } } ]; sheet.setStyle(7, 1, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "提醒", buttonBackColor: "#00C2D6", command: (sheet, row, col, option) => { alert("这是一个提醒。"); } } ]; sheet.setStyle(7, 2, style); //hover buttons style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "蓝色", useButtonStyle: true, buttonBackColor: "#008CBA", hoverBackColor: "#FFFFFF" } ]; sheet.setStyle(10, 0, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "灰色", buttonBackColor: "#DDDDDD", hoverBackColor: "#FFFFFF" } ]; sheet.setStyle(10, 1, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "悬停蓝色", useButtonStyle: true, hoverBackColor: "#008CBA" } ]; sheet.setStyle(10, 2, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "悬停灰色", hoverBackColor: "#DDDDDD", } ]; sheet.setStyle(10, 3, style); //Position buttons style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "左侧", buttonBackColor: "#F7A711", position: GC.Spread.Sheets.ButtonPosition.left } ]; sheet.setStyle(13, 0, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "右侧", buttonBackColor: "#F7A711", position: GC.Spread.Sheets.ButtonPosition.right } ]; sheet.setStyle(13, 1, style); //button size style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "40px", width: 40, buttonBackColor: "#EEEEEE", useButtonStyle: true } ]; sheet.setStyle(1, 5, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "50px", width: 50, buttonBackColor: "#EEEEEE", useButtonStyle: true } ]; sheet.setStyle(1, 6, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "85px", width: 85, buttonBackColor: "#008CBA", useButtonStyle: true } ]; sheet.setStyle(1, 7, style); //Image buttons style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "箭头", buttonBackColor: "#DDDDDD", imageType: GC.Spread.Sheets.ButtonImageType.right } ]; sheet.setStyle(4, 5, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "自定义", buttonBackColor: "#F4F8EB", imageType: GC.Spread.Sheets.ButtonImageType.custom, imageSrc: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABPklEQVR4Ae2YAWYDQRSGV6BUabFQiKE28wA9Qo7Qo/QIBRTQGyQESlUWURRSVdZssL3B5gZJT/A6A8Eq8qck//I+foDxvjWzfi8zuhiGYRg6yZxOs3lMG6N7ZsI0/AYYnEoiCZT44EQSwNfnlEgDkKSNmacrDQuQZQNIUApoepeQAGHavguoCewyG6i+5apfN6q1HDm+0ZWM/yewHKbDTpswujtM4PUiHUAgIO1hAu/XHAIpjThc4NP1XKAWmuBX6PmMSeADFygviQT8Ey6wyHkEVv4eF1gOiQRkjAtUBY9A464wgdmAZ/gga7xKvJzT/4F20D/gIA+IAEGFAIpcgr5C1MUtLsBcIbpQV4jgv/fZzG15K4RM8dXiIud/wB0BF7OlqxDBl9CGOqaMWZ+8QlTFj1ajx7/qg2EYhmH8AtrSH2QJmV2LAAAAAElFTkSuQmCC" } ]; sheet.setStyle(4, 6, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { buttonBackColor: "#82BC00", width: 50, imageSize: { height: 30, width: 30 }, imageType: GC.Spread.Sheets.ButtonImageType.search } ]; sheet.setStyle(4, 7, style); //Visibility buttons style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "始终显示", buttonBackColor: "#ffdc9d" } ]; sheet.setStyle(7, 5, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "选中时显示", buttonBackColor: "#ffdc9d", visibility: GC.Spread.Sheets.ButtonVisibility.onSelected } ]; sheet.setStyle(7, 7, style); //disabled buttons style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "启用", useButtonStyle: true, enabled: true } ]; sheet.setStyle(10, 5, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "启用", enabled: true } ]; sheet.setStyle(10, 6, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "禁用", useButtonStyle: true, enabled: false } ]; sheet.setStyle(10, 7, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "禁用", enabled: false } ]; sheet.setStyle(10, 8, style); //Caption Aligment (captionaligment) style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { useButtonStyle: true, caption: "左对齐", captionAlign: GC.Spread.Sheets.CaptionAlignment.left, imageType: GC.Spread.Sheets.ButtonImageType.search } ]; sheet.setStyle(13, 5, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { useButtonStyle: true, caption: "右对齐", captionAlign: GC.Spread.Sheets.CaptionAlignment.right, imageType: GC.Spread.Sheets.ButtonImageType.search } ]; sheet.setStyle(13, 6, 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-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/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; }