概要と基本的な使い方
SpreadJSでは、シートにフローティングオブジェクトを追加できます。フローティングオブジェクトは、セル上に重ねて表示されます。
フローティングオブジェクトには、FloatingObjectとPictureの2種類があります。
- FloatingObject: contentプロパティを公開することで、HTMLElementコンテンツのカスタマイズを可能にします。
- Picture: ExcelのPicture機能と同様の、基本的なピクチャ機能を提供するいくつかの基本的なピクチャプロパティを公開します。
FloatingObjectをシートに追加するには、まずFloatingObjectオブジェクトを作成してから、addメソッドを使用して、このオブジェクトをシートに追加します。次に、例を示します。
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject('f1');
customFloatingObject.startRow(1);
customFloatingObject.startColumn(1);
customFloatingObject.endColumn(6);
customFloatingObject.endRow(6);
var div = document.createElement('div');
div.innerHTML = '<span>SpreadJS supports 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>';
customFloatingObject.content(div);
sheet.floatingObjects.add(customFloatingObject);
カスタムフローティングオブジェクトを追加した後は、必要に応じてこのオブジェクトを処理できます。名前を指定してフローティングオブジェクトを取得するには、getメソッドを使用します。allメソッドを使用すると、すべてのカスタムフローティングオブジェクトを取得できます。不要になったカスタムフローティングオブジェクトは、名前を指定してremoveメソッドを実行することで削除できます。
Pictureをシートに追加するには、addメソッドを使用して、ピクチャをシートに追加します。次に、例を示します。
var floatingObject = sheet.floatingObjects.get('f1');
sheet.floatingObjects.remove('f1');
Pictureオブジェクトを追加した後は、必要に応じてこのオブジェクトを処理できます。名前を指定してPictureオブジェクトを取得するには、getメソッドを使用します。allメソッドを使用すると、すべてのPictureオブジェクトを取得できます。不要になったPictureオブジェクトは、名前を指定してremoveメソッドを実行することで削除できます。
FloatingObjectとPictureはどちらもフローティングオブジェクトです。フローティングオブジェクトはセルの前面に表示されますが、フローティングオブジェクトどうしが重なり合っている場合、これらの前後関係を変更することもできます。フローティングオブジェクトのzインデックスを設定するには、zIndexメソッドを使用します。次に例を示します。
sheet.floatingObjects.zIndex('f1', 2000);