범위를 복사하거나 자르고 현재 시트나 다른 시트에 붙여넣을 수 있습니다. 이 경우 복사된 셀의 값과 스타일이 모두 복사됩니다. 그러나 Spread 컴포넌트의 내용을 메모장이나 Excel과 같은 다른 응용 프로그램에 붙여넣으면 값만 붙여넣어집니다. 다른 응용 프로그램에서 복사하거나 잘라낸 다음 Spread 컴포넌트에 붙여넣을 수도 있습니다.
일부 셀을 잘라내거나 복사하면 컨트롤은 복사한 범위를 알려주는 표시기를 표시합니다. 다음 코드와 같이 cutCopyIndicatorVisible 옵션을 사용하여 표시기를 표시할지 여부를 제어하고, cutCopyIndicatorBorderColor 옵션을 사용하여 표시기의 테두리 색을 설정할 수 있습니다:
범위를 끌어서 다른 셀에 놓을 수 있습니다. 범위를 놓을 때 Ctrl 키를 누르면 끌어온 셀이 복사됩니다. Ctrl 키를 누르지 않으면 끌어온 셀을 자릅니다.
SpreadJS는 셀 범위 데이터를 다른 범위로 끌어서 놓을 수 있는지 여부를 제어하는 allowUserDragDrop 옵션을 제공합니다. 또한 showDragDropTip 옵션을 사용하여 끌어올 때 팁을 표시할지 여부를 제어할 수 있습니다. 팁에는 드래그하는 위치가 표시됩니다.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import './styles.css';
import { AppFunc } from './app-func';
import { App } from './app-class';
// 1. Functional Component sample
ReactDOM.render(<AppFunc />, document.getElementById('app'));
// 2. Class Component sample
// ReactDOM.render(<App />, document.getElementById('app'));
import * as React from 'react';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
import GC from '@mescius/spread-sheets';
import '@mescius/spread-sheets-resources-ko';
GC.Spread.Common.CultureManager.culture("ko-kr");
import { getData } from './data';
const useState = React.useState;
export function AppFunc() {
const [spread, setSpread] = useState(null);
const [backColor, setBackColor] = useState("");
const initSpread = (spread) => {
setSpread(spread);
var sheet = spread.getSheet(0);
spread.fromJSON(getData()[0]);
}
const chkShowDragDropTip = (e) => {
spread.options.showDragDropTip = e.target.checked;
}
const chkAllowUserDragDrop = (e) => {
spread.options.allowUserDragDrop = e.target.checked;
}
const cutCopyIndicatorVisible = (e) => {
spread.options.cutCopyIndicatorVisible = e.target.checked;
}
const setCutCopyIndicatorBorderColor = (backColor) => {
spread.options.cutCopyIndicatorBorderColor = backColor;
}
const setIsProtected = (e) => {
let sheet = spread.getActiveSheet();
sheet.options.isProtected = e.target.checked;
}
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => initSpread(spread)}>
<Worksheet></Worksheet>
</SpreadSheets>
</div>
<Panel
chkShowDragDropTip={(e) => chkShowDragDropTip(e)}
chkAllowUserDragDrop={(e) => chkAllowUserDragDrop(e)}
cutCopyIndicatorVisible={(e) => cutCopyIndicatorVisible(e)}
setCutCopyIndicatorBorderColor={(e) => setCutCopyIndicatorBorderColor(e)}
setIsProtected={(e) => setIsProtected(e)}
></Panel>
</div>
);
}
function CheckBoxInput(props) {
const [checked, setChecked] = useState(props.checked);
return (
<input type="checkbox" id={props.id} checked={checked} onChange={(e) => {
setChecked(e.target.checked);
props.onChange(e)
}} />
);
}
function TextInput(props) {
const [value, setValue] = useState(props.value);
return (
<input type="text" id={props.id} value={value} onChange={(e) => {
setValue(e.target.value);
props.onChange(e)
}} />
);
}
function Panel(props) {
const [backColor, setBackColor] = useState("");
return (
<div className="options-container">
<div className="options-row">
<CheckBoxInput id="chkAllowUserDragDrop" checked={true}
onChange={props.chkAllowUserDragDrop}></CheckBoxInput>
<label htmlFor="chkAllowUserDragDrop" className="sizedLabel">AllowUserDragDrop</label>
</div>
<div className="options-row">
<CheckBoxInput id="chkShowDragDropTip" checked={true}
onChange={props.chkShowDragDropTip}></CheckBoxInput>
<label htmlFor="chkShowDragDropTip" className="sizedLabel">ShowDragDropTip</label>
</div>
<div className="options-row">
<CheckBoxInput id="cutCopyIndicatorVisible" checked={true}
onChange={props.cutCopyIndicatorVisible}></CheckBoxInput>
<label htmlFor="cutCopyIndicatorVisible" className="sizedLabel">CutCopyIndicatorVisible</label>
</div>
<div className="options-row">
<CheckBoxInput id="setIsProtected" checked={false} onChange={props.setIsProtected}></CheckBoxInput>
<label htmlFor="setIsProtected" className="sizedLabel">IsProtected</label>
</div>
<hr />
<div className="options-row">
<label>Enter a color name like "red" or "blue" for change the color of the cut/copy indicator
border.</label>
</div>
<div className="options-row">
<label>Cut/Copy Indicator Border Color:</label>
</div>
<div className="options-row">
<TextInput id="cutCopyIndicatorBorderColor" value={""}
onChange={(e) => {
setBackColor(e.target.value);
}}></TextInput>
<input type="button" value="Set" onClick={() => {
props.setCutCopyIndicatorBorderColor(backColor)
}} />
</div>
</div>
);
}
import * as React from 'react';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
import GC from '@mescius/spread-sheets';
import '@mescius/spread-sheets-resources-ko';
GC.Spread.Common.CultureManager.culture("ko-kr");
import { getData } from './data';
const Component = React.Component, useState = React.useState;
export class App extends Component {
constructor(props) {
super(props);
this.spread = null;
this.backColor = "";
}
render() {
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
<Worksheet></Worksheet>
</SpreadSheets>
</div>
<Panel
chkShowDragDropTip={(e) => this.chkShowDragDropTip(e)}
chkAllowUserDragDrop={(e) => this.chkAllowUserDragDrop(e)}
cutCopyIndicatorVisible={(e) => this.cutCopyIndicatorVisible(e)}
setCutCopyIndicatorBorderColor={(e) => this.setCutCopyIndicatorBorderColor(e)}
setIsProtected={(e) => this.setIsProtected(e)}
></Panel>
</div>
);
}
initSpread(spread) {
this.spread = spread;
var sheet = spread.getSheet(0);
spread.fromJSON(getData()[0]);
}
chkShowDragDropTip(e) {
let spread = this.spread;
spread.options.showDragDropTip = e.target.checked;
}
chkAllowUserDragDrop(e) {
let spread = this.spread;
spread.options.allowUserDragDrop = e.target.checked;
}
cutCopyIndicatorVisible(e) {
let spread = this.spread;
spread.options.cutCopyIndicatorVisible = e.target.checked;
}
setCutCopyIndicatorBorderColor(backColor) {
let spread = this.spread;
spread.options.cutCopyIndicatorBorderColor = backColor;
}
setIsProtected(e) {
let spread = this.spread;
let sheet = spread.getActiveSheet();
sheet.options.isProtected = e.target.checked;
}
}
function CheckBoxInput(props) {
const [checked, setChecked] = useState(props.checked);
return (
<input type="checkbox" id={props.id} checked={checked} onChange={(e) => {
setChecked(e.target.checked);
props.onChange(e)
}} />
);
}
function TextInput(props) {
const [value, setValue] = useState(props.value);
return (
<input type="text" id={props.id} value={value} onChange={(e) => {
setValue(e.target.value);
props.onChange(e)
}} />
);
}
class Panel extends Component {
constructor(props) {
super(props);
}
render() {
let props = this.props;
return (
<div className="options-container">
<div className="options-row">
<CheckBoxInput id="chkAllowUserDragDrop" checked={true}
onChange={props.chkAllowUserDragDrop}></CheckBoxInput>
<label htmlFor="chkAllowUserDragDrop" className="sizedLabel">AllowUserDragDrop</label>
</div>
<div className="options-row">
<CheckBoxInput id="chkShowDragDropTip" checked={true}
onChange={props.chkShowDragDropTip}></CheckBoxInput>
<label htmlFor="chkShowDragDropTip" className="sizedLabel">ShowDragDropTip</label>
</div>
<div className="options-row">
<CheckBoxInput id="cutCopyIndicatorVisible" checked={true}
onChange={props.cutCopyIndicatorVisible}></CheckBoxInput>
<label htmlFor="cutCopyIndicatorVisible" className="sizedLabel">CutCopyIndicatorVisible</label>
</div>
<div className="options-row">
<CheckBoxInput id="setIsProtected" checked={false} onChange={props.setIsProtected}></CheckBoxInput>
<label htmlFor="setIsProtected" className="sizedLabel">IsProtected</label>
</div>
<hr />
<div className="options-row">
<label>Enter a color name like "red" or "blue" for change the color of the cut/copy indicator
border.</label>
</div>
<div className="options-row">
<label>Cut/Copy Indicator Border Color:</label>
</div>
<div className="options-row">
<TextInput id="cutCopyIndicatorBorderColor" value={""}
onChange={(e) => {
this.backColor = e.target.value;
}}></TextInput>
<input type="button" value="Set" onClick={() => {
props.setCutCopyIndicatorBorderColor(this.backColor)
}} />
</div>
</div>
);
}
}
<!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/react/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/spread/source/data/data.js" type="text/javascript"></script>
<!-- SystemJS -->
<script src="$DEMOROOT$/ko/react/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('$DEMOROOT$/ko/lib/react/license.js').then(function () {
System.import('./src/app');
});
</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 {
padding: 4px 6px;
}
input[type=button] {
margin-top: 6px;
}
label {
margin-bottom: 6px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#app {
height: 100%;
}
.cutCopyIndicatorBorderColor {
margin: 0 8px;
width: 150px;
}
.sizedLabel {
width: 180px;
}
hr {
border-color: #fff;
opacity: .2;
margin-top: 20px;
}
export function getData() {
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},
}
}
}];
return data;
}
(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true,
react: true
},
meta: {
'*.css': { loader: 'css' }
},
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-react': 'npm:@mescius/spread-sheets-react/index.js',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js',
'react': 'npm:react/umd/react.production.min.js',
'react-dom': 'npm:react-dom/umd/react-dom.production.min.js',
'css': 'npm:systemjs-plugin-css/css.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: 'jsx'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
})(this);
