自定制浮动对象元素

你可以定制浮动对象元素, 比如改变位置、大小等。

位置和大小可以通过两种方式来定制。 比如: 如果你在调整行高或者列宽的时候, 不想要浮动对象元素的位置以及大小跟着调整, 你可以使用 dynamicMove 和 dynamicSize 方法来设置,例如: 如果浮动对象元素的 dynamicMove 设置是 false 并且 dynamicSize 设置是 true,则不会有任何影响。 如果你不想要用户通过用户界面来改变浮动对象元素,你可以使用 isLocked 方法来锁定它。 不过在锁定浮动对象元素之前,你需要锁定表单。 当浮动对象元素互相叠加的时候,你可以通过 zIndex 来设置浮动对象元素的层叠顺序。
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); 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 = "I'm a Div.<div style='border: 1px solid red; width: 80%; margin:auto;'><span>I'm a span</span></div>" div.style.background = 'mintcream'; div.style.border = '1px solid green'; customFloatingObject.content(div); sheet.floatingObjects.add(customFloatingObject); sheet.resumePaint(); document.getElementById('isSheetProtected').onchange = function () { var sheet = spread.getActiveSheet(); sheet.options.isProtected = this.checked; }; document.getElementById('isLocked').onchange = function () { var sheet = spread.getActiveSheet(); var floatingObjects = _concat(sheet); if (floatingObjects) { var value = this.checked; for (var index = 0; index < floatingObjects.length; index++) { if (floatingObjects[index].isSelected()) { floatingObjects[index].isLocked(value); } } } }; document.getElementById('isVisible').onchange = function () { var sheet = spread.getActiveSheet(); var floatingObjects = _concat(sheet); if (floatingObjects) { var value = this.checked; for (var index = 0; index < floatingObjects.length; index++) { if (floatingObjects[index].isSelected()) { floatingObjects[index].isVisible(value); } } } }; document.getElementById('dynamicMove').onchange = function () { var sheet = spread.getActiveSheet(); var floatingObjects = _concat(sheet); if (floatingObjects) { var value = this.checked; for (var index = 0; index < floatingObjects.length; index++) { if (floatingObjects[index].isSelected()) { floatingObjects[index].dynamicMove(value); } } } }; document.getElementById('dynamicSize').onchange = function () { var sheet = spread.getActiveSheet(); var floatingObjects = _concat(sheet); if (floatingObjects) { var value = this.checked; for (var index = 0; index < floatingObjects.length; index++) { if (floatingObjects[index].isSelected()) { floatingObjects[index].dynamicSize(value); } } } }; document.getElementById('moveFloatingObject').onclick = function () { var sheet = spread.getActiveSheet(); var floatingObjects = _concat(sheet); var row = parseInt(document.getElementById('moveRow').value); var col = parseInt(document.getElementById('moveColumn').value); if (!isNaN(row) && !isNaN(col)) { if (floatingObjects) { for (var index = 0, len = floatingObjects.length; index < len; index++) { var fo = floatingObjects[index]; if (fo.isSelected()) { fo.startRow(row); fo.startColumn(col); fo.startRowOffset(0); fo.startColumnOffset(0); } } } } sheet.repaint(); }; document.getElementById('resizeFloatingObject').onclick = function () { var sheet = spread.getActiveSheet(); var floatingObjects = _concat(sheet); var width = parseFloat(document.getElementById('resizeWidth').value); var height = parseFloat(document.getElementById('resizeHeight').value); if (!isNaN(width) && !isNaN(height) && width > 0 && height > 0) { if (floatingObjects) { for (var index = 0, len = floatingObjects.length; index < len; index++) { var fo = floatingObjects[index]; if (fo.isSelected()) { fo.width(width); fo.height(height); } } } } sheet.repaint(); }; document.getElementById('bringToForward').onclick = function () { var sheet = spread.getActiveSheet(); var floatingObjects = _concat(sheet); var maxZIndex = 0, selectedCount = 0, selectedName = null; if (floatingObjects) { for (var index = 0, len = floatingObjects.length; index < len; index++) { var fo = floatingObjects[index]; if (!fo || !fo.name || !fo.isSelected) { continue; } var zIndex = sheet.floatingObjects.zIndex(fo.name()); if (zIndex > maxZIndex) { maxZIndex = zIndex; } if (fo.isSelected()) { selectedCount++; selectedName = fo.name(); } } if (selectedCount === 1) { sheet.floatingObjects.zIndex(selectedName, maxZIndex + 1); } } }; }; function _concat(sheet) { if (sheet) { var customFloatingObjects = sheet.floatingObjects.all(); var pictures = sheet.pictures.all(); return pictures.concat(customFloatingObjects); } return []; }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta name="spreadjs culture" content="zh-cn" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.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" class="sample-spreadsheets"></div> <div class="options-container"> <div class="option-row"> <p class="desc">Select the floating object in the Spread component and change it using these options</p> </div> <div class="option-row"> <input type="checkbox" id="isSheetProtected" /> <label for="isSheetProtected">IsSheetProtected</label> </div> <div class="option-row"> <input type="checkbox" id="isLocked" checked /> <label for="isLocked">IsLocked</label> </div> <div class="option-row"> <input type="checkbox" id="isVisible" checked /> <label for="isVisible">IsVisible</label> </div> <div class="option-row"> <input type="checkbox" id="dynamicSize" checked /> <label for="dynamicSize">DynamicSize</label> </div> <div class="option-row"> <input type="checkbox" id="dynamicMove" checked /> <label for="dynamicMove">DynamicMove</label> <hr> </div> <div class="option-row"> <label for="moveRow">Row:</label> <input type="text" id="moveRow" /> <label for="moveColumn">Column:</label> <input type="text" id="moveColumn" /> <input type="button" id="moveFloatingObject" value="Move floating Object" /> </div> <hr> <div class="option-row"> <label for="resizeWidth">Width:</label> <input type="text" id="resizeWidth" /> <label for="resizeHeight">Height:</label> <input type="text" id="resizeHeight" /> <input type="button" id="resizeFloatingObject" value="Resize floating object" /> </div> <hr> <div class="option-row"> <input type="button" id="bringToForward" value="Bring Forward" /> </div> </div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; padding: 5px; } input, select { padding: 4px 6px; width: 100%; box-sizing: border-box; } input[type=checkbox] { width: auto; } label { display: inline-block; min-width: 70px; margin: 6px 0; } hr { border-color: #fff; opacity: .2; margin: 12px 0; } input[type=button] { margin-top: 6px; } .desc{ padding:2px 10px; background-color:#F4F8EB; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }