You can change the position and size of the floating object. The position and size can be set in two different ways:
Sometimes you will resize the row's height or the column's width, and you don't want the position or size of the floating object to change. In that case, use the dynamicMove and dynamicSize methods. For example:
Note that if the dynamicMove method is false and the dynamicSize method is true, neither has an effect.
If you do not want the floating object to change based on UI interaction, use the isLocked method to lock it. If you want to lock it, first lock the sheet.
When one floating object overlaps another, you can change the order from top to bottom using the zIndex method. For example:
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 charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.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;
}
