FloatingObject: 사용자가 HTMLElement 콘텐츠를 사용자 정의할 수 있도록 콘텐츠 속성을 표시합니다.
움직이는개체를 시트에 추가하려면 FloatingObject 개체를 사용하고 add 메서드를 사용하여 시트에 추가합니다. 예는 다음과 같습니다.
사용자 정의된 움직이는 개체를 추가한 후 이 개체를 사용하여 작업할 수 있습니다. get 메서드를 사용하여 이름으로 가져오거나 all 메서드를 사용하여 모든 움직이는 개체를 가져옵니다. 필요하지 않으면 remove 메서드를 호출하여 이름으로 제거합니다.
예는 다음과 같습니다.
움직이는 개체는 셀의 위쪽에서 움직입니다. 그러나 다른 개체 위에 움직이는 개체가 있는 경우, 위쪽 개체 위에 아래쪽 개체를 올려놓을 수도 있습니다. zIndex 메서드를 사용하여 움직이는 개체의 z-인덱스를 설정합니다. 예는 다음과 같습니다.
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 supports FloatingObject.</span><div style='border: 1px dotted gray; width: 60%; height:70%; margin:auto;'><ul><li>First list</li></ul><ul><li>Second list</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="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/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/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;
}