概要と基本的な使い方

SpreadJSでは、シートにフローティングオブジェクトを追加できます。フローティングオブジェクトは、セル上に重ねて表示されます。

<p>フローティングオブジェクトには、FloatingObjectとPictureの2種類があります。</p> <ul> <li><strong>FloatingObject: contentプロパティを公開することで、HTMLElementコンテンツのカスタマイズを可能にします。</strong></li> <li><strong>Picture: ExcelのPicture機能と同様の、基本的なピクチャ機能を提供するいくつかの基本的なピクチャプロパティを公開します。</strong></li> </ul> <p>FloatingObjectをシートに追加するには、まず<strong>FloatingObject</strong>オブジェクトを作成してから、<strong>add</strong>メソッドを使用して、このオブジェクトをシートに追加します。次に、例を示します。</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>カスタムフローティングオブジェクトを追加した後は、必要に応じてこのオブジェクトを処理できます。名前を指定してフローティングオブジェクトを取得するには、<strong>get</strong>メソッドを使用します。<strong>all</strong>メソッドを使用すると、すべてのカスタムフローティングオブジェクトを取得できます。不要になったカスタムフローティングオブジェクトは、名前を指定して<strong>remove</strong>メソッドを実行することで削除できます。</p> <p>Pictureをシートに追加するには、<strong>add</strong>メソッドを使用して、ピクチャをシートに追加します。次に、例を示します。</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>Pictureオブジェクトを追加した後は、必要に応じてこのオブジェクトを処理できます。名前を指定してPictureオブジェクトを取得するには、<strong>get</strong>メソッドを使用します。<strong>all</strong>メソッドを使用すると、すべてのPictureオブジェクトを取得できます。不要になったPictureオブジェクトは、名前を指定して<strong>remove</strong>メソッドを実行することで削除できます。</p> <p>FloatingObjectとPictureはどちらもフローティングオブジェクトです。フローティングオブジェクトはセルの前面に表示されますが、フローティングオブジェクトどうしが重なり合っている場合、これらの前後関係を変更することもできます。フローティングオブジェクトの<em>z</em>インデックスを設定するには、<strong>zIndex</strong>メソッドを使用します。次に例を示します。</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 name="spreadjs culture" content="ja-jp" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.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; }