하이퍼링크

HyperLink CellType은 하이퍼링크 셀을 나타냅니다. 이러한 유형의 셀을 추가하여 사용자가 클릭하여 탐색할 수 있는 웹 사이트에 대한 링크를 제공할 수 있습니다. 이 링크는 양식 및 기타 유형의 응용 프로그램에서 사용할 수 있습니다.

하이퍼링크 셀을 만들려면 다음 코드를 사용하십시오: 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://developer.mescius.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); 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="ko-kr"/> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.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; }