상황에 맞는 메뉴 스크롤

SpreadJS의 상황에 맞는 메뉴는 스크롤을 지원하며, 디스플레이 크기에 맞추어 높이를 사용자 정의할 수도 있습니다.

상황에 맞는 메뉴는 스크롤을 지원하며, spread.contextMenu.menuView.scrollable을 사용하여 상황에 맞는 메뉴를 스크롤할지 여부를 제어할 수 있습니다. spread.contextMenu.menuView.scrollable을 사용하여 상황에 맞는 메뉴를 스크롤할지 여부를 제어할 수 있습니다. spread.contextMenu.menuView.maxHeight를 사용하여 상황에 맞는 메뉴의 최대 높이를 설정하거나 가져올 수 있습니다.
<template> <div class="sample-tutorial"> <gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread"> <gc-worksheet></gc-worksheet> </gc-spread-sheets> <div class="options-container"> <label>Try setting the height to 150 in the context menu below.</label> <div class="option-row"> <div class="option-row"> <label for="contextMenuMaxHeight">Context Menu Max Height: </label> <input type="text" id="contextMenuMaxHeight" @change="changeMaxHeight"/> <input type="button" id="setContextMenuMaxHeight" value="Set" @click="setMaxHeight"/> </div> </div> <div class="option-row"> <input type="checkbox" id="scrollable" checked @change="changeScrollable"/> <label for="scrollable">Enable Context Menu Scroll</label> </div> </div> </div> </template> <script> import Vue from "vue"; import '@mescius/spread-sheets-resources-ko'; GC.Spread.Common.CultureManager.culture("ko-kr"); import "@mescius/spread-sheets-vue"; import GC from "@mescius/spread-sheets"; import "./styles.css"; let spreadNS = GC.Spread.Sheets; let App = Vue.extend({ name: "app", data: function() { return { spread: GC.Spread.Sheets.Workbook, maxHeight: '', scrollable: true }; }, methods: { initSpread: function(spread) { this.spread = spread; let sheet = spread.getActiveSheet(); sheet.suspendPaint(); let dataColumns = ["Name", "City", "Birthday", "Sex", "Weight", "Height"]; let data = [ ["Bob", "New York", "1968/6/8", "M", "80", "180"], ["Betty", "New York", "1972/7/3", "F", "72", "168"], ["Cherry", "Washington", "1986/2/2", "F", "58", "161"], ["Gary", "New York", "1964/3/2", "M", "71", "179"], ["Hunk", "Washington", "1972/8/8", "M", "80", "171"], ["Eva", "Washington", "1993/2/15", "F", "71", "180"] ]; sheet.tables.addFromDataSource("table1", 1, 1, data, GC.Spread.Sheets.Tables.TableThemes.medium7); sheet.getRange(-1, 1, -1, 6).width(80); sheet.getRange(2, 3, 6, 1).formatter("mm-dd-yyyy"); let table = sheet.tables.findByName("table1"); table.setColumnName(0, dataColumns[0]); table.setColumnName(1, dataColumns[1]); table.setColumnName(2, dataColumns[2]); table.setColumnName(3, dataColumns[3]); table.setColumnName(4, dataColumns[4]); table.setColumnName(5, dataColumns[5]); sheet.resumePaint(); }, changeScrollable(e) { this.spread.contextMenu.menuView.scrollable(e.target.checked); }, changeMaxHeight(e) { this.maxHeight = e.target.value; }, setMaxHeight(e) { this.spread.contextMenu.menuView.maxHeight(+(this.maxHeight)); } } }); new Vue({ render: h => h(App) }).$mount("#app"); </script>
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/vue/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/spread/source/data/outlineColumn.js" type="text/javascript"></script> <!-- SystemJS --> <script src="$DEMOROOT$/ko/vue/node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); System.import('$DEMOROOT$/ko/lib/vue/license.js'); </script> </head> <body> <div id="app"></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; } .options-row { font-size: 14px; padding: 5px; margin-top: 10px; } input { display: inline-block; } input[type="text"] { width: 200px; } input[type="button"] { /* padding: 4px 6px; width: 100%; */ margin-bottom: 10px; } label { display: inline-block; font-size: 13px; } p{ padding:2px 10px; background-color:#F4F8EB; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .desc { padding: 2px 10px; background-color: #F4F8EB; } .loginBox { position: absolute; left: 35%; top: 30%; background-color: white; padding: 20px; border: 1px solid #c6c6c6; box-shadow: rgba(0, 0, 0, 0.4) 1px 2px 5px; z-index: 2000; height: 100px; width: 200px; } .loginBoxLabel { display: inline-block; width: 200px; text-align: center; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' }, '*.vue': { loader: 'vue-loader' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { '@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js', '@mescius/spread-sheets-resources-ko': 'npm:@mescius/spread-sheets-resources-ko/index.js', '@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js', '@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'css': 'npm:systemjs-plugin-css/css.js', 'vue': 'npm:vue/dist/vue.min.js', 'vue-loader': 'npm:systemjs-vue-browser/index.js', 'tiny-emitter': 'npm:tiny-emitter/index.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' } } }); })(this);