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:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import './styles.css';
import { AppFunc } from './app-func';
// import { App } from './app-class';
// 1. Functional Component sample
ReactDOM.render(<AppFunc />, document.getElementById('app'));
// 2. Class Component sample
// ReactDOM.render(<App />, document.getElementById('app'));
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
const spreadNS = GC.Spread.Sheets;
let spread = null;
export function AppFunc() {
const [hyperLinkCellTypeOption, setHyperLinkCellTypeOption] = React.useState({
linkColor: '',
visitedLinkColor: '',
text: '',
linkToolTip: '',
editable: false,
disabled: false
});
const initSpread = (currSpread) => {
spread = currSpread;
const sheet = spread.getActiveSheet();
sheet.bind(spreadNS.Events.SelectionChanged, (e) => {
propertyChange(e);
});
sheet.suspendPaint();
sheet.setColumnWidth(2, 130);
sheet.setColumnWidth(1, 120);
sheet.setRowHeight(1, 50);
//set a hyperlink CellType to a cell
const 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:");
const h2 = new GC.Spread.Sheets.CellTypes.HyperLink();
//set callback to h2
const h = setCellTypeCallback(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: () => {
sheet.name("Hyperlink");
sheet.options.sheetTabColor = "red";
}
}, null, false, false, false, false);
}
const propertyChange = (e, settings) => {
const sheet = spread.getActiveSheet();
const sels = sheet.getSelections();
if (sels && sels.length > 0) {
const sel = getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount());
const hyperLinkCellType = sheet.getCellType(sel.row, sel.col);
if (!(hyperLinkCellType instanceof spreadNS.CellTypes.HyperLink)) {
setHyperLinkCellTypeOption({ ...hyperLinkCellTypeOption, disabled: true });
return;
}
if (!settings) {
setHyperLinkCellTypeOption({
...hyperLinkCellTypeOption,
disabled: false,
linkColor: hyperLinkCellType.linkColor(),
visitedLinkColor: hyperLinkCellType.visitedLinkColor(),
text: hyperLinkCellType.text(),
linkToolTip: hyperLinkCellType.linkToolTip()
});
} else {
hyperLinkCellType.linkColor(settings.linkColor);
hyperLinkCellType.visitedLinkColor(settings.visitedLinkColor);
hyperLinkCellType.text(settings.text);
hyperLinkCellType.linkToolTip(settings.linkToolTip);
}
}
sheet.repaint();
}
const getActualRange = (range, maxRowCount, maxColCount) => {
const row = range.row < 0 ? 0 : range.row;
const col = range.col < 0 ? 0 : range.col;
const rowCount = range.rowCount < 0 ? maxRowCount : range.rowCount;
const colCount = range.colCount < 0 ? maxColCount : range.colCount;
return new spreadNS.Range(row, col, rowCount, colCount);
}
const setCellTypeCallback = (h) => {
h.text("set sheet tab style");
h.linkToolTip("set sheet tab style and sheet name");
h.activeOnClick(true);
h.onClickAction(() => {
spread.commandManager().execute({cmd: "setSheetTabStyle"});
});
return h;
}
return (<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={initSpread}>
<Worksheet />
</SpreadSheets>
</div>
<Panel propertyChange={propertyChange} setting={hyperLinkCellTypeOption} />
</div>);
}
function Panel(props) {
const [setting, setSetting] = React.useState(props.setting);
React.useEffect(() => {
setSetting(props.setting);
}, [props.setting]);
return (
<div class="options-container">
<div class="option-row">
<label for="linkColor">Link Color:</label>
<input id="linkColor" type="text" value={setting.linkColor} onChange={(e) => { setSetting({ ...setting, linkColor: e.target.value }); }} />
</div>
<div class="option-row">
<label for="visitedLinkColor">Visited Link Color:</label>
<input id="visitedLinkColor" type="text" value={setting.visitedLinkColor} onChange={(e) => { setSetting({ ...setting, visitedLinkColor: e.target.value }); }} />
</div>
<div class="option-row">
<label for="text">Text:</label>
<input id="text" type="text" value={setting.text} onChange={(e) => { setSetting({ ...setting, text: e.target.value }); }} />
</div>
<div class="option-row">
<label for="linkToolTip">Link Tooltip:</label>
<input id="linkToolTip" type="text" value={setting.linkToolTip} onChange={(e) => { setSetting({ ...setting, linkToolTip: e.target.value }); }} />
</div>
<div class="option-row">
<input type="button" id="setProperty" value="Update" disabled={setting.disabled} onClick={(e) => {props.propertyChange(e, setting)} } />
</div>
</div>
);
}
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
const spreadNS = GC.Spread.Sheets;
const Component = React.Component;
export class App extends Component {
constructor(props) {
super(props);
this.spread = null;
this.state = {
linkColor: '',
visitedLinkColor: '',
text: '',
linkToolTip: '',
editable: false,
disabled: false
}
}
render() {
return (<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
<Worksheet />
</SpreadSheets>
</div>
<Panel propertyChange={(e, settings) => {this.propertyChange(e, settings)}} setting={this.state} />
</div>);
}
initSpread(spread) {
this.spread = spread;
const sheet = spread.getActiveSheet();
sheet.bind(spreadNS.Events.SelectionChanged, (e) => {
this.propertyChange(e);
});
sheet.suspendPaint();
sheet.setColumnWidth(2, 130);
sheet.setColumnWidth(1, 120);
sheet.setRowHeight(1, 50);
//set a hyperlink CellType to a cell
const 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:");
const h2 = new GC.Spread.Sheets.CellTypes.HyperLink();
//set callback to h2
const h = this.setCellTypeCallback(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: () => {
sheet.name("Hyperlink");
sheet.options.sheetTabColor = "red";
}
}, null, false, false, false, false);
}
propertyChange(e, settings) {
const sheet = this.spread.getActiveSheet();
const sels = sheet.getSelections();
if (sels && sels.length > 0) {
const sel = this.getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount());
const hyperLinkCellType = sheet.getCellType(sel.row, sel.col);
if (!(hyperLinkCellType instanceof spreadNS.CellTypes.HyperLink)) {
this.setState({ disabled: true });
return;
}
if (!settings) {
this.setState({
disabled: false,
linkColor: hyperLinkCellType.linkColor(),
visitedLinkColor: hyperLinkCellType.visitedLinkColor(),
text: hyperLinkCellType.text(),
linkToolTip: hyperLinkCellType.linkToolTip()
});
} else {
hyperLinkCellType.linkColor(settings.linkColor);
hyperLinkCellType.visitedLinkColor(settings.visitedLinkColor);
hyperLinkCellType.text(settings.text);
hyperLinkCellType.linkToolTip(settings.linkToolTip);
}
}
sheet.repaint();
}
getActualRange(range, maxRowCount, maxColCount) {
const row = range.row < 0 ? 0 : range.row;
const col = range.col < 0 ? 0 : range.col;
const rowCount = range.rowCount < 0 ? maxRowCount : range.rowCount;
const colCount = range.colCount < 0 ? maxColCount : range.colCount;
return new spreadNS.Range(row, col, rowCount, colCount);
}
setCellTypeCallback(h) {
h.text("set sheet tab style");
h.linkToolTip("set sheet tab style and sheet name");
h.activeOnClick(true);
h.onClickAction(() => {
this.spread.commandManager().execute({cmd: "setSheetTabStyle"});
});
return h;
}
}
class Panel extends Component {
constructor(props) {
super(props);
this.state = this.props.setting;
}
componentWillReceiveProps(nextProps) {
this.setState(nextProps.setting);
}
render() {
return (
<div class="options-container">
<div class="option-row">
<label for="linkColor">Link Color:</label>
<input id="linkColor" type="text" value={this.state.linkColor} onChange={(e) => { this.setState({ linkColor: e.target.value }); }} />
</div>
<div class="option-row">
<label for="visitedLinkColor">Visited Link Color:</label>
<input id="visitedLinkColor" type="text" value={this.state.visitedLinkColor} onChange={(e) => { this.setState({ visitedLinkColor: e.target.value }); }} />
</div>
<div class="option-row">
<label for="text">Text:</label>
<input id="text" type="text" value={this.state.text} onChange={(e) => { this.setState({ text: e.target.value }); }} />
</div>
<div class="option-row">
<label for="linkToolTip">Link Tooltip:</label>
<input id="linkToolTip" type="text" value={this.state.linkToolTip} onChange={(e) => { this.setState({ linkToolTip: e.target.value }); }} />
</div>
<div class="option-row">
<input type="button" id="setProperty" value="Update" disabled={this.state.disabled} onClick={(e) => {this.props.propertyChange(e, this.state)} } />
</div>
</div>
)
}
}
<!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/react/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- SystemJS -->
<script src="$DEMOROOT$/en/react/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('$DEMOROOT$/en/lib/react/license.js').then(function () {
System.import('./src/app');
});
</script>
</head>
<body>
<div id="app"></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;
overflow: auto;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
}
.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;
}
#app {
height: 100%;
}
(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true,
react: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-react': 'npm:@mescius/spread-sheets-react/index.js',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js',
'react': 'npm:react/umd/react.production.min.js',
'react-dom': 'npm:react-dom/umd/react-dom.production.min.js',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'jsx'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
})(this);
