선택

Theme:

이 샘플에서는 통합 문서에서 선택 동작을 사용자 정의하는 방법을 보여 줍니다.

SpreadJS에서 셀, 행, 열 또는 여러 범위를 선택할 수 있습니다.

하나의 셀을 클릭하고 마우스를 끌어서 범위를 선택합니다. 그러면 범위 선택 내용이 표시됩니다.

다음 코드와 같이 selectionBorderColor 및 selectionBackColor 옵션을 사용하여 선택 영역 테두리 색과 배경색을 변경할 수 있습니다:

       var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
       var sheet = spread.getActiveSheet();
       sheet.options.selectionBorderColor = 'red';
       sheet.options.selectionBackColor = 'transparent';

selectionPolicy 및 selectionUnit 옵션을 사용하여 사용자가 선택할 수 있는 항목을 설정할 수 있습니다. SelectionPolicy는 다음 유형을 제공합니다:

single: 단일 항목만 선택할 수 있습니다.
range: 단일 항목과 항목 범위를 선택할 수 있지만 여러 범위는 선택할 수 없습니다.
mutliRange: 여러 범위를 포함하여 단일 항목과 항목 범위를 선택할 수 있습니다. SelectionUnit 열거에는 다음 유형이 있습니다.

SelectionUnit 열거에는 다음 유형이 있습니다.

cell: 선택 가능한 가장 작은 단위가 셀임을 나타냅니다.
row: 선택 가능한 가장 작은 단위가 행임을 나타냅니다.
column: 선택 가능한 가장 작은 단위가 열임을 나타냅니다.

이러한 두 가지 방법을 사용하여 선택 모드를 제어할 수 있습니다.

Ctrl 키를 누르고 일부 범위를 선택합니다. 여러 범위를 선택하게 됩니다. 또한 addSelection 메서드를 사용하여 더 많은 선택을 추가한 다음 getSelections 메서드를 사용하여 선택한 모든 범위를 가져옵니다. clearSelection 메서드를 사용하여 선택 항목을 지웁니다. 이러한 메서드는 다음 코드에서 사용됩니다.

    sheet.addSelection(0, 0, 3, 3);
    sheet.addSelection(4, 3, 2, 2);
    sheet.clearSelection();
    var selections = sheet.getSelections(); 
    // after clearSelection the selections.length is 0.

allowUserDeselect 통합 문서 옵션을 사용하면 마우스로 현재 선택 영역을 선택 취소하는 기능을 활성화할지 여부를 제어할 수 있습니다.

마우스를 사용하여 선택하는 것 이외에 setSelection 메서드를 사용하여 일부 셀을 선택하고, setActiveCell 메서드를 사용하여 하나의 셀을 선택할 수 있습니다. 활성 셀은 선택 영역의 첫 번째 셀입니다. 다음 코드와 같이 getActiveRowIndex 및 getActiveColumnIndex 메서드를 사용하여 활성 셀 행 및 열 인덱스를 가져옵니다.

    sheet.setSelection(0, 0, 3, 3);
    sheet.setActiveCell(20, 3, 2, 2);
    var activeRowIndex = sheet.getActiveRowIndex();
    var activeColumnIndex = sheet.getActiveColumnIndex();

활성 셀을 설정한 후 활성 셀이 표시되지 않으면 showCell, showRow 및 showColumn 메서드를 사용하여 활성 셀을 표시할 수 있습니다.

    var verticalPosition = GC.Spread.Sheets.VerticalPosition.top;
    var horizontalPosition = GC.Spread.Sheets.HorizontalPosition.left;
    sheet.showCell(20, 3, verticalPosition, horizontalPosition);
    // up code and down code work out the same result.
    sheet.showColumn(3, horizontalPosition);
    sheet.showRow(20, verticalPosition);

SpreadJS에서 셀, 행, 열 또는 여러 범위를 선택할 수 있습니다. 하나의 셀을 클릭하고 마우스를 끌어서 범위를 선택합니다. 그러면 범위 선택 내용이 표시됩니다. 다음 코드와 같이 selectionBorderColor 및 selectionBackColor 옵션을 사용하여 선택 영역 테두리 색과 배경색을 변경할 수 있습니다: selectionPolicy 및 selectionUnit 옵션을 사용하여 사용자가 선택할 수 있는 항목을 설정할 수 있습니다. SelectionPolicy는 다음 유형을 제공합니다: single: 단일 항목만 선택할 수 있습니다. range: 단일 항목과 항목 범위를 선택할 수 있지만 여러 범위는 선택할 수 없습니다. mutliRange: 여러 범위를 포함하여 단일 항목과 항목 범위를 선택할 수 있습니다. SelectionUnit 열거에는 다음 유형이 있습니다. SelectionUnit 열거에는 다음 유형이 있습니다. cell: 선택 가능한 가장 작은 단위가 셀임을 나타냅니다. row: 선택 가능한 가장 작은 단위가 행임을 나타냅니다. column: 선택 가능한 가장 작은 단위가 열임을 나타냅니다. 이러한 두 가지 방법을 사용하여 선택 모드를 제어할 수 있습니다. Ctrl 키를 누르고 일부 범위를 선택합니다. 여러 범위를 선택하게 됩니다. 또한 addSelection 메서드를 사용하여 더 많은 선택을 추가한 다음 getSelections 메서드를 사용하여 선택한 모든 범위를 가져옵니다. clearSelection 메서드를 사용하여 선택 항목을 지웁니다. 이러한 메서드는 다음 코드에서 사용됩니다. allowUserDeselect 통합 문서 옵션을 사용하면 마우스로 현재 선택 영역을 선택 취소하는 기능을 활성화할지 여부를 제어할 수 있습니다. 마우스를 사용하여 선택하는 것 이외에 setSelection 메서드를 사용하여 일부 셀을 선택하고, setActiveCell 메서드를 사용하여 하나의 셀을 선택할 수 있습니다. 활성 셀은 선택 영역의 첫 번째 셀입니다. 다음 코드와 같이 getActiveRowIndex 및 getActiveColumnIndex 메서드를 사용하여 활성 셀 행 및 열 인덱스를 가져옵니다. 활성 셀을 설정한 후 활성 셀이 표시되지 않으면 showCell, showRow 및 showColumn 메서드를 사용하여 활성 셀을 표시할 수 있습니다.

window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
spread.suspendPaint();
initSpread(spread);
spread.resumePaint();
};
function initSpread(spread) {
var sheet = spread.getActiveSheet();
spread.fromJSON(data[0]);
_getElementById('selectionPolicy').addEventListener('change', function() {
var sheet = spread.getActiveSheet();
var policy = parseInt(this.value, 10);
sheet.selectionPolicy(policy);
});
_getElementById('selectionUnit').addEventListener('change', function() {
var sheet = spread.getActiveSheet();
var unit = parseInt(this.value, 10);
sheet.selectionUnit(unit);
});
_getElementById('setBackColor').addEventListener('click', function() {
var sheet = spread.getActiveSheet();
var backColor = _getElementById('backColor').value;
sheet.options.selectionBackColor = backColor;
});
_getElementById('setBorderColor').addEventListener('click', function() {
var sheet = spread.getActiveSheet();
var borderColor = _getElementById('borderColor').value;
sheet.options.selectionBorderColor = borderColor;
});
_getElementById('tabStoptrue_Btn').addEventListener('click', function() {
setIsTabStop(spread, true);
});
_getElementById('tabStopfalse_Btn').addEventListener('click', function() {
setIsTabStop(spread, false);
});
_getElementById('chk_allowDeselect').addEventListener('click', function() {
spread.options.allowUserDeselect = this.checked;
});
}
function setIsTabStop(spread, isTabStop) {
var sheet = spread.getActiveSheet();
sheet.suspendPaint();
var sels = sheet.getSelections();
for (var index = 0; index < sels.length; index++) {
var selRange = sels[index];
if (selRange.col >= 0 && selRange.row >= 0) {
sheet.getRange(selRange.row, selRange.col, selRange.rowCount, selRange.colCount).tabStop(isTabStop);
} else if (selRange.row >= 0) {
sheet.getRange(selRange.row, -1, selRange.rowCount, -1).tabStop(isTabStop);
} else if (selRange.col >= 0) {
sheet.getRange(-1, selRange.col, -1, selRange.colCount).tabStop(isTabStop);
}
}
sheet.resumePaint();
}
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="dataset.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 class="options-container">
<div class="option-row">
Change the provided properties to see how they affect the selection.
</div>
<div class="option-row">
<label for="selectionPolicy" class="normal">SelectionPolicy:</label>
</div>
<div class="option-row">
<select id="selectionPolicy">
<option value="0">Single</option>
<option value="1">Range</option>
<option value="2" selected="selected">MultiRange</option>
</select>
</div>
<div class="option-row">
<label for="selectionUnit" class="normal">SelectionUnit:</label>
</div>
<div class="option-row">
<select id="selectionUnit">
<option value="0" selected="selected">Cell</option>
<option value="1">Row</option>
<option value="2">Column</option>
</select>
</div>
<div class="option-row">
<input type="checkbox" id="chk_allowDeselect" checked/>
<label for="chk_allowDeselect">Allow User Deselect</label>
</div>
<div class="option-row">
<label for="backColor" class="wide">Selection BackColor:</label>
</div>
<div class="option-row">
<input type="text" id="backColor" value="rgba(204,255,51, 0.3)" />
<input type="button" value="Set" id="setBackColor" class="narrow" />
</div>
<div class="option-row">
<label for="borderColor" class="wide">Selection BorderColor:</label>
</div>
<div class="option-row">
<input type="text" id="borderColor" value="Accent 3 -40" />
<input type="button" value="Set" id="setBorderColor" class="narrow" />
</div>
<div class="option-row">
<input type="button" id="tabStoptrue_Btn" value="SetTabStop True" class="wide" style="padding-top: 4px"/>
<input type="button" id="tabStopfalse_Btn" value="SetTabStop False" class="wide" style="padding-top: 4px"/>
<label style="display: block;padding-top: 10px;">Set this to control whether the user can set focus to a selection using the Tab key.</label>
</div>
</div>
</div>
</body>
</html>

input[type="text"] {
width: 160px;
}
label.normal {
display: inline-block;
width: 120px;
}
select {
width: 120px;
height: 35px;
}
label.wide {
display: inline-block;
width: 160px;
}
input[type="button"].narrow {
width: 60px;
}
input[type="button"].wide {
width: 160px;
}
.colorLabel {
background-color: #F4F8EB;
}
.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;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}