ハイパーリンク型セル

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

<p>ハイパーリンク型セルを作成するには、次の例のようなコードを使用します。</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> h = <span class="hljs-keyword">new</span> GC.Spread.Sheets.CellTypes.HyperLink(); sheet.setCellType(<span class="hljs-number">3</span>, <span class="hljs-number">2</span>, h, GC.Spread.Sheets.SheetArea.viewport); </code></pre> <p>ハイパーリンクのテキスト文字列を取得および設定するには、<strong>text</strong>メソッドを使用します。また、<strong>linkToolTip</strong>メソッドを使用して、ハイパーリンクにマウスポインタを合わせたときに表示されるツールチップを設定することもできます。次に、例を示します。</p> <pre><code class="hljs js language-js"> h.text(<span class="hljs-string">'SpreadJS Site'</span>); h.linkToolTip(<span class="hljs-string">'This is the link to SpreadJS site'</span>); </code></pre> <p>ハイパーリンクの色をクリック前とクリック後とで変えると、訪問済みのリンクを識別しやすくなります。次に、例を示します。</p> <pre><code class="hljs js language-js"> h.linkColor(<span class="hljs-string">'red'</span>); h.visitedLinkColor(<span class="hljs-string">'blue'</span>); </code></pre> <p>セルに設定したハイパーリンクは、<strong>textIndent</strong>プロパティを設定して、テキストのインデントを調整できます。</p> <pre><code class="hljs js language-js"> sheet.getCell(<span class="hljs-number">3</span>, <span class="hljs-number">2</span>).textIndent(<span class="hljs-number">3</span>); </code></pre> <p>ハイパーリンクにコールバックを設定するには、<strong>onClickAction</strong>メソッドを使用します。リンクをクリックすると、コールバックが実行されます。</p> <pre><code class="hljs js language-js"> spread.commandManager().register(<span class="hljs-string">'setSheetTabStyle'</span>, { <span class="hljs-attr">canUndo</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">execute</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">context, options, isUndo</span>) </span>{ sheet.name(<span class="hljs-string">'Hyperlink'</span>); sheet.options.sheetTabColor = <span class="hljs-string">'red'</span>; } }, <span class="hljs-literal">null</span>, <span class="hljs-literal">false</span>, <span class="hljs-literal">false</span>, <span class="hljs-literal">false</span>, <span class="hljs-literal">false</span>); h.onClickAction(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ spread.commandManager().execute({<span class="hljs-attr">cmd</span>: <span class="hljs-string">'setSheetTabStyle'</span>}); }); </code></pre> <p><strong>activeOnClick</strong>メソッドを使用すると、ハイパーリンクがクリックされた場合に、アクティブセルを移動するかどうかを取得および設定できます。</p> <pre><code class="hljs js language-js"> h.activeOnClick(<span class="hljs-literal">true</span>); </code></pre> <p>ハイパーリンク型セルには、他にもさまざまなオプションがあります。</p> <p>セルにハイパーリンクを設定した後、<strong>wordWrap</strong>プロパティの値を指定することで、ハイパーリンクテキストを折り返して表示するかどうかを指定できます。</p> <pre><code class="hljs js language-js"> sheet.getCell(<span class="hljs-number">3</span>, <span class="hljs-number">2</span>).wordWrap(<span class="hljs-literal">true</span>); <span class="hljs-comment">// wordWrapのデフォルト値は、falseです。</span> </code></pre> <p>ハイパーリンクテキストの<strong>水平方向の配置</strong>も指定できます。これには、次のコードを使用して、右揃え、中央揃え、または左揃えを指定します。</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> hAlign = GC.Spread.Sheets.HorizontalAlign.right; sheet.getCell(<span class="hljs-number">3</span>, <span class="hljs-number">2</span>).hAlign(hAlign); </code></pre> <p>ハイパーリンクテキストの<strong>垂直方向の配置</strong>も指定できます。これには、次のコードを使用して、上揃え、中央揃え、または下揃えを指定します。</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> vAlign = GC.Spread.Sheets.VerticalAlign.bottom; sheet.getCell(<span class="hljs-number">3</span>, <span class="hljs-number">2</span>).vAlign(vAlign); </code></pre>
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>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="更新"/> </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; }