要创建一个超链接类型的单元格，请参照以下代码：
你可以通过 text 方法来获取或设置超链接的文本。你也可以设置当鼠标悬停在超链接上时显示的提示信息。具体请参照如下代码：
你可以给超链接设置上不同的颜色来方便用户区分哪些链接是他访问过的。请参照如下代码：
在添加了一个超链接类型的单元格之后，你还可以通过 textIndent 来设置它的文本缩进
通过 onClickAction 方法来为超链接设置一个回调函数。当点击这个超链接之后，这个回调函数就会被执行。
通过 activeOnClick 方法来获取或设置，是否在点击超链接时将这个单元格设置为当前的活动单元格
超链接类型的单元格的其它配置项：
在添加一个超链接单元格之后，你可以通过 wordWrap 来标识是否要对其应用自动换行
你可以控制超链接单元格的水平对齐方式 Horizontal Alignment。水平方向上的对齐方式有三种：left, center and right.
你可以控制超链接单元格的垂直对齐方式 Vertical Alignment。垂直方向上的对齐方式有三种：：top, center and bottom.
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("https://www.grapecity.com.cn/developer/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 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" 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;
}
