확대/축소
확대: Ctrl + 마우스 휠을 위로
축소: Ctrl + 마우스 휠을 아래로
열 크기 조정
열 헤더 셀의 오른쪽 가장자리를 끌어 열의 크기를 조정합니다.
columnResizeMode는 선택적으로 GC.Spread.Sheets.ResizeMode.split로 설정할 수 있습니다.
열 헤더 셀의 오른쪽 가장자리를 마우스로 두 번 클릭하여 열 너비를 자동으로 맞춥니다.
autoFitType은 선택적으로 GC.Spread.Sheets.AutoFitType.cellWithHeader로 설정할 수 있습니다.
바로 가기 키
명령
바로 가기 키
복사
Ctrl+C
잘라내기
Ctrl+X
붙여넣기
Ctrl+V
편집으로 전환
F2
직접 입력
Char
편집 종료
Esc
삭제
Del
삭제 후 편집으로 전환
BackSpace
입력 제출, 아래로 이동
Enter
입력 제출, 위로 이동
Shift + Enter
다음 줄 입력
Alt+Enter, Ctrl+Enter
삽입 및 업데이트된 행 모두 저장
Ctrl + Shift + S
위로 이동
위로 키
아래로 이동
아래로 키
왼쪽으로 이동
왼쪽 키
오른쪽으로 이동
오른쪽 키
아래로 이동
Enter
오른쪽으로 이동
탭
왼쪽으로 이동
Shift + Tab
맨 위로/맨 아래로/왼쪽으로/오른쪽으로 먼저 이동
셀에서 Ctrl + 화살표 키
다음 페이지로 이동
PageDown
이전 페이지로 이동
PageUp
마우스를 클릭해 선택한 지점으로 확장
Shift + 마우스 클릭
셀 선택 확장
Shift + 화살표
클립보드
셀, 행 또는 열을 잘라내기/복사한 다음 붙여넣기는 바로 가기 키를 사용하여 수행할 수 있습니다.
잘라내기: Windows의 경우 Ctrl + X, Mac의 경우 Command + X
복사: Windows의 경우 Ctrl + C, Mac의 경우 Command + C
붙여넣기: Windows의 경우 Ctrl + V, Mac의 경우 Command + V
상황에 맞는 메뉴를 사용하여 수행할 수도 있습니다.
현재 선택한 셀, 행 또는 열을 마우스 오른쪽 버튼으로 클릭하여 상황에 맞는 메뉴가 표시되면 해당 메뉴에서 복사 또는 잘라내기를 클릭합니다.
새로 선택한 다른 셀 범위, 행 또는 열을 마우스 오른쪽 버튼으로 클릭하여 상황에 맞는 메뉴가 표시되면 해당 메뉴에서 붙여넣기를 클릭합니다.
allowExtendPasteRange를 true로 설정하는 것이 좋습니다.
끌기
끌어서 채우기는 선택한 영역의 오른쪽 아래 모서리를 클릭한 다음 마우스를 아래 또는 위로 이동합니다.
끌어서 놓기는 선택한 영역의 선택 테두리를 끌어 대상 셀에 놓습니다.
끌어서 복사는 Ctrl 키를 누른 상태에서 선택한 영역의 선택 테두리를 끌어 대상 셀에 놓습니다.
/*REPLACE_MARKER*/
/*DO NOT DELETE THESE COMMENTS*/
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 });
initSpread(spread);
};
function initSpread(spread) {
spread.suspendPaint();
spread.options.allowExtendPasteRange = true;
spread.options.columnResizeMode = GC.Spread.Sheets.ResizeMode.split;
spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader;
//init a data manager
var tableName = "Supplier";
var baseApiUrl = getBaseApiUrl();
var apiUrl = baseApiUrl + "/" + tableName;
var dataManager = spread.dataManager();
var myTable = dataManager.addTable("myTable", {
remote: {
read: {
url: apiUrl
}
}
});
//init a table sheet
var sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet);
sheet.options.allowAddNew = false; //hide new row
//bind a view to the table sheet
myTable.fetch().then(function() {
var view = myTable.addView("myView", [
{ value: "Id", width: 80 },
{ value: "CompanyName", width: 200, caption :"Company Name" },
{ value: "ContactName", width: 150, caption :"Contact" },
{ value: "ContactTitle", width: 200, caption :"Title" },
{ value: "Address", width: 200 },
{ value: "City", width: 150, caption :"City" },
{ value: "State", width: 100, caption :"State" },
{ value: "Region", width: 100, caption :"Region" }
]);
sheet.setDataView(view);
});
spread.resumePaint();
}
function getBaseApiUrl() {
return window.location.href.match(/http.+spreadjs\/learn-spreadjs\//)[0] + 'server/api';
}
<!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">
<!-- Promise Polyfill for IE, https://www.npmjs.com/package/promise-polyfill -->
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.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>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div id="optionContainer" class="optionContainer">
</div>
</div>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}