Custom Command

SpreadJS hyperlinks can be customized with different behavior that the developer can create custom JavaScript code for. In this example, the hyperlink just zooms in on the current worksheet.

You can customize the command to specify the behavior when a hyperlink is clicked. For example: You can also pass your function to hyperlink:
window.onload = initFunction; function initFunction() { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 1}); var sheet = spread.getActiveSheet(); spread.suspendPaint(); sheet.fromJSON(commandJsonData); sheet.setHyperlink(0, 5, { command: 'openMonthPicker'}); sheet.setHyperlink(1, 5, { command: 'openMonthPicker'}); sheet.setHyperlink(2, 5, { command: 'openMonthPicker'}); sheet.setHyperlink(3, 5, { command: 'openMonthPicker'}); sheet.setHyperlink(4, 5, { command: 'openMonthPicker'}); sheet.setHyperlink(5, 5, { command: 'openMonthPicker'}); sheet.setHyperlink(6, 5, { command: 'openMonthPicker'}); sheet.setHyperlink(7, 5, { command: 'openMonthPicker'}); sheet.setHyperlink(8, 5, { command: 'openMonthPicker'}); sheet.setHyperlink(9, 5, { command: 'openMonthPicker'}); sheet.setHyperlink(11, 0, { command: function (sheet) { if (sheet.zoom() === 1) { sheet.zoom(1.2); } else { sheet.zoom(1); } }}); spread.resumePaint(); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/data/hyperlink-data.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" class="sample-spreadsheets"></div> </div></body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: 100%; height: 100%; overflow: hidden; float: left; } .options-container { float: right; padding: 12px; height: 100%; width: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; padding: 5px; } input { display:block; width: 100%; margin: 8px 0; box-sizing: border-box; } label, input { padding: 4px 6px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #drawUnderline { display: inline-block; width: 30px; } #drawUnderlineLabel { display: inline-block; } #allowAutoCreateHyperlink { display: inline-block; width: 30px; }