概述
本 Demo 展示了如何创建超链接单元格类型，并配置其显示文本、链接颜色、提示信息等属性。Demo 中演示了两种超链接的使用方式：基础超链接（跳转到网站）和带回调函数的超链接（执行自定义命令），同时还提供了属性面板让用户动态修改超链接样式。
实现思路
创建第一个基础超链接单元格，设置跳转 URL 和显示文本
创建第二个带回调函数的超链接单元格，点击时修改工作表名称和标签颜色
注册自定义命令到命令管理器，供超链接回调执行
绑定选择改变事件，当用户选中超链接单元格时更新属性面板
提供属性修改功能，允许用户动态调整链接颜色、文本和提示信息
代码解析
创建基础超链接单元格
这段代码创建了一个基础超链接单元格。使用 new GC.Spread.Sheets.CellTypes.HyperLink() 创建超链接类型实例，text() 方法设置显示的文本内容，setCellType() 方法将单元格类型应用到指定单元格，value() 方法设置跳转的目标 URL。
创建带回调函数的超链接
这段代码展示了如何为超链接设置点击回调。onClickAction() 方法接收一个函数作为参数，当用户点击超链接时执行。activeOnClick(true) 确保点击时将单元格设置为活动单元格。回调函数通过命令管理器执行预注册的命令。
注册自定义命令
这段代码注册了一个名为 setSheetTabStyle 的自定义命令。execute 函数定义了命令的实际执行逻辑：修改工作表名称为 "Hyperlink"，并设置标签颜色为红色。
动态修改超链接属性
通过这些方法可以动态修改超链接的外观和行为。linkColor() 设置未访问链接的颜色，visitedLinkColor() 设置已访问链接的颜色，linkToolTip() 设置鼠标悬停时的提示信息。
运行效果
点击 "SpreadJS Overview" 超链接，浏览器会在新标签页打开 SpreadJS 官方网站
点击 "set sheet tab style" 超链接，工作表名称变为 "Hyperlink"，标签颜色变为红色
选中任一超链接单元格后，右侧面板会显示该超链接的当前属性值
在右侧面板中修改属性值并点击"更新"按钮，可以实时改变超链接的颜色、文本和提示信息
API 参考
HyperLink 单元格类型
创建超链接单元格类型实例。
主要方法
text(value) - 设置或获取超链接显示的文本
linkColor(color) - 设置或获取未访问链接的颜色，默认为 #0066cc
visitedLinkColor(color) - 设置或获取已访问链接的颜色，默认为 #3399ff
linkToolTip(tooltip) - 设置或获取鼠标悬停时的提示信息
onClickAction(callback) - 设置或获取点击超链接时的回调函数
activeOnClick(value) - 设置或获取点击时是否激活单元格，布尔值
应用单元格类型
row、col - 单元格位置
hyperlink - HyperLink 实例
sheetArea - 可选，指定工作表区域，默认为 viewport
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>链接颜色:</label>
<input id="txtHyperLinkCellLinkColor" />
</div>
<div class="option-row">
<label>已访问链接颜色:</label>
<input id="txtHyperLinkCellVisitedLinkColor" />
</div>
<div class="option-row">
<label>文本:</label>
<input id="txtHyperLinkCellText" />
</div>
<div class="option-row">
<label>链接工具提示:</label>
<input id="txtHyperLinkCellToolTip" />
</div>
<div class="option-row">
<input type="button" id="changeProperty" value="更新" />
</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;
}
