움직이는 개체의 위치와 크기를 변경할 수 있습니다. 위치와 크기는 두 가지 다른 방법으로 설정할 수 있습니다. 예:
행 높이 또는 열 너비의 크기를 조정할 것이므로 움직이는 개체의 위치나 크기를 변경하지 않아도 되는 경우가 있습니다. 이 경우, dynamicMove와 dynamicSize 메서드를 사용합니다. 예:
dynamicMove 메서드가 false이고 dynamicSize 메서드가 true이면 둘 다 아무런 효과가 없습니다.
UI 상호 작용에 따라 움직이는 개체를 변경하지 않으려면 isLocked 메서드를 사용하여 해당 개체를 잠급니다. 잠그려면 먼저 시트를 잠급니다.
하나의 움직이는 개체가 다른 개체와 겹치면 zIndex 메서드를 사용하여 순서를 위에서 아래로 변경할 수 있습니다. 예:
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
initSpread(spread);
};
function initSpread(spread) {
var spreadNS = GC.Spread.Sheets;
var sheet = spread.getSheet(0);
sheet.suspendPaint();
var customFloatingObject = new spreadNS.FloatingObjects.FloatingObject("f0");
customFloatingObject.startRow(1);
customFloatingObject.startColumn(1);
customFloatingObject.endColumn(6);
customFloatingObject.endRow(6);
var div = document.createElement('div');
div.innerHTML = "I'm a Div.<div style='border: 1px solid red; width: 80%; margin:auto;'><span>I'm a span</span></div>"
div.style.background = 'mintcream';
div.style.border = '1px solid green';
customFloatingObject.content(div);
sheet.floatingObjects.add(customFloatingObject);
sheet.resumePaint();
document.getElementById('isSheetProtected').onchange = function () {
var sheet = spread.getActiveSheet();
sheet.options.isProtected = this.checked;
};
document.getElementById('isLocked').onchange = function () {
var sheet = spread.getActiveSheet();
var floatingObjects = _concat(sheet);
if (floatingObjects) {
var value = this.checked;
for (var index = 0; index < floatingObjects.length; index++) {
if (floatingObjects[index].isSelected()) {
floatingObjects[index].isLocked(value);
}
}
}
};
document.getElementById('isVisible').onchange = function () {
var sheet = spread.getActiveSheet();
var floatingObjects = _concat(sheet);
if (floatingObjects) {
var value = this.checked;
for (var index = 0; index < floatingObjects.length; index++) {
if (floatingObjects[index].isSelected()) {
floatingObjects[index].isVisible(value);
}
}
}
};
document.getElementById('dynamicMove').onchange = function () {
var sheet = spread.getActiveSheet();
var floatingObjects = _concat(sheet);
if (floatingObjects) {
var value = this.checked;
for (var index = 0; index < floatingObjects.length; index++) {
if (floatingObjects[index].isSelected()) {
floatingObjects[index].dynamicMove(value);
}
}
}
};
document.getElementById('dynamicSize').onchange = function () {
var sheet = spread.getActiveSheet();
var floatingObjects = _concat(sheet);
if (floatingObjects) {
var value = this.checked;
for (var index = 0; index < floatingObjects.length; index++) {
if (floatingObjects[index].isSelected()) {
floatingObjects[index].dynamicSize(value);
}
}
}
};
document.getElementById('moveFloatingObject').onclick = function () {
var sheet = spread.getActiveSheet();
var floatingObjects = _concat(sheet);
var row = parseInt(document.getElementById('moveRow').value);
var col = parseInt(document.getElementById('moveColumn').value);
if (!isNaN(row) && !isNaN(col)) {
if (floatingObjects) {
for (var index = 0, len = floatingObjects.length; index < len; index++) {
var fo = floatingObjects[index];
if (fo.isSelected()) {
fo.startRow(row);
fo.startColumn(col);
fo.startRowOffset(0);
fo.startColumnOffset(0);
}
}
}
}
sheet.repaint();
};
document.getElementById('resizeFloatingObject').onclick = function () {
var sheet = spread.getActiveSheet();
var floatingObjects = _concat(sheet);
var width = parseFloat(document.getElementById('resizeWidth').value);
var height = parseFloat(document.getElementById('resizeHeight').value);
if (!isNaN(width) && !isNaN(height) && width > 0 && height > 0) {
if (floatingObjects) {
for (var index = 0, len = floatingObjects.length; index < len; index++) {
var fo = floatingObjects[index];
if (fo.isSelected()) {
fo.width(width);
fo.height(height);
}
}
}
}
sheet.repaint();
};
document.getElementById('bringToForward').onclick = function () {
var sheet = spread.getActiveSheet();
var floatingObjects = _concat(sheet);
var maxZIndex = 0, selectedCount = 0, selectedName = null;
if (floatingObjects) {
for (var index = 0, len = floatingObjects.length; index < len; index++) {
var fo = floatingObjects[index];
if (!fo || !fo.name || !fo.isSelected) {
continue;
}
var zIndex = sheet.floatingObjects.zIndex(fo.name());
if (zIndex > maxZIndex) {
maxZIndex = zIndex;
}
if (fo.isSelected()) {
selectedCount++;
selectedName = fo.name();
}
}
if (selectedCount === 1) {
sheet.floatingObjects.zIndex(selectedName, maxZIndex + 1);
}
}
};
};
function _concat(sheet) {
if (sheet) {
var customFloatingObjects = sheet.floatingObjects.all();
var pictures = sheet.pictures.all();
return pictures.concat(customFloatingObjects);
}
return [];
}
<!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$/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">
<p class="desc">Select the floating object in the Spread component and change it using these options</p>
</div>
<div class="option-row">
<input type="checkbox" id="isSheetProtected" />
<label for="isSheetProtected">IsSheetProtected</label>
</div>
<div class="option-row">
<input type="checkbox" id="isLocked" checked />
<label for="isLocked">IsLocked</label>
</div>
<div class="option-row">
<input type="checkbox" id="isVisible" checked />
<label for="isVisible">IsVisible</label>
</div>
<div class="option-row">
<input type="checkbox" id="dynamicSize" checked />
<label for="dynamicSize">DynamicSize</label>
</div>
<div class="option-row">
<input type="checkbox" id="dynamicMove" checked />
<label for="dynamicMove">DynamicMove</label>
<hr>
</div>
<div class="option-row">
<label for="moveRow">Row:</label>
<input type="text" id="moveRow" />
<label for="moveColumn">Column:</label>
<input type="text" id="moveColumn" />
<input type="button" id="moveFloatingObject" value="Move floating Object" />
</div>
<hr>
<div class="option-row">
<label for="resizeWidth">Width:</label>
<input type="text" id="resizeWidth" />
<label for="resizeHeight">Height:</label>
<input type="text" id="resizeHeight" />
<input type="button" id="resizeFloatingObject" value="Resize floating object" />
</div>
<hr>
<div class="option-row">
<input type="button" id="bringToForward" value="Bring Forward" />
</div>
</div>
</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;
}
.option-row {
font-size: 14px;
padding: 5px;
}
input, select {
padding: 4px 6px;
width: 100%;
box-sizing: border-box;
}
input[type=checkbox] {
width: auto;
}
label {
display: inline-block;
min-width: 70px;
margin: 6px 0;
}
hr {
border-color: #fff;
opacity: .2;
margin: 12px 0;
}
input[type=button] {
margin-top: 6px;
}
.desc{
padding:2px 10px;
background-color:#F4F8EB;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}