浮动对象基本应用

SpreadJS 支持在工作表中添加浮动对象,浮动对象可以覆盖在单元格上方显示自定义的 HTML 内容。通过浮动对象,可以在表格中嵌入自定义的交互元素、提示信息或装饰性内容,丰富表格的展示效果。

概述 本 Demo 展示了如何在 SpreadJS 工作表中创建和添加自定义浮动对象。浮动对象是一个可以覆盖在单元格上方的自定义 HTML 容器,可以包含任意 HTML 元素,用于在表格中展示自定义内容或交互控件。 实现思路 创建 FloatingObject 实例,指定名称、初始位置和尺寸 通过 startRow、startColumn、endRow、endColumn 方法设置浮动对象的单元格锚点位置 创建自定义的 HTML div 元素作为浮动对象的内容 使用 content 方法将 HTML 元素设置为浮动对象的内容 通过 floatingObjects.add 方法将浮动对象添加到工作表 代码解析 创建浮动对象实例 构造函数创建一个名为 "f1" 的浮动对象,初始位置为 (10, 10),宽度为 60 像素,高度为 64 像素。 设置浮动对象的位置 通过 startRow 和 startColumn 设置浮动对象左上角的锚点位置(第 1 行第 1 列),通过 endRow 和 endColumn 设置右下角的锚点位置(第 6 行第 6 列)。浮动对象会根据这些锚点自动调整位置。 设置浮动对象的内容 创建一个 HTML div 元素,设置其内容为一个标题和包含列表项的嵌套 div,并设置背景色为 LightGray。然后通过 content 方法将这个 div 设置为浮动对象的内容。 添加浮动对象到工作表 调用工作表的 floatingObjects.add 方法,将创建好的浮动对象添加到工作表中。 运行效果 工作表中会显示一个灰色背景的浮动区域 浮动对象位于第 1 行第 1 列到第 6 行第 6 列的范围内 浮动对象包含标题文本 "SpreadJS 支持浮动对象" 和一个带边框的列表区域 列表中显示 "第一项" 和 "第二项" 两个列表项 浮动对象覆盖在单元格上方,不影响下方单元格的数据 API 参考 FloatingObject 构造函数 name:浮动对象的名称(字符串) x、y:初始位置(像素) width、height:尺寸(像素) 位置设置方法 startRow(value?):获取或设置起始行索引 startColumn(value?):获取或设置起始列索引 endRow(value?):获取或设置结束行索引 endColumn(value?):获取或设置结束列索引 内容设置方法 content(value?):获取或设置浮动对象的 HTML 内容
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 }); initSpread(spread); }; function initSpread(spread) { var spreadNS = GC.Spread.Sheets; var sheet = spread.getSheet(0); sheet.suspendPaint(); var customFloatingObject = new spreadNS.FloatingObjects.FloatingObject("f1",10, 10, 60, 64); customFloatingObject.startRow(1); customFloatingObject.startColumn(1); customFloatingObject.endColumn(6); customFloatingObject.endRow(6); var div = document.createElement('div'); div.innerHTML = "<span> SpreadJS 支持浮动对象。</span><div style='border: 1px dotted gray; width: 60%; height:70%; margin:auto;'><ul><li>第一项</li></ul><ul><li>第二项</li></ul></div>"; div.style.background = 'LightGray'; customFloatingObject.content(div); sheet.floatingObjects.add(customFloatingObject); sheet.resumePaint(); };
<!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" style="width:100%; height:100%;"></div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }