SpreadJS使用教程：如何定制外观创建浮动样式

文章主要是关于在电子表格控件SpreadJS中如何创建自定义浮动对象元素的一个详细说明以及如何对创建的对象进行操作，如何创建浮动图片等。

SpreadJS最新试用版

你可以在页面上创建自定义浮动对象元素。

你可以在浮动对象元素中放置一个 HTML 元素，下图演示了，在浮动对象元素中放置一个 HTML 的按钮：

你可以设定浮动对象元素是否可见（isVisible）或者锁定（isLocked）。isLocked方法仅在表格受保护的时候可用。当行和列调节大小时，浮动对象元素的位置和大小会随着变化。当然，你可以使用dynamicMove方法来固定该元素的位置，使用 dynamicSize方法来固定元素的大小。

fixedPosition方法为true时，dynamicMove和dynamicSize方法将会被禁用。此时，元素的位置将会固定在视口中保持不变，即不会随视口滚动，行和列的隐藏、显示、调整大小和移动的改变而改变，并且可以使用使用鼠标改变其位置和大小。

以下属性会正常工作，不会受到fixedPosition方法的影响

• endColumn
• endColumnOffset
• endRow
• endRowOffset
• height
• startColumn
• startColumnOffset
• startRow
• startRowOffset
• width
• x
• y

你可以使用鼠标拖动来改变元素的位置，或者调整元素的大小。 你也可以使用 x, 和 y方法来设置元素的尺寸和位置。 你可以使startColumn和方法通过单元格来定位元素。你也可以使用startColumnOffset和startRowOffset方法设置元素与 起始行（Start Row）和起始列（Start Column的距离。同样道理， endColumn, endRow, endColumnOffset,和endRowOffset 方法你也可以使用。

下图展示了 startColumn, startRow,startColumnOffset和startColumn,startRow,startColumnOffset 分别代表了哪些值：

你可以通过鼠标左键或右键选择浮动对象元素，同时我们也提供了 isSelected方法供你使用。
你可以使用 Tab 键或者 Shift + Tab 键在不同的浮动对象元素之间进行切换。
你可以按住 Ctrl +鼠标左键或者 Shift来进行对浮动对象元素的多选。
你可以通过快捷键对浮动对象元素进行剪切， 复制和粘贴；同时你也可以撤销和重做你对浮动对象元素的操作。

示例代码

以下代码在表格中加入了一个浮动对象元素。

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 创建浮动图片，如下图所示：

你可以使用Picture类来设置浮动图片的设置背景颜色，边框和拉伸

你可以使用鼠标左键和右键来选中浮动图片。

你可以使用 Tab 和 Shift + Tab 在多个浮动图片中切换选中状态。

你可以使用 Ctrl + 鼠标左键 或者 Shift + 鼠标左键进行多选。

你可以使用快捷键剪切，复制和粘贴浮动图片，当然，该操作可以被撤销和重做。

示例代码

以下代码使用 pictures.add方法创建了一个浮动图片：

activeSheet.pictures.add("f2","tsoutline.png",100,60,200,100);

如果你对我们的产品感兴趣或者有任何疑问，欢迎咨询在线客服>>