이름 입력란 컴포넌트

SpreadJS에서는 선택한 범위 또는 항목을 표시하고 명명된 범위로 이동할 수 있는, Excel과 유사한 이름 입력란을 제공합니다.

소개 NameBox를 만들려면 호스트 DIV 요소를 추가하고 다음 예시와 같이 Spread 인스턴스에 바인딩합니다. NameBox는 UI 동작을 통해 값을 자동으로 업데이트합니다. 또한 refresh()를 사용하여 이름 입력란 값을 수동으로 새로 고칠 수 있습니다. dispose()를 사용하여 NameBox를 제거할 수 있습니다. 이름 입력란 옵션 다음 옵션을 사용하여 이름 입력란을 제어할 수 있습니다. GC.Spread.Sheets.NameBox.INameBoxOptions 이름 입력란 옵션 설정 이름 입력란을 만들 경우를 설정합니다. 이름 입력란 인스턴스를 사용하여 옵션을 설정합니다.
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 2}); initSpread(spread); var nameBox = new GC.Spread.Sheets.NameBox.NameBox('nameBox', spread); bindEvents(spread, nameBox); }; function changeProperty(nameBox, pn, value) { nameBox.options[pn] = value; } function bindEvents(spread, nameBox) { ["enableAddCustomName", "enableNavigateToRange", "showCustomNameList"].forEach(function (pn) { document.getElementById(pn).addEventListener("change", function (e) { changeProperty(nameBox, pn, !! e.target.checked); }); }); document.getElementById("dropDownMaxHeight").addEventListener("change", function (e) { let value = + e.target.value; nameBox.options.dropDownMaxHeight = value; }); } function initSpread(spread) { var sheet = spread.getSheet(0); initTable(spread); initSlicer(sheet); initChart(sheet); spread.addCustomName("workBookName1", "Sheet1!A2:D4", 0, 0, ""); spread.addCustomName("workBookName2", "Sheet2!B3:E6", 0, 0, ""); sheet.addCustomName("sheet1Name1", "C2:D3", 0, 0, ""); sheet.addCustomName("sheet1Name2", "B4:E10", 0, 0, ""); spread.getSheet(1).addCustomName('sheet2Name1', "D4:G6", 0, 0, ""); } function initTable(spread) { var dataSource = [ [ "salesman", "product", "date", "amount", "price", "sales" ], [ "Colleen Lee", "desk", new Date("2020-10-08T16:00:00.000Z"), 5, 199, 995 ], [ "Joe Mercer", "pen", new Date("2020-09-15T16:00:00.000Z"), 2, 5, 10 ], [ "Alicia Schmidt", "pencil", new Date("2021-06-22T16:00:00.000Z"), 6, 1.5, 9 ], [ "John Walsh", "chair", new Date("2021-07-19T16:00:00.000Z"), 7, 68, 476 ], [ "David Hale", "notebook", new Date("2021-01-13T16:00:00.000Z"), 7, 3.2, 22.4 ], [ "Gordon Jones", "desk", new Date("2021-03-12T16:00:00.000Z"), 9, 199, 1791 ], [ "Colleen Lee", "pen", new Date("2021-03-06T16:00:00.000Z"), 4, 5, 20 ], [ "Colleen Lee", "pencil", new Date("2020-09-02T16:00:00.000Z"), 10, 1.5, 15 ], [ "Joe Mercer", "chair", new Date("2020-08-09T16:00:00.000Z"), 3, 68, 204 ], [ "Alicia Schmidt", "notebook", new Date("2021-02-08T16:00:00.000Z"), 9, 3.2, 28.8 ], [ "John Walsh", "desk", new Date("2021-07-03T16:00:00.000Z"), 7, 199, 1393 ], [ "David Hale", "pen", new Date("2021-06-27T16:00:00.000Z"), 8, 5, 40 ], [ "Gordon Jones", "pencil", new Date("2020-10-10T16:00:00.000Z"), 2, 1.5, 3 ], [ "Colleen Lee", "chair", new Date("2021-03-04T16:00:00.000Z"), 2, 68, 136 ], [ "Colleen Lee", "notebook", new Date("2021-02-21T16:00:00.000Z"), 11, 3.2, 35.2 ], [ "Joe Mercer", "desk", new Date("2021-06-03T16:00:00.000Z"), 6, 199, 1194 ] ]; var sheet1 = spread.sheets[0]; sheet1.setArray(0, 0, dataSource); var table = sheet1.tables.add("table1", 0, 0, 17, 6, GC.Spread.Sheets.Tables.TableThemes.light9); var sheet2 = spread.sheets[1]; sheet2.setArray(0, 0, dataSource); var table2 = sheet2.tables.add("table2", 0, 0, 17, 6, GC.Spread.Sheets.Tables.TableThemes.light9); //setColumnWidth: sheet1 sheet1.setColumnWidth(0, 90); sheet1.setColumnWidth(1, 80); sheet1.setColumnWidth(2, 130); sheet1.setColumnWidth(3, 70); //setColumWidth: sheet2 sheet2.setColumnWidth(0, 90); sheet2.setColumnWidth(1, 80); sheet2.setColumnWidth(2, 130); sheet2.setColumnWidth(3, 70); } function initSlicer(sheet) { var slicer_name = sheet.slicers.add("salesman", "table1", "Salesman", GC.Spread.Sheets.Slicers.SlicerStyles.light3(), GC.Spread.Sheets.Slicers.SlicerType.table); slicer_name.startRow(0); slicer_name.startColumn(7); slicer_name.startColumnOffset(0); } function initChart(sheet) { var chart = sheet.charts.add("chart1", GC.Spread.Sheets.Charts.ChartType.line, 100, 400, 400, 300, 'C1:D17'); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="spreadjs culture" content="ko-kr" /> <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-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-slicers/dist/gc.spread.sheets.slicers.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-charts/dist/gc.spread.sheets.charts.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 class="sample-container"> <div id="ss" class="sample-spreadsheets"></div> </div> <div class="sample-options"> <div class="options-container"> <h3>Name Box Container</h3> <div id="nameBox"></div><br /> <h3>Name Box Options</h3> <div class="option-row"> <input type="checkbox" id="enableAddCustomName" checked /> <label for="enableAddCustomName">Enable Add Custom Name</label> </div> <div class="option-row"> <input type="checkbox" id="enableNavigateToRange" checked /> <label for="enableNavigateToRange">Enable Navigate to Range</label> </div> <div class="option-row"> <input type="checkbox" id="showCustomNameList" checked /> <label for="showCustomNameList">Show Custom Name List</label> </div> <div class="option-row"><br /> Drop Down Max Height: <input type="number" id="dropDownMaxHeight" min="0" step="1" value="500" /> </div> </div> </div> </div> </body> </html>
.sample-options { width: 260px; height: 100%; } .sample-tutorial { position: relative; height: 98vh; overflow: hidden; display: flex; } .sample-container { width: calc(100% - 280px); height: 100%; } .options-container { width: 100%; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; padding: 5px; margin-top: 10px; } label { display: block; margin-bottom: 6px; } input { padding: 4px 6px; } input[type=button] { margin-top: 6px; display: block; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #ss { height: 100%; } #nameBox { width: 80%; height: 25px; } label { display: inline-block; } p { font-size: 12px; font-weight: bold; } h3 { white-space: nowrap; } #dropDownMaxHeight { width: 40px; }