ハイパーリンク型セル

HyperLinkは、ハイパーリンク型セルを表します。ハイパーリンク型セルを使用すると、Webサイトへのリンクをシートに追加できます。フォームや他の種類のアプリケーションでハイパーリンク型セルを使用することで、ユーザーはリンクをクリックして、指定のページに移動できます。

ハイパーリンク型セルを作成するには、次の例のようなコードを使用します。 ハイパーリンクのテキスト文字列を取得および設定するには、textメソッドを使用します。また、linkToolTipメソッドを使用して、ハイパーリンクにマウスポインタを合わせたときに表示されるツールチップを設定することもできます。次に、例を示します。 ハイパーリンクの色をクリック前とクリック後とで変えると、訪問済みのリンクを識別しやすくなります。次に、例を示します。 セルに設定したハイパーリンクは、textIndentプロパティを設定して、テキストのインデントを調整できます。 ハイパーリンクにコールバックを設定するには、onClickActionメソッドを使用します。リンクをクリックすると、コールバックが実行されます。 activeOnClickメソッドを使用すると、ハイパーリンクがクリックされた場合に、アクティブセルを移動するかどうかを取得および設定できます。 ハイパーリンク型セルには、他にもさまざまなオプションがあります。 セルにハイパーリンクを設定した後、wordWrapプロパティの値を指定することで、ハイパーリンクテキストを折り返して表示するかどうかを指定できます。 ハイパーリンクテキストの水平方向の配置も指定できます。これには、次のコードを使用して、右揃え、中央揃え、または左揃えを指定します。 ハイパーリンクテキストの垂直方向の配置も指定できます。これには、次のコードを使用して、上揃え、中央揃え、または下揃えを指定します。
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); //control active cell on mouse click activeCellOnClick(sheet); //change text indent of hyperlink changedHyperLinkTextIndent(sheet); //control horizontal alignment $('#horizontalAlignType').change(function () { var selection = sheet.getSelections()[0]; sheet.getCell(selection.row, selection.col, GC.Spread.Sheets.SheetArea.viewport) .hAlign(GC.Spread.Sheets.HorizontalAlign[$(this).val()]); }); //control vertical alignment $('#verticalAlighType').change(function () { var selection = sheet.getSelections()[0]; sheet.getCell(selection.row, selection.col, GC.Spread.Sheets.SheetArea.viewport) .vAlign(GC.Spread.Sheets.VerticalAlign[$(this).val()]); }); //change word wrap of hyperlink $("#wordWrap").change(function () { var selection = sheet.getSelections()[0]; sheet.getCell(selection.row, selection.col, GC.Spread.Sheets.SheetArea.viewport) .wordWrap($("#wordWrap").prop("checked")); }); 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 activeCellOnClick(sheet) { $("#activeOnClick").change(function () { var value = $("#activeOnClick").prop("checked"); var selections = sheet.getSelections(); for (var index = 0; index < selections.length; index++) { var selection = selections[index]; for (var row = selection.row; row < selection.row + selection.rowCount; row++) { for (var col = selection.col; col < selection.col + selection.colCount; col++) { var cellType = sheet.getCellType(row, col); if (cellType instanceof GC.Spread.Sheets.CellTypes.HyperLink) { cellType.activeOnClick(value); } } } } }); } function changedHyperLinkTextIndent(sheet) { var indent = 0; $("#setTextIndent").click(function () { sheet.suspendPaint(); var selections = sheet.getSelections(); var row = selections[0].row; var col = selections[0].col; var value = $('#textIndent').val(); indent = value; sheet.getCell(row, col, GC.Spread.Sheets.SheetArea.viewport) .textIndent(indent); sheet.resumePaint(); }); } function _getElementById(id){ return document.getElementById(id); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta name="spreadjs culture" content="ja-jp" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.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>リンクの色:</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; }