Hyperlink

The HyperLink CellType represents the hyperlink cell. You can add these types of cells to provide links to websites that users can click on to navigate to, which you can use in forms and other types of applications.

<p>To create a hyperlink cell, use the following code:</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> h = <span class="hljs-keyword">new</span> GC.Spread.Sheets.CellTypes.HyperLink(); sheet.setCellType(<span class="hljs-number">3</span>, <span class="hljs-number">2</span>, h, GC.Spread.Sheets.SheetArea.viewport); </code></pre> <p>You can use the <strong>text</strong> method to get and set the text string for the hyperlink. You can also set the tooltip that appears when the mouse pointer is over the hyperlink using the <strong>linkToolTip</strong> method. The following code uses these methods:</p> <pre><code class="hljs js language-js"> h.text(<span class="hljs-string">'SpreadJS Site'</span>); h.linkToolTip(<span class="hljs-string">'This is the link to SpreadJS site'</span>); </code></pre> <p>Easily distinguish between visited and unclicked links by setting two different hyperlink colors for before and after clicking the hyperlink:</p> <pre><code class="hljs js language-js"> h.linkColor(<span class="hljs-string">'red'</span>); h.visitedLinkColor(<span class="hljs-string">'blue'</span>); </code></pre> <p>After setting a hyperlink in a cell, you can control the text indent of the hyperlink by setting its <strong>textIndent</strong> property.</p> <pre><code class="hljs js language-js"> sheet.getCell(<span class="hljs-number">3</span>, <span class="hljs-number">2</span>).textIndent(<span class="hljs-number">3</span>); </code></pre> <p>Use the <strong>onClickAction</strong> method to set a callback to the hyperlink. Once you click on the link, the callback will be executed.</p> <pre><code class="hljs js language-js"> spread.commandManager().register(<span class="hljs-string">'setSheetTabStyle'</span>, { <span class="hljs-attr">canUndo</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">execute</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">context, options, isUndo</span>) </span>{ sheet.name(<span class="hljs-string">'Hyperlink'</span>); sheet.options.sheetTabColor = <span class="hljs-string">'red'</span>; } }, <span class="hljs-literal">null</span>, <span class="hljs-literal">false</span>, <span class="hljs-literal">false</span>, <span class="hljs-literal">false</span>, <span class="hljs-literal">false</span>); h.onClickAction(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ spread.commandManager().execute({<span class="hljs-attr">cmd</span>: <span class="hljs-string">'setSheetTabStyle'</span>}); }); </code></pre> <p>Use the <strong>activeOnClick</strong> method to get and set whether to move to the active cell when clicked.</p> <pre><code class="hljs js language-js"> h.activeOnClick(<span class="hljs-literal">true</span>); </code></pre> <p>More options for hyperlink celltype:</p> <p>After you set a hyperlink to a cell, you can set the value of the <strong>wordWrap</strong> property, which indicates whether to wrap the hyperlink.</p> <pre><code class="hljs js language-js"> sheet.getCell(<span class="hljs-number">3</span>, <span class="hljs-number">2</span>).wordWrap(<span class="hljs-literal">true</span>); <span class="hljs-comment">// default value of wordWrap is 'false.'</span> </code></pre> <p>You can control the <strong>horizontal alignment</strong> of the hyperlink — which includes Left, Center, and Right — with the following code:</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> hAlign = GC.Spread.Sheets.HorizontalAlign.right; sheet.getCell(<span class="hljs-number">3</span>, <span class="hljs-number">2</span>).hAlign(hAlign); </code></pre> <p>You can control the <strong>vertical alignment</strong> of the hyperlink — which includes Top, Center, and Bottom — with the following code:</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> vAlign = GC.Spread.Sheets.VerticalAlign.bottom; sheet.getCell(<span class="hljs-number">3</span>, <span class="hljs-number">2</span>).vAlign(vAlign); </code></pre>
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.getActiveSheet(); sheet.bind(spreadNS.Events.SelectionChanged, function () { propertyChange(sheet, false); }); sheet.suspendPaint(); sheet.setColumnWidth(2, 130); sheet.setColumnWidth(1, 120); sheet.setRowHeight(1, 50); //set a hyperlink CellType to a cell var h1 = new spreadNS.CellTypes.HyperLink(); h1.text("SpreadJS Overview"); sheet.setCellType(1, 2, h1, spreadNS.SheetArea.viewport); sheet.getCell(1, 2, spreadNS.SheetArea.viewport).value("http://www.grapecity.com/en/spreadjs/").hAlign(spreadNS.HorizontalAlign.left); sheet.setValue(1, 1, "basic hyperlink:"); var h2 = new GC.Spread.Sheets.CellTypes.HyperLink(); //set callback to h2 var h = setCellTypeCallback(spread, sheet, h2); sheet.setCellType(3, 2, h); sheet.getCell(3, 1, GC.Spread.Sheets.SheetArea.viewport).value("hyperLink callback:").hAlign(GC.Spread.Sheets.HorizontalAlign.left); sheet.resumePaint(); spread.commandManager().register("setSheetTabStyle", { canUndo: true, execute: function (context, options, isUndo) { sheet.name("Hyperlink"); sheet.options.sheetTabColor = "red"; } }, null, false, false, false, false); _getElementById("changeProperty").addEventListener('click',function () { propertyChange(sheet, true); }); } function propertyChange(sheet, isSet) { var sels = sheet.getSelections(); if (sels && sels.length > 0) { var sel = getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount()); var hyperLinkCellType = sheet.getCellType(sel.row, sel.col); if (!(hyperLinkCellType instanceof spreadNS.CellTypes.HyperLink)) { _getElementById("changeProperty").setAttribute("disabled", "disabled"); return; } if (!isSet) { _getElementById("changeProperty").removeAttribute("disabled"); _getElementById("txtHyperLinkCellLinkColor").value=hyperLinkCellType.linkColor(); _getElementById("txtHyperLinkCellVisitedLinkColor").value=hyperLinkCellType.visitedLinkColor(); _getElementById("txtHyperLinkCellText").value=hyperLinkCellType.text(); _getElementById("txtHyperLinkCellToolTip").value=hyperLinkCellType.linkToolTip(); } else { hyperLinkCellType.linkColor(_getElementById("txtHyperLinkCellLinkColor").value); hyperLinkCellType.visitedLinkColor(_getElementById("txtHyperLinkCellVisitedLinkColor").value); hyperLinkCellType.text(_getElementById("txtHyperLinkCellText").value); hyperLinkCellType.linkToolTip(_getElementById("txtHyperLinkCellToolTip").value); } } sheet.repaint(); } function getActualRange(range, maxRowCount, maxColCount) { var row = range.row < 0 ? 0 : range.row; var col = range.col < 0 ? 0 : range.col; var rowCount = range.rowCount < 0 ? maxRowCount : range.rowCount; var colCount = range.colCount < 0 ? maxColCount : range.colCount; return new spreadNS.Range(row, col, rowCount, colCount); } function setCellTypeCallback(spread, sheet, h) { h.text("set sheet tab style"); h.linkToolTip("set sheet tab style and sheet name"); h.activeOnClick(true); h.onClickAction(function () { spread.commandManager().execute({cmd: "setSheetTabStyle"}); }); return h; } function _getElementById(id){ return document.getElementById(id); }
<!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/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/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/js/jquery-1.8.2.min.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 class="options-container"> <div class="option-row"> <label>linkColor:</label> <input id="txtHyperLinkCellLinkColor" /> </div> <div class="option-row"> <label>visitedLinkColor:</label> <input id="txtHyperLinkCellVisitedLinkColor" /> </div> <div class="option-row"> <label>text:</label> <input id="txtHyperLinkCellText" /> </div> <div class="option-row"> <label>linkToolTip:</label> <input id="txtHyperLinkCellToolTip" /> </div> <div class="option-row"> <input type="button" id="changeProperty" value="Update"/> </div> </div> </div></body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { padding-bottom: 12px; } label { padding-bottom: 6px; display: block; } input, select { width: 100%; padding: 4px 8px; box-sizing: border-box; } input[type=checkbox] { width: auto; } input[type=checkbox]+label { display: inline-block; width: auto; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }