범위를 복사하거나 자르고 현재 시트나 다른 시트에 붙여넣을 수 있습니다. 이 경우 복사된 셀의 값과 스타일이 모두 복사됩니다. 그러나 Spread 컴포넌트의 내용을 메모장이나 Excel과 같은 다른 응용 프로그램에 붙여넣으면 값만 붙여넣어집니다. 다른 응용 프로그램에서 복사하거나 잘라낸 다음 Spread 컴포넌트에 붙여넣을 수도 있습니다.
일부 셀을 잘라내거나 복사하면 컨트롤은 복사한 범위를 알려주는 표시기를 표시합니다. 다음 코드와 같이 cutCopyIndicatorVisible 옵션을 사용하여 표시기를 표시할지 여부를 제어하고, cutCopyIndicatorBorderColor 옵션을 사용하여 표시기의 테두리 색을 설정할 수 있습니다:
범위를 끌어서 다른 셀에 놓을 수 있습니다. 범위를 놓을 때 Ctrl 키를 누르면 끌어온 셀이 복사됩니다. Ctrl 키를 누르지 않으면 끌어온 셀을 자릅니다.
SpreadJS는 셀 범위 데이터를 다른 범위로 끌어서 놓을 수 있는지 여부를 제어하는 allowUserDragDrop 옵션을 제공합니다. 또한 showDragDropTip 옵션을 사용하여 끌어올 때 팁을 표시할지 여부를 제어할 수 있습니다. 팁에는 드래그하는 위치가 표시됩니다.
<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="options-row">
<input type="checkbox" id="allowUserDragDrop" v-model="allowUserDragDrop">
<label for="allowUserDragDrop">AllowUserDragDrop</label>
</div>
<div class="options-row">
<input type="checkbox" id="showDragDropTip" v-model="showDragDropTip">
<label for="showDragDropTip">ShowDragDropTip</label>
</div>
<div class="options-row">
<input type="checkbox" id="copyIndicatorVisible" v-model="copyIndicatorVisible">
<label for="copyIndicatorVisible">CutCopyIndicatorVisible</label>
</div>
<div class="options-row">
<input type="checkbox" id="isProtected" v-model="isProtected">
<label for="isProtected">IsProtected</label>
</div>
<div class="options-row">
<label>Enter a color name like "red" or "blue" for change the color of the cut/copy indicator
border.</label>
</div>
<div class="options-row">
<label>Cut/Copy Indicator Border Color:</label>
</div>
<div class="options-row">
<input type="text" id="cutCopyIndicatorBorderColor" v-model="cutCopyIndicatorBorderColor">
<input type="button" value="Set" @click="setCutCopyIndicatorBorderColor()">
</div>
</div>
</div>
</template>
<script setup>
import { shallowRef, ref, watch } from "vue";
import "@mescius/spread-sheets-vue";
import GC from '@mescius/spread-sheets';
import '@mescius/spread-sheets-resources-ko';
GC.Spread.Common.CultureManager.culture("ko-kr");
import "./data.js";
const spreadRef = shallowRef(null);
const allowUserDragDrop = ref(true);
const showDragDropTip = ref(true);
const copyIndicatorVisible = ref(true);
const isProtected = ref(false);
const cutCopyIndicatorBorderColor = ref("");
watch(allowUserDragDrop, (value) => {
let spread = spreadRef.value;
spread.options.allowUserDragDrop = value;
});
watch(showDragDropTip, (value) => {
let spread = spreadRef.value;
spread.options.showDragDropTip = value;
});
watch(copyIndicatorVisible, (value) => {
let spread = spreadRef.value;
spread.options.cutCopyIndicatorVisible = value;
});
watch(isProtected, (value) => {
let spread = spreadRef.value;
let sheet = spread.getActiveSheet();
sheet.options.isProtected = value;
});
let initSpread = function (spread) {
spreadRef.value = spread;
spread.fromJSON(data[0]);
}
function setCutCopyIndicatorBorderColor() {
let spread = spreadRef.value;
spread.options.cutCopyIndicatorBorderColor = cutCopyIndicatorBorderColor.value;
}
</script>
<style scoped>
#app {
height: 100%;
}
.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;
}
label {
display: inline-block;
margin-bottom: 6px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
<!DOCTYPE html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/ko/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ko/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="./systemjs.config.js"></script>
<script src="./compiler.js" type="module"></script>
<script src="$DEMOROOT$/spread/source/data/outlineColumn-wbs.js" type="text/javascript"></script>
<script>
var System = SystemJS;
System.import("./src/app.js");
System.import('$DEMOROOT$/ko/lib/vue3/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
var data = [{
"version":"12.0.0",
"tabStripRatio":0.6,
"sheetCount":1,
"sheets":{
"Sheet1":{
"name":"Sheet1",
"rowCount":114,
"columnCount":21,
"activeRow":2,
"activeCol":2,
"data":{
"dataTable":{
"0":{
"0":{
"value":"Salesperson",
"style":
{
"foreColor" : "#FFFFFF",
"backColor" : "#808080",
"hAlign" : 1
}
},
"1":{
"value":"Region",
"style": {
"foreColor" : "#FFFFFF",
"backColor" : "#808080",
"hAlign" : 1
}
},
"2":{
"value":"Sales",
"style": {
"foreColor" : "#FFFFFF",
"backColor" : "#808080",
"hAlign" : 1
}
}
},
"1":{
"0":{
"value":"Ally",
"style":{"hAlign" : 1}
},
"1":{
"value":"North",
"style":{"hAlign" : 1}
},
"2":{
"value":24234324,
"style":{"hAlign" : 1, "formatter": "$#,##0"}
}
},
"2":{
"0":{
"value":"Tom",
"style":{"hAlign" : 1}
},
"1":{
"value":"South",
"style":{"hAlign" : 1}
},
"2":{
"value":2342342,
"style":{"hAlign" : 1, "formatter": "$#,##0"}
}
},
"3":{
"0":{
"value":"Jack",
"style":{"hAlign" : 1}
},
"1":{
"value":"South",
"style":{"hAlign" : 1}
},
"2":{
"value":324234,
"style":{"hAlign" : 1, "formatter": "$#,##0"}
}
},
"4":{
"0":{
"value":"John",
"style":{"hAlign" : 1}
},
"1":{
"value":"West",
"style":{"hAlign" : 1}
},
"2":{
"value":2342443,
"style":{"hAlign" : 1, "formatter": "$#,##0"}
}
},
"5":{
"0":{
"value":"Lily",
"style":{"hAlign" : 1}
},
"1":{
"value":"North",
"style":{"hAlign" : 1}
},
"2":{
"value":2342342,
"style":{"hAlign" : 1, "formatter": "$#,##0"}
}
},
"6":{
"0":{
"value":"Linda",
"style":{"hAlign" : 1}
},
"1":{
"value":"East",
"style":{"hAlign" : 1}
},
"2":{
"value":5857858,
"style":{"hAlign" : 1, "formatter": "$#,##0"}
}
},
"7":{
"0":{
"value":"Will",
"style":{"hAlign" : 1}
},
"1":{
"value":"North",
"style":{"hAlign" : 1}
},
"2":{
"value":437587965,
"style":{"hAlign" : 1, "formatter": "$#,##0"}
}
}
}
},
"defaults": {"colHeaderRowHeight": 20, "colWidth": 120, "rowHeaderColWidth": 40, "rowHeight": 26},
}
}
}];
(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.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",
'@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'
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
