범위를 복사하거나 자르고 현재 시트나 다른 시트에 붙여넣을 수 있습니다. 이 경우 복사된 셀의 값과 스타일이 모두 복사됩니다. 그러나 Spread 컴포넌트의 내용을 메모장이나 Excel과 같은 다른 응용 프로그램에 붙여넣으면 값만 붙여넣어집니다. 다른 응용 프로그램에서 복사하거나 잘라낸 다음 Spread 컴포넌트에 붙여넣을 수도 있습니다.
일부 셀을 잘라내거나 복사하면 컨트롤은 복사한 범위를 알려주는 표시기를 표시합니다. 다음 코드와 같이 cutCopyIndicatorVisible 옵션을 사용하여 표시기를 표시할지 여부를 제어하고, cutCopyIndicatorBorderColor 옵션을 사용하여 표시기의 테두리 색을 설정할 수 있습니다:
범위를 끌어서 다른 셀에 놓을 수 있습니다. 범위를 놓을 때 Ctrl 키를 누르면 끌어온 셀이 복사됩니다. Ctrl 키를 누르지 않으면 끌어온 셀을 자릅니다.
SpreadJS는 셀 범위 데이터를 다른 범위로 끌어서 놓을 수 있는지 여부를 제어하는 allowUserDragDrop 옵션을 제공합니다. 또한 showDragDropTip 옵션을 사용하여 끌어올 때 팁을 표시할지 여부를 제어할 수 있습니다. 팁에는 드래그하는 위치가 표시됩니다.
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 1 });
initSpread(spread);
};
function initSpread(spread) {
var sheet = spread.getActiveSheet();
spread.fromJSON(data[0]);
_getElementById('chkShowDragDropTip').addEventListener('click', function() {
spread.options.showDragDropTip = _getElementById('chkShowDragDropTip').checked;
});
_getElementById('chkAllowUserDragDrop').addEventListener('click', function() {
spread.options.allowUserDragDrop = _getElementById('chkAllowUserDragDrop').checked;
});
_getElementById('cutCopyIndicatorVisible').addEventListener('change', function() {
var value = _getElementById('cutCopyIndicatorVisible').checked;
spread.options.cutCopyIndicatorVisible = value;
});
_getElementById('setCutCopyIndicatorBorderColor').addEventListener('click', function() {
var value = _getElementById('cutCopyIndicatorBorderColor').value;
spread.options.cutCopyIndicatorBorderColor = value;
});
_getElementById('setIsProtected').addEventListener('click', function() {
var sheet = spread.getActiveSheet();
var value = _getElementById('setIsProtected').checked;
sheet.options.isProtected = value;
});
}
function _getElementById(id) {
return document.getElementById(id);
}
<!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$/spread/source/data/data.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>
<script src="data.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div class="options-container">
<div class="option-row">
<input id="chkAllowUserDragDrop" type="checkbox" checked="checked" />
<label for="chkAllowUserDragDrop" class="sizedLabel">AllowUserDragDrop</label>
</div>
<div class="option-row">
<input id="chkShowDragDropTip" type="checkbox" checked="checked" />
<label for="chkShowDragDropTip" class="sizedLabel">ShowDragDropTip</label>
</div>
<div class="option-row">
<input type="checkbox" id="cutCopyIndicatorVisible" checked="checked" />
<label for="cutCopyIndicatorVisible" class="sizedLabel">CutCopyIndicatorVisible</label>
</div>
<div class="option-row">
<input type="checkbox" id="setIsProtected" />
<label for="setIsProtected" class="sizedLabel">IsProtected</label>
</div>
<hr>
<div class="option-row">
<label>Enter a color name like "red" or "blue" for change the color of the cut/copy indicator border.</label>
</div>
<label>Cut/Copy Indicator Border Color:</label>
<div class="option-row">
<input type="text" style="margin:0 8px; width: 150px;" id="cutCopyIndicatorBorderColor" />
<input type="button" value="Set" id="setCutCopyIndicatorBorderColor"/>
</div>
</div>
</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},
}
}
}];
label {
display:inline-block;
}
.sizedLabel {
width: 180px;
}
hr {
border-color: #fff;
opacity: .2;
margin-top: 20px;
}
.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;
margin-top: 10px;
}
label {
margin-bottom: 6px;
}
input {
padding: 4px 6px;
}
input[type=button] {
margin-top: 6px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}