소개

SpreadJS에서 움직이는 개체를 시트에 추가할 수 있습니다. 움직이는 개체가 셀의 맨 위에 표시됩니다.

두 가지 움직이는 개체가 있습니다: FloatingObject 및 Picture. FloatingObject: 사용자가 HTMLElement 콘텐츠를 사용자 정의할 수 있도록 콘텐츠 속성을 표시합니다. Picture: Excel 그림 기능과 비슷한 기본 그림 기능을 제공하는 일부 기본 그램 속성을 표시합니다. FloatingObject를 시트에 추가하려면 FloatingObject 개체를 사용하고 add 메서드를 사용하여 시트에 추가합니다. 예: 사용자 정의 움직이는 개체를 추가한 후 이 개체를 사용하여 작업할 수 있습니다. get 메서드를 사용하여 이름으로 가져오거나 all 메서드를 사용하여 모든 FloatingObject 개체를 가져옵니다. 필요하지 않으면 remove 메서드를 호출하여 이름으로 제거합니다. 시트에 Picture를 추가하려면 add 메서드를 사용할 수 있습니다. 예: 그림을 추가한 후 그림 작업을 할 수 있습니다. get 메서드를 사용하여 이름으로 가져오거나 all 메서드를 사용하여 모든 Picture 개체를 가져옵니다. 필요하지 않으면 remove 메서드를 호출하여 이름으로 제거합니다. FloatingObject와 Picture는 모두 움직이는 개체입니다. 이들은 셀의 위쪽에서 움직입니다. 그러나 다른 개체의 위에 있는 움직이는 개체가 있는 경우, 위쪽 개체 위에 아래쪽 개체를 올려놓을 수도 있습니다. zIndex 메서드를 사용하여 움직이는 개체의 z-인덱스를 설정합니다. 예:
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="ko-kr"/> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ko/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@grapecity/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.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; }