월 선택 도구

월 선택기는 SpreadJS의 드롭다운 셀 스타일 유형입니다. 개발자는 JavaScript 코드를 사용하여 월 선택기의 시작 연도, 끝 연도 및 높이를 정의할 수 있습니다. 통합 문서의 셀에 스타일로 설정된 경우, 사용자는 드롭다운 화살표를 클릭하여 해당 셀에 표시할 월을 선택할 수 있습니다. 아래 스프레드시트는 이 드롭다운 예시를 표시한 것입니다.

드롭다운은 개발자에게 특정 속성이 있는 드롭다운 메뉴를 통합 문서의 셀에 추가하는 기능을 제공합니다. 이 드롭다운 메뉴는 드롭다운 메뉴에 사용할 코드를 지정하는 것 이외에 추가 코드가 필요하지 않습니다. SpreadJS에는 9가지 종류의 드롭다운이 있으며, 이 데모에서는 월 선택기를 사용하는 방법을 보여줍니다. 다음 코드와 같이 월 선택기 드롭다운을 사용할 수 있습니다. 월 선택 도구를 사용자 정의할 수 있는 옵션의 여러 항목이 있습니다. startYear: number: 월 선택의 시작 연도를 지정합니다. 기본값은 10년 전입니다. stopYear: number: 월 선택의 시작 연도를 지정합니다. 기본값은 올해입니다. height: number: 월 선택의 DOM 높이를 지정합니다. 기본 값은 300입니다.
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.getSheet(0); sheet.suspendPaint(); // -------------------- Month Picker --------------------- var monthPickerStyle = new GC.Spread.Sheets.Style(); monthPickerStyle.cellButtons = [ { imageType: GC.Spread.Sheets.ButtonImageType.dropdown, command: "openMonthPicker", useButtonStyle: true, } ]; monthPickerStyle.dropDowns = [ { type: GC.Spread.Sheets.DropDownType.monthPicker, option: { startYear: 2009, stopYear: 2019, height: 300, } } ]; sheet.setText(1, 5, "Month Picker"); sheet.setStyle(2, 5, monthPickerStyle); // -------------------- Month Picker --------------------- var monthPickerStyle = new GC.Spread.Sheets.Style(); monthPickerStyle.cellButtons = [ { imageType: GC.Spread.Sheets.ButtonImageType.dropdown, command: "openMonthPicker", useButtonStyle: true, } ]; monthPickerStyle.dropDowns = [ { type: GC.Spread.Sheets.DropDownType.monthPicker, option: { startYear: 1970, stopYear: 2030, height: 400, } } ]; sheet.setText(1, 11, "Month Picker"); sheet.setStyle(2, 11, monthPickerStyle); sheet.resumePaint(); spread.commandManager().execute({cmd:"openMonthPicker",row:2,col:5,sheetName:"Sheet1"}); }
<!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" style="width:100%; height: 100%"></div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }