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

转帖|使用教程|编辑:鲍佳佳|2020-07-31 09:28:00.480|阅读 11 次

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

# 您正在找协同办公软件吗?点击这里站长给您推荐 #

相关链接:

SpreadJS是一款基于 HTML5 的纯前端电子表格控件,兼容 450 种以上的 Excel 公式,凭借其 “高性能、跨平台、与 Excel 高度兼容”的产品特性,备受以华为、苏宁易购、天弘基金等为代表的企业用户青睐。SpreadJS 为用户带来亲切的 Excel 使用体验的同时,满足 Web Excel 组件开发、表格文档协同编辑、数据填报、Excel 类报表设计等业务场景,极大降低了企业研发成本和项目交付风险。

点击下载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);


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

慧都高端UI界面开发


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

文章转载自:葡萄城

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
SpreadJS

面向企业级应用开发、基于HTML5的纯JavaScript电子表格控件。

在线
客服
咨询
电话
400-700-1020
在线
QQ
购物车 反馈 返回
顶部
在线客服系统
live chat