乐趣区

从零开始SpreadJS新人学习笔记第5周

复制粘贴、单元格格式和单元格类型

本周,让我们一起来学习 SpreadJS 的复制粘贴、单元格格式和单元格类型,希望我的学习笔记能够帮助你们,从零开始学习 SpreadJS,并逐步精通。

在此前的学习笔记中,相信大家已经学会并熟练掌握了 SpreadJS 的基本使用方法。下面,我们将更进一步,深入了解 SpreadJS 的数据绑定、单元格类型及前端导入导出 Excel 等核心功能,充分体验“仅需 100 多行代码,就可将 Excel 嵌入 Web 应用系统”的全过程。

SpreadJS 学习笔记的配套视频资料,请在此页面观看、下载。

SpreadJS 的复制粘贴

将模板内容复制粘贴到 Excel

SpreadJS 支持将模板内容通过复制粘贴的方式,导入 Excel 中,且保持复制粘贴内容的最大完整性和样式,通过设置 Workbook 的 options 属性的 allowCopyPasteExcelStyle 方法,可设置复制粘贴是否带样式。

如果允许复制粘贴样式,即可选择并复制一片带样式的区域,在 Excel 中的粘贴效果如下:

如果取消允许复制粘贴样式,此时再次执行复制粘贴操作,则会在 Excel 中显示如下(样式未被粘贴):

扩展 SpreadJS 的粘贴区域

当粘贴区域不够时,SpreadJS 支持自动扩展,可通过设置 workbook.options.allowExtendPasteRange 属性来实现此效果。
举例,复制 10 行数据,在第 28 行的位置粘贴,SpreadJS 模板的行数自动扩展到 40 行。取消选择【扩展粘贴区域】这个功能项时,无法粘贴成功。

复制粘贴增强

SpreadJS 的复制粘贴增强功能包含:复制时是否带行头列头。通过 workbook.options.copyPasteHeaderOptions 属性可设置复制时是否带行头、列头,
如下图,在【复制粘贴增强】下拉框中选择含行头列头,选中整个 B 列、复制,在 Excel 中粘贴,效果如下,发现表头 B 也被粘贴上:

SpreadJS 复制粘贴示例:copyPaste.zip

SpreadJS 的单元格格式

使用 SpreadJS 可以为每个单元格设定不同的格式,常用的有时间格式、数字格式等。当原始数据不是我们想要的样子时,都可以通过 setFormatter 方法设定格式。

如下图,输入框中输入日期时间和数字,点击下图中的设置格式按钮,即可在【展示效果】列生成展示效果:

自定义单元格格式

如果您需要创建一套有特殊规则的格式,例如下图中的余额列:当余额为负数的时候显示红色,0-1000 为黄色、1000 以上为绿色时,对于这样的需求可以使用自定义格式,效果如下图:

会计专用格式

SpreadJS 支持会计专用格式,可以满足几乎所有日常财务需要,最为常用的是数字格式化,为数字设置货币符号如人民币符号 ’¥’、美元符号 ’$’、保留确定位数的小数位等。对于会计专业会使用到的:添加空格、重复字符、千分符与数值缩放、百分数、数字占位符等都可以使用下图中展示的方式来设置:

SpreadJS 自定义单元格格式示例:CellFormatter.zip

SpreadJS 的单元格类型

SpreadJS 中的单元格可以被设置为不同的类型,如按钮、checkbox、下拉框、超链接、或自定义单元格等。您可以单独给一个单元格设置类型,也可以把单元格类型绑定到某一列上,让某一列成为一种类型的单元格。

按钮单元格

您通过【按钮单元格】可设定按钮在单元格的位置,距离各边距的位置、背景色和文字等。

// CellTypes 可以是 Button、CheckBox、Combobox、hyperlink

var b1 = new GC.Spread.Sheets.CellTypes.Button();

sheet.setCellType(3, 2, b1, GC.Spread.Sheets.SheetArea.viewport);



复选框单元格

SpreadJS 的【复选框单元格】默认有两种状态:选中和未选中。当然,用户也可通过 isThreeState(true) 设定为三种状态:选中、未选中和不确定状态。

普通组合框单元格(单选下拉框)

通过设定是否可编辑 editable(),您可以控制单元格是单选可输入框或者单选不可输入框。

超链接单元格

您可设置鼠标悬浮提示信息、设置未访问及以访问过的字体颜色、控制文本缩进、对齐方式、自动换行、设置回调函数等。如在下图中,点击超链接在回调中改变了表单名的样式。

自定义单元格

在下面的例子中,姓名列为自定义单元格列,点击后可单独编辑:

自定义列头

设定一个自定义超链接格式的列头,点击后对该列进行排序:

具体实现方法请查看示例:cellType.rar


以上就是 SpreadJS 复制粘贴、单元格格式和单元格类型的学习笔记,希望通过我的记录,您能快速掌握这些知识。也欢迎您加入葡萄城前端技术 QQ 群(720389894),第一时间获取产品更新资讯以及前端开发趋势。

下一周学习计划:SpreadJS 的图表与形状。

PS:文中提到的学习视频和示例源码,都已经上传到 SpreadJS 官网的【入门视频】中,欢迎大家观看学习。

>> 视频地址

退出移动版