本文将通过图解的方式，使用纯前端表格控件&&来一步一步实现在线的电子表格产品(例如可构建Office 365 Excel产品、Google的在线SpreadSheet)。
工具简介：
&纯前端表格控件是基于 HTML5 的 JavaScript 电子表格和网格功能控件，提供了完备的公式引擎、排序、过滤、输入控件、数据可视化、Excel 导入/导出等功能，适用于 .NET、Java 和移动端等各平台在线编辑类 Excel 功能的表格程序开发。
SpreadJS具有以下功能特点：
丰富的数据交互和外观
数据、显示、可视化和分析支持
强大的计算引擎
工作表和单元格级别的数据绑定
单元格类型
高速、低耗
谁适合阅读本文？
如果你想了解Web站点和Web应用程序的构建技术
如果你想在短时间内构建一个复杂的在线的电子表格产品的网站
如果想用纯前端、HTML5方式实现Web站点
必要的环境
用如下环境进行开发
支持HTML5的浏览器：IE9, IE10, IE11,Edge, FireFox, Safari, Chrome。
Windows操作系统。
.NET Framework 4.0及其以上。
SpreadJS开发授权
SpreadJS的开发授权分为以下四种：
SpreadJS开发授权
团队授权 I 型
团队授权 II 型
人数较多（20人左右）的团队推荐选择团队授权 II 型；小型团队建议选择团队授权 I 型。&
需要用到SpreadJS源码的开发者，可以选择企业授权，因为SpreadJS的JavaScript源码包含在企业授权中。
使用前的准备SpreadJS CDN
为了使用的SpreadJS，请在HTML中的head标签中列出描述。（1）在对语言进行说明，（2）&-&（3）是读取css，SpreadJS。
&!-- SpreadJS语言设置（1）--&
&meta name="spreadjs culture" content="zh-cn" /&
&!-- SpreadJS（2） --&
&script src=".cn/SpreadJS/TutorialSample/external/spreadjs/gc.spread.sheets.all.10.1.0.min.js" type="text/javascript"&&/script&
&!-- SpreadJS CSS（3）--&
&link href=".cn/SpreadJS/TutorialSample/external/spreadjs/css/gc.spread.sheets.excel2013white.10.1.0.css" rel="stylesheet" type="text/css" /&
首先，让我们来显示电子表格
首先, 让我们试着简单地显示一个电子表格，可以通过在HTML中，对wijspread元素, 安装如下的方法查看空电子表格，代码如下所示：
&script type="text/javascript"&
window.onload = function() {
// SpreadJS 初始化
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
备注：如果不指定div元素的大小电子表格的会在浏览器显示全屏，故通过对指定大小限制电子表格的显示范围。
SpreadJS div元素的定义
&div id="ss" style="width:100%; height:100%"&&/div&
SpreadJS在网页上显示空电子表格如图所示：
这个简单的电子表格，此时已经神奇的拥有基本功能，可以输入数字或字母，并可以在单元格中输入公式。
通过JavaScript对象中的参数设置到Workbook方法的参数，可以自定义初始显示。我表2列出了一些主要参数。
Workbook的主要参数和默认值：
sheetCount
Sheet标签页数
初始化时字体
allowUserDragDrop
是否允许拖拽
allowUserResize
是否更改列的大小
allowUserZoom
是否可变焦
newTabVisible
是否显示新标签页按钮
如我们可设置2个参数，来初始为3个标签页，同时隐藏新建按钮，代码如下：
&script id="scriptInit" type="text/javascript"&　　
　　window.onload = function() {　　　　// SpreadJS 初始化　　　　var spread = new GC.Spread.Sheets.Workbook(　　　　　　document.getElementById("ss")，{　　　　　　　　sheetCount:3,//初始化为3个标签页　　　　　　　　newTabVisible:false //隐藏新建标签页按钮　　　　});　　};
效果截图：
在JavaScript中操作SpreadJS电子表格
如同用Visual Basic来操作Excel的VBA，实现了Excel电子表格的操作；在这里，你也可以用JavaScript操纵SpreadJS 电子表格。
为了操作电子表格，首先需要拿到workbook对象，从而可以得到Workbook对象对应的表单Sheet，可以获得表单Sheet对象、单元格Cell对象等。然后，可以逐个进行每个对象的实际操作。
& 如下的代码是通过调节单元格大小、设置字体、以及给文本单元格中赋值、autoFitColumn / autoFitRow方法的大小的一个例子。
// 获得Spread 对象
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 3 });
// 获得当前激活的标签页
var activeSheet = spread.getActiveSheet();
// 获得第2行2列单元格
var cell = activeSheet.getCell(1, 1);
// 对这个单元格进行赋值
cell.value("SpreadJS");
//单元格设置字体大小
cell.font("15pt 宋体");
// 当前标签页自动进行行、列适应大小
activeSheet.autoFitColumn(1);
activeSheet.autoFitRow(1);
效果截图：
通过利用getCells方法，而不是getCell方法可以操作同时获得在一个范围内的多个单元：
// 获得第2行2列 ~ 第4行5列，并设置背景色
var cell = activeSheet.getRange(1, 1, 3, 4);
cell.backColor("#00ff00");
同时，通过产生LineBorder对象的边界设置为小区设置单元，borderBottom borderRight的，borderLeft，每个方法borderTop。
// 获得LineBorder属性
var lineBorder = new GC.Spread.Sheets.LineBorder("white", GC.Spread.Sheets.LineStyle.thin);
// 设置边框
cell.borderTop(lineBorder);
cell.borderBottom(lineBorder);
cell.borderLeft(lineBorder);
cell.borderRight(lineBorder);
还可以设置边框的类型，通过修改LineBorder第二个参数,该参数为GC.Spread.Sheets.LineStyle的枚举。下表列出一些常用的边框设置
在Excel中，有合并单元格的要求；使用SpreadJS，也可以使用addSpan方法来合并多个单元格在工作表上，结果如同Excel一样：
activeSheet.addSpan(0, 0, 2, 4, GC.Spread.Sheets.SheetArea.colHeader);
activeSheet.addSpan(0, 0, 2, 4, GC.Spread.Sheets.SheetArea.rowHeader);
// 单元格結合
activeSheet.addSpan(0, 0, 2, 4, GC.Spread.Sheets.SheetArea.viewport);
可以使用类似Excel的公式和函数
可以在Excel中通过设置公式中的单元格进行计算，如求和，平均值，同样地，SpreadJS支持320多种函数，能够轻松实现各类单元格数据处理：
如下的例子中，显示了平均值（AVERAGE函数）和总计（SUM函数）。可以在单元格中设置公式的方法显示结果。
activeSheet.getCell(0, 0).value('考试成绩');
// 各科成绩
activeSheet.getCell(2, 0).value('语文');
activeSheet.getCell(2, 1).value(80);
activeSheet.getCell(3, 0).value('数学');
activeSheet.getCell(3, 1).value(70);
activeSheet.getCell(4, 0).value('英语');
activeSheet.getCell(4, 1).value(90);
activeSheet.getCell(5, 0).value('政治');
activeSheet.getCell(5, 1).value(45);
// 总分和平均分
activeSheet.getCell(6, 0).value("总分");
activeSheet.getCell(6, 1).formula("SUM(B3:B6)");
activeSheet.getCell(7, 0).value('平均分');
activeSheet.getCell(7, 1).formula("AVERAGE(B3:B6)");
使用JSON的输入和输出数据
可以输出在SpreadJS输入的数据，或者输入来自外部的数据，格式为相应的JSON/CSV。
使用SpreadJS对象中输入和输出的JSON的toJSON / fromJSON方法，同时也会用到JSON.stringify / parse方法。
//数据输出
function ExportJSON()
// 获得Spread 对象
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
var jsonStr = JSON.stringify(spread.toJSON());
$("#jsonCode").html(jsonStr);
////数据输入
function ImportJSON()
// 获得Spread 对象
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
var jsonObj = JSON.parse($("#jsonCode").html());
spread.fromJSON(jsonObj);
效果截图：
另一方面，以CSV的情况下，我将使用getCsv表对象中，该方法setCsv。Excel作为也就是使用CSV将容纳单元的情况下，输入和输出。也可以指定起始位置和范围，单元格的分隔符。
//导出CSV字符串
function ExportCSV() {
// 获得Spread 对象
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
var csvString = spread.getActiveSheet().getCsv(
// 行分割字符
// 列分割字符
$("#jsonCode").html(csvString);
//导入CSV字符串
function ImportCSV() {
// 获得Spread 对象
var spread = $("#wijspread1").wijspread("spread");
var csvString = $("#jsonCode").html();
spread.getActiveSheet().setCsv(
csvString,
// CSV字符串
// 行分割字符
// 列分割字符
0 // 导入选项
但应注意的是，能在表4中指定的值来setCsv方法的导入标记。默认为无。
选项的内容
包含列标题
格式化的数据
在这篇文章中，通过代码实例和图解的方式，使用SpreadJS JavaScript组件来实现电子表格。SpreadJS提供了数据录入和计算，一级数据的显示，如导入和导出为CSV / JSON格式，可用于在Web浏览器上进行浏览。这种方法，对设计Web前端的类似Excel的电子表格非常有用的。在Excel中的IO服务允许在SpreadJS创建或导入Excel文件中的数据输出Excel文件。
---------------------------------------------------------------------------
SpreadJS中文网站：
SpreadJS在线演示：
SpreadJS学习指南：
相关阅读：
阅读(...) 评论()88被浏览57653分享邀请回答/blog/1312957 31 条评论分享收藏感谢收起Private Sub Worksheet_Change(ByVal Target As Range)
' Developed by Contextures Inc.
Dim rngDV As Range
Dim oldVal As String
Dim newVal As String
If Target.Count & 1 Then GoTo exitHandler
On Error Resume Next
Set rngDV = Cells.SpecialCells(xlCellTypeAllValidation)
On Error GoTo exitHandler
If rngDV Is Nothing Then GoTo exitHandler
If Intersect(Target, rngDV) Is Nothing Then
'do nothing
Application.EnableEvents = False
newVal = Target.Value
Application.Undo
oldVal = Target.Value
Target.Value = newVal
If Target.Column = 3 Then
If oldVal = "" Then
'do nothing
If newVal = "" Then
'do nothing
Target.Value = oldVal _
& ", " & newVal
NOTE: you can use a line break,
instead of a comma
Target.Value = oldVal _
& Chr(10) & newVal
exitHandler:
Application.EnableEvents = True
155 条评论分享收藏感谢收起查看更多回答查看: 33088|回复: 22
注册时间金币0 积分1威望2
LV.1, 积分 1, 距离下一级还需 49 积分
该用户从未签到金币0 威望2 帖子精华0
我使用的是专业版，未找到日历控件啊，求高手指点一下。若需要安装的话，求下载资源。
注册时间金币1734 积分20596威望33352
该用户从未签到金币1734 威望33352 帖子精华0
1. ET没有日历控件；
2. VBA论坛有，搜索即可
注册时间金币1887 积分6662威望13148
LV.13, 积分 6662, 距离下一级还需 138 积分
签到天数: 9 天[LV.3]偶尔看看II金币1887 威望13148 帖子精华4
楼主的问题啊，可以安装vba插件即可。
下载地址：
敬请关注：
WPS粉团1群：
WPS粉团2群：
欢迎大家积极踊跃的加入哦~
注册时间金币780 积分18798威望29551
签到天数: 174 天[LV.7]常住居民III金币780 威望29551 帖子精华18
安装VBA之后，通过“开发工具-其他控件”找日历控件
　　　　　
注册时间金币0 积分2威望1
LV.1, 积分 2, 距离下一级还需 48 积分
该用户从未签到金币0 威望1 帖子精华0
谢谢分享，非常感谢
注册时间金币0 积分2威望3
LV.1, 积分 2, 距离下一级还需 48 积分
该用户从未签到金币0 威望3 帖子精华0
gfgasrgyrtywyt5y54y5
注册时间金币0 积分1威望0
LV.1, 积分 1, 距离下一级还需 49 积分
该用户从未签到金币0 威望0 帖子精华0
不错哦& &感谢
注册时间金币6 积分20威望37
LV.1, 积分 20, 距离下一级还需 30 积分
该用户从未签到金币6 威望37 帖子精华0
我安装了VBA但是还是怎么没看见日历控件啊···
注册时间金币6 积分20威望37
LV.1, 积分 20, 距离下一级还需 30 积分
该用户从未签到金币6 威望37 帖子精华0
木偶251900 发表于
安装VBA之后，通过“开发工具-其他控件”找日历控件
没找到啊·············好多英文啊·不懂啊·······
注册时间金币780 积分18798威望29551
签到天数: 174 天[LV.7]常住居民III金币780 威望29551 帖子精华18
可以找一下microsoft date and time picker control
&感谢分享，支持楼主&
　　　　　
最佳管理奖
最佳管理奖
勤奋版主奖
勤奋版主奖，版主发帖数大于2000且注册天数满足180天可领取
加入WPS粉团QQ群可领取！
技术分享团
申请前请查看 /thread--1.html
测试体验团
申请前请查看 /thread--1.html
解答支持团
申请前请查看 /thread--1.html
乐于助人奖
在问答求助区积极帮助S党解答问题
活动策划团
申请前请查看 /thread--1.html
技巧教程分享达人
技巧教程分享达到10篇以上
活跃会员奖
发帖数达到2000以上且在线时间超过200个小时可领取！
优秀会员奖
论坛金币满500且在线时间达到100小时的S党可领取！
WPS论坛版主可申请！
最佳教程奖
发布教程帖子达到精华帖大于等于2以上可领取！
优秀模板奖
分享的模板，达到2个或2个以上的精华贴可领取！
宣传大使奖
宣传大使奖
用户体验奖
用户体验奖
超级版主勋章
WPS论坛超级版主可申请！
Powered by