自定义浮动对象

概述本 Demo 展示了如何创建和自定义浮动对象，以及如何通过代码控制浮动对象的各种属性。Demo 创建了一个包含 HTML 内容的浮动对象，并提供了交互界面让用户实时调整浮动对象的位置、大小、可见性、锁定状态、动态移动和动态大小等属性。实现思路创建浮动对象实例，设置其起始和结束的行列位置创建 HTML div 元素作为浮动对象的内容将浮动对象添加到工作表为各种控制选项添加事件监听器，实时修改浮动对象属性提供移动、调整大小和改变层叠顺序的功能按钮代码解析创建浮动对象并设置内容这段代码创建了一个名为 "f0" 的浮动对象。使用 startRow()、startColumn()、endRow()、endColumn() 方法设置浮动对象占据从第 1 行第 1 列到第 6 行第 6 列的区域。然后创建一个 div 元素，设置 HTML 内容和样式，通过 content() 方法将其设置为浮动对象的内容。最后使用 sheet.floatingObjects.add() 将浮动对象添加到工作表。控制浮动对象的锁定和可见性这段代码监听锁定复选框的变化。当用户勾选时，遍历所有浮动对象，找到被选中的浮动对象并设置其 isLocked 属性。需要注意的是，isLocked 方法需要配合工作表保护 (sheet.options.isProtected = true) 才能生效。移动浮动对象位置这段代码通过 startRow() 和 startColumn() 方法改变浮动对象的起始位置。startRowOffset() 和 startColumnOffset() 方法用于设置偏移量，这里设置为 0 表示从单元格左上角开始。调整浮动对象层叠顺序这段代码实现了将选中的浮动对象置于顶层的功能。首先遍历所有浮动对象找到最大的 z-index 值，然后将选中浮动对象的 z-index 设置为最大值加 1。sheet.floatingObjects.zIndex(name, value) 方法的第一个参数是浮动对象的名称，第二个参数是要设置的 z-index 值。运行效果页面加载后，工作表中会显示一个自定义的浮动对象，包含带有样式的 div 和 span 元素点击浮动对象可以选中它，然后通过右侧面板的复选框控制其锁定、可见性、动态移动、动态大小等属性在"行"和"列"输入框中输入数字，点击"移动浮动对象"按钮可以改变浮动对象的位置在"宽度"和"高度"输入框中输入数字，点击"调整浮动对象大小"按钮可以改变浮动对象的尺寸点击"置于顶层"按钮可以将选中的浮动对象提升到所有浮动对象的最上层勾选"工作表保护"后，锁定的浮动对象将无法通过用户界面进行移动或调整大小操作 API 参考 FloatingObject 构造函数 name：浮动对象的名称 x、y：可选，浮动对象的起始坐标位置 width、height：可选，浮动对象的宽度和高度主要方法 startRow(row)：设置浮动对象起始行 startColumn(col)：设置浮动对象起始列 startRowOffset(offset)：设置起始行的偏移量 startColumnOffset(offset)：设置起始列的偏移量 endRow(row)：设置浮动对象结束行 endColumn(col)：设置浮动对象结束列 content(element)：设置浮动对象的 HTML 内容 dynamicMove(value)：设置是否随行列移动 dynamicSize(value)：设置是否随行列调整大小 isLocked(value)：设置是否锁定（需配合工作表保护） isVisible(value)：设置是否可见 width(width)：设置宽度 height(height)：设置高度 FloatingObjectCollection 方法 add(floatingObject)：添加浮动对象到工作表 zIndex(name, value?)：获取或设置浮动对象的层叠顺序 all()：获取工作表中所有浮动对象

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 = "我是一个 Div。<div style='border: 1px solid red; width: 80%; margin:auto;'><span>我是一个 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="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.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">在 Spread 组件中选择浮动对象，并使用以下选项进行修改</p>
</div>
<div class="option-row">
<input type="checkbox" id="isSheetProtected" />
<label for="isSheetProtected">工作表保护</label>
</div>
<div class="option-row">
<input type="checkbox" id="isLocked" checked />
<label for="isLocked">锁定</label>
</div>
<div class="option-row">
<input type="checkbox" id="isVisible" checked />
<label for="isVisible">可见</label>
</div>
<div class="option-row">
<input type="checkbox" id="dynamicSize" checked />
<label for="dynamicSize">动态大小</label>
</div>
<div class="option-row">
<input type="checkbox" id="dynamicMove" checked />
<label for="dynamicMove">动态移动</label>
<hr>
</div>
<div class="option-row">
<label for="moveRow">行：</label>
<input type="text" id="moveRow" />
<label for="moveColumn">列：</label>
<input type="text" id="moveColumn" />
<input type="button" id="moveFloatingObject" value="移动浮动对象" />
</div>
<hr>
<div class="option-row">
<label for="resizeWidth">宽度：</label>
<input type="text" id="resizeWidth" />
<label for="resizeHeight">高度：</label>
<input type="text" id="resizeHeight" />
<input type="button" id="resizeFloatingObject" value="调整浮动对象大小" />
</div>
<hr>
<div class="option-row">
<input type="button" id="bringToForward" value="置于顶层" />
</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;
}

SpreadJS 在线示例