움직이는 개체의 위치와 크기를 변경할 수 있습니다. 위치와 크기는 두 가지 다른 방법으로 설정할 수 있습니다. 예:
행 높이 또는 열 너비의 크기를 조정할 것이므로 움직이는 개체의 위치나 크기를 변경하지 않아도 되는 경우가 있습니다. 이 경우, dynamicMove와 dynamicSize 메서드를 사용합니다. 예:
dynamicMove 메서드가 false이고 dynamicSize 메서드가 true이면 둘 다 아무런 효과가 없습니다.
UI 상호 작용에 따라 움직이는 개체를 변경하지 않으려면 isLocked 메서드를 사용하여 해당 개체를 잠급니다. 잠그려면 먼저 시트를 잠급니다.
하나의 움직이는 개체가 다른 개체와 겹치면 zIndex 메서드를 사용하여 순서를 위에서 아래로 변경할 수 있습니다. 예:
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
<gc-worksheet>
</gc-worksheet>
</gc-spread-sheets>
<div class="options-container">
<div class="option-row">
<p class="desc">Select the floating object in the Spread component and change it using these options</p>
</div>
<div class="option-row">
<input type="checkbox" id="isSheetProtected" v-model="isSheetProtected" v-on:change="onChange" />
<label for="isSheetProtected">IsSheetProtected</label>
</div>
<div class="option-row">
<input type="checkbox" id="isLocked" checked v-model="isLocked" v-on:change="onChange" />
<label for="isLocked">IsLocked</label>
</div>
<div class="option-row">
<input type="checkbox" id="isVisible" checked v-model="isVisible" v-on:change="onChange" />
<label for="isVisible">IsVisible</label>
</div>
<div class="option-row">
<input type="checkbox" id="dynamicSize" checked v-model="dynamicSize" v-on:change="onChange" />
<label for="dynamicSize">DynamicSize</label>
</div>
<div class="option-row">
<input type="checkbox" id="dynamicMove" checked v-model="dynamicMove" v-on:change="onChange" />
<label for="dynamicMove">DynamicMove</label>
<hr>
</div>
<div class="option-row">
<label for="moveRow">Row:</label>
<input type="text" id="moveRow" v-model.number="moveRow" />
<label for="moveColumn">Column:</label>
<input type="text" id="moveColumn" v-model.number="moveColumn" />
<input type="button" id="moveFloatingObject" value="Move floating Object" @click="onMove($event)" />
</div>
<hr>
<div class="option-row">
<label for="resizeWidth">Width:</label>
<input type="text" id="resizeWidth" v-model.number="resizeWidth" />
<label for="resizeHeight">Height:</label>
<input type="text" id="resizeHeight" v-model.number="resizeHeight" />
<input type="button" id="resizeFloatingObject" value="Resize floating object" @click="onResize($event)" />
</div>
<hr>
<div class="option-row">
<input type="button" id="bringToForward" value="Bring Forward" @click="bringToForward($event)" />
</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 App = Vue.extend({
name: "app",
data: function () {
return {
isSheetProtected: false,
isLocked: true,
isVisible: true,
dynamicSize: true,
dynamicMove: true,
moveRow: "",
moveColumn: "",
resizeWidth: "",
resizeHeight: "",
};
},
methods: {
initSpread: function (spread) {
this.spread = spread;
let spreadNS = GC.Spread.Sheets;
let sheet = spread.getSheet(0);
sheet.suspendPaint();
let customFloatingObject = new spreadNS.FloatingObjects.FloatingObject("f0");
customFloatingObject.startRow(1);
customFloatingObject.startColumn(1);
customFloatingObject.endColumn(6);
customFloatingObject.endRow(6);
let div = document.createElement('div');
div.innerHTML = "I'm a Div.<div style='border: 1px solid red; width: 80%; margin:auto;'><span>I'm a span</span></div>"
div.style.background = 'mintcream';
div.style.border = '1px solid green';
customFloatingObject.content(div);
sheet.floatingObjects.add(customFloatingObject);
sheet.resumePaint();
},
onChange(e) {
let value = e.target.checked;
let key = e.target.id;
let sheet = this.spread.getActiveSheet();
if (key === "isSheetProtected") {
sheet.options.isProtected = value;
} else {
let floatingObjects = _concat(sheet);
if (floatingObjects) {
for (let index = 0; index < floatingObjects.length; index++) {
if (floatingObjects[index].isSelected()) {
floatingObjects[index][key](value);
}
}
}
}
},
onMove() {
let sheet = this.spread.getActiveSheet();
let floatingObjects = _concat(sheet);
let row = this.moveRow;
let col = this.moveColumn;
if (!isNaN(row) && !isNaN(col)) {
if (floatingObjects) {
for (let index = 0, len = floatingObjects.length; index < len; index++) {
let fo = floatingObjects[index];
if (fo.isSelected()) {
fo.startRow(row);
fo.startColumn(col);
fo.startRowOffset(0);
fo.startColumnOffset(0);
}
}
}
}
sheet.repaint();
},
onResize() {
let sheet = this.spread.getActiveSheet();
let floatingObjects = _concat(sheet);
let width = this.resizeWidth;
let height = this.resizeHeight;
if (!isNaN(width) && !isNaN(height) && width > 0 && height > 0) {
if (floatingObjects) {
for (let index = 0, len = floatingObjects.length; index < len; index++) {
let fo = floatingObjects[index];
if (fo.isSelected()) {
fo.width(width);
fo.height(height);
}
}
}
}
sheet.repaint();
},
bringToForward() {
let sheet = this.spread.getActiveSheet();
let floatingObjects = _concat(sheet);
let maxZIndex = 0,
selectedCount = 0,
selectedName = null;
if (floatingObjects) {
for (let index = 0, len = floatingObjects.length; index < len; index++) {
let fo = floatingObjects[index];
if (!fo || !fo.name || !fo.isSelected) {
continue;
}
let zIndex = sheet.floatingObjects.zIndex(fo.name());
if (zIndex > maxZIndex) {
maxZIndex = zIndex;
}
if (fo.isSelected()) {
selectedCount++;
selectedName = fo.name();
}
}
if (selectedCount === 1) {
sheet.floatingObjects.zIndex(selectedName, maxZIndex + 1);
}
}
}
}
});
function _concat(sheet) {
if (sheet) {
let customFloatingObjects = sheet.floatingObjects.all();
let pictures = sheet.pictures.all();
return pictures.concat(customFloatingObjects);
}
return [];
}
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">
<!-- 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;
}
.option-row {
font-size: 14px;
padding: 5px;
}
input, select {
padding: 4px 6px;
width: 100%;
box-sizing: border-box;
}
input[type=checkbox] {
width: auto;
}
label {
display: inline-block;
min-width: 70px;
margin: 6px 0;
}
hr {
border-color: #fff;
opacity: .2;
margin: 12px 0;
}
input[type=button] {
margin-top: 6px;
}
.desc{
padding:2px 10px;
background-color:#F4F8EB;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
(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);
