轉(zhuǎn)帖|使用教程|編輯:鮑佳佳|2020-07-31 09:28:00.480|閱讀 272 次
概述:文章主要是關(guān)于在電子表格控件SpreadJS中如何創(chuàng)建自定義浮動對象元素的一個詳細說明以及如何對創(chuàng)建的對象進行操作,如何創(chuàng)建浮動圖片等。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
SpreadJS是一款基于 HTML5 的純前端電子表格控件,兼容 450 種以上的 Excel 公式,憑借其 “高性能、跨平臺、與 Excel 高度兼容”的產(chǎn)品特性,備受以華為、蘇寧易購、天弘基金等為代表的企業(yè)用戶青睞。SpreadJS 為用戶帶來親切的 Excel 使用體驗的同時,滿足 Web Excel 組件開發(fā)、表格文檔協(xié)同編輯、數(shù)據(jù)填報、Excel 類報表設(shè)計等業(yè)務(wù)場景,極大降低了企業(yè)研發(fā)成本和項目交付風(fēng)險。
你可以在頁面上創(chuàng)建自定義浮動對象元素。
你可以在浮動對象元素中放置一個 HTML 元素,下圖演示了,在浮動對象元素中放置一個 HTML 的按鈕:
你可以設(shè)定浮動對象元素是否可見(isVisible)或者鎖定(isLocked)。isLocked方法僅在表格受保護的時候可用。當行和列調(diào)節(jié)大小時,浮動對象元素的位置和大小會隨著變化。當然,你可以使用dynamicMove方法來固定該元素的位置,使用 dynamicSize方法來固定元素的大小。
fixedPosition方法為true時,dynamicMove和dynamicSize方法將會被禁用。此時,元素的位置將會固定在視口中保持不變,即不會隨視口滾動,行和列的隱藏、顯示、調(diào)整大小和移動的改變而改變,并且可以使用使用鼠標改變其位置和大小。
以下屬性會正常工作,不會受到fixedPosition方法的影響
你可以使用鼠標拖動來改變元素的位置,或者調(diào)整元素的大小。 你也可以使用 x, 和 y方法來設(shè)置元素的尺寸和位置。 你可以使startColumn和方法通過單元格來定位元素。你也可以使用startColumnOffset和startRowOffset方法設(shè)置元素與 起始行(Start Row)和起始列(Start Column的距離。同樣道理, endColumn, endRow, endColumnOffset,和endRowOffset 方法你也可以使用。
下圖展示了 startColumn, startRow,startColumnOffset和startColumn,startRow,startColumnOffset 分別代表了哪些值:
你可以通過鼠標左鍵或右鍵選擇浮動對象元素,同時我們也提供了 isSelected方法供你使用。
你可以使用 Tab 鍵或者 Shift + Tab 鍵在不同的浮動對象元素之間進行切換。
你可以按住 Ctrl +鼠標左鍵或者 Shift來進行對浮動對象元素的多選。
你可以通過快捷鍵對浮動對象元素進行剪切, 復(fù)制和粘貼;同時你也可以撤銷和重做你對浮動對象元素的操作。
示例代碼
以下代碼在表格中加入了一個浮動對象元素。
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 10, 10, 60, 64); var btn = document.createElement('button'); btn.style.width = "60px"; btn.style.height = "30px"; btn.innerText = "button"; customFloatingObject.content(btn); activeSheet.floatingObjects.add(customFloatingObject);
你可以給 Spread.Sheets 創(chuàng)建浮動圖片,如下圖所示:
你可以使用Picture類來設(shè)置浮動圖片的設(shè)置背景顏色,邊框和拉伸
你可以使用鼠標左鍵和右鍵來選中浮動圖片。
你可以使用 Tab 和 Shift + Tab 在多個浮動圖片中切換選中狀態(tài)。
你可以使用 Ctrl + 鼠標左鍵 或者 Shift + 鼠標左鍵進行多選。
你可以使用快捷鍵剪切,復(fù)制和粘貼浮動圖片,當然,該操作可以被撤銷和重做。
示例代碼
以下代碼使用 pictures.add方法創(chuàng)建了一個浮動圖片:
activeSheet.pictures.add("f2","tsoutline.png",100,60,200,100);
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉(zhuǎn)載自: