To create a hyperlink cell, use the following code:
You can use the text 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 linkToolTip method. The following code uses these methods:
Easily distinguish between visited and unclicked links by setting two different hyperlink colors for before and after clicking the hyperlink:
After setting a hyperlink in a cell, you can control the text indent of the hyperlink by setting its textIndent property.
Use the onClickAction method to set a callback to the hyperlink. Once you click on the link, the callback will be executed.
Use the activeOnClick method to get and set whether to move to the active cell when clicked.
More options for hyperlink cellType:
After you set a hyperlink to a cell, you can set the value of the wordWrap property, which indicates whether to wrap the hyperlink.
You can control the horizontal alignment of the hyperlink — which includes Left, Center, and Right — with the following code:
You can control the vertical alignment of the hyperlink — which includes Top, Center, and Bottom — with the following code:
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://developer.mescius.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/@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="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;
}
