Overview

In SpreadJS, you can add a floating object to the sheet. The floating object is displayed on the top of the cells.

<p>There are two kinds of floating objects: FloatingObject and Picture.</p> <ul> <li><strong>FloatingObject: Exposes a content property so that the user can customize the HTMLElement content.</strong></li> <li><strong>Picture: Exposes some basic picture properties that provide a basic Picture function similar to the Excel Picture feature.</strong></li> </ul> <p>To add a FloatingObject to the sheet, you need to create a <strong>FloatingObject</strong> object and use the <strong>add</strong> method to add it to the sheet. For example:</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> customFloatingObject = <span class="hljs-keyword">new</span> GC.Spread.Sheets.FloatingObjects.FloatingObject(<span class="hljs-string">'f1'</span>); customFloatingObject.startRow(<span class="hljs-number">1</span>); customFloatingObject.startColumn(<span class="hljs-number">1</span>); customFloatingObject.endColumn(<span class="hljs-number">6</span>); customFloatingObject.endRow(<span class="hljs-number">6</span>); <span class="hljs-keyword">var</span> div = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">'div'</span>); div.innerHTML = <span class="hljs-string">'&lt;span&gt;SpreadJS supports FloatingObject&lt;/span&gt;'</span> + <span class="hljs-string">'&lt;div style='</span>border: <span class="hljs-number">1</span>px dotted red; width: <span class="hljs-number">80</span>%; margin:auto;<span class="hljs-string">'&gt;'</span> + <span class="hljs-string">'&lt;ul&gt;&lt;li&gt;I am list one.&lt;/li&gt;&lt;li&gt;I am list two.&lt;/li&gt;&lt;li&gt;I am list three.&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;'</span>; customFloatingObject.content(div); sheet.floatingObjects.add(customFloatingObject); </code></pre> <p>After you add the custom floating object, you might want to work with it. Use the <strong>get</strong> method to get it by name, or use the <strong>all</strong> method to get all the FloatingObject objects. When you do not need it, you can use the <strong>remove</strong> method to remove it by name.</p> <p>If you want to add a Picture to the sheet, you can use the <strong>add</strong> method. For example:</p> <pre><code class="hljs js language-js"> sheet.pictures.add(<span class="hljs-string">'f2'</span>, <span class="hljs-string">'images/splogo.png'</span>, <span class="hljs-number">62</span>, <span class="hljs-number">140</span>, <span class="hljs-number">180</span>, <span class="hljs-number">200</span>); <span class="hljs-keyword">var</span> pic = sheet.pictures.get(<span class="hljs-string">'f2'</span>); sheet.pictures.remove(<span class="hljs-string">'f2'</span>); </code></pre> <p>After you add the picture, you might want to work with it. Use the <strong>get</strong> method to get it by name or use the <strong>all</strong> method to get all the Picture objects. When you do not need it, you can use the <strong>remove</strong> method to remove it by name.</p> <p>Both FloatingObject and Picture are floating objects. They are floated on the top of cells, but if there is a floating object that is on top of another one, you might want to put the lower one on top of the upper one. Use the <strong>zIndex</strong> method to set the <em>z</em>-index of the floating object. For example:</p> <pre><code class="hljs js language-js"> sheet.floatingObjects.zIndex(<span class="hljs-string">'f1'</span>, <span class="hljs-number">2000</span>); sheet.pictures.zIndex(<span class="hljs-string">'f2'</span>, <span class="hljs-number">2001</span>); </code></pre>
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 2}); 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 = "<span>SpreadJS support FloatingObject.</span><div style='border: 1px dotted red; width: 80%; margin:auto;'><ul><li>I am list one.</li><li>I am list two.</li><li>I am list three.</li></ul></div>"; div.style.background = 'gray'; customFloatingObject.content(div); sheet.floatingObjects.add(customFloatingObject); sheet.pictures.add("f2", "$DEMOROOT$/spread/source/images/splogo.png", 62, 140, 180, 200); sheet.resumePaint(); };
<!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/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/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" 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; }