【图解】Web前端实现类似Excel的电子表格
本文将通过图解的方式,使用纯前端表格控件 SpreadJS 来一步一步实现在线的电子表格产品(例如可构建Office 365 Excel产品、Google的在线SpreadSheet)。
工具简介:
SpreadJS 纯前端表格控件是基于 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 型 |
企业授权 |
个人授权 |
|
授权数量 |
4 |
20 |
100 |
1 |
人数较多(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="http://demo.gcpowertools.com.cn/SpreadJS/TutorialSample/external/spreadjs/gc.spread.sheets.all.10.1.0.min.js" type="text/javascript"></script>
<!-- SpreadJS CSS(3)-->
<link href="http://demo.gcpowertools.com.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"));
};
</script>
备注:如果不指定div元素的大小电子表格的会在浏览器显示全屏,故通过对指定大小限制电子表格的显示范围。
SpreadJS div元素的定义
- <div id="ss" style="width:100%; height:100%"></div>
SpreadJS在网页上显示空电子表格如图所示:
这个简单的电子表格,此时已经神奇的拥有基本功能,可以输入数字或字母,并可以在单元格中输入公式。
通过JavaScript对象中的参数设置到Workbook方法的参数,可以自定义初始显示。我表2列出了一些主要参数。
Workbook的主要参数和默认值:
参数名称 |
参数说明 |
初始值 |
---|---|---|
sheetCount |
Sheet标签页数 |
1 |
font |
初始化时字体 |
|
allowUserDragDrop |
是否允许拖拽 |
True |
allowUserResize |
是否更改列的大小 |
True |
allowUserZoom |
是否可变焦 |
True |
newTabVisible |
是否显示新标签页按钮 |
true |
如我们可设置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 //隐藏新建标签页按钮
});
};
</script>
效果截图:
在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的枚举。下表列出一些常用的边框设置
边框名称 |
备注 |
---|---|
thin |
细实线 |
medium |
中实线 |
thick |
粗实线 |
dashed |
虚线 |
dotted |
点线 |
dashDot |
点虚线 |
在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(
0, // 开始行
0, // 开始列
10, // 行数
5, // 列数
"r", // 行分割字符
"," // 列分割字符
);
$("#jsonCode").html(csvString);
}
//导入CSV字符串
function ImportCSV() {
// 获得Spread 对象
var spread = $("#wijspread1").wijspread("spread");
var csvString = $("#jsonCode").html();
spread.getActiveSheet().setCsv(
0, // 开始行
0, // 开始列
csvString, // CSV字符串
"r", // 行分割字符
",", // 列分割字符
0 // 导入选项
);
}
但应注意的是,能在表4中指定的值来setCsv方法的导入标记。默认为无。
导入选项 |
选项的内容 |
---|---|
16 |
导入公式 |
2 |
包含列标题 |
1 |
有标题行 |
0 |
无(默认) |
8 |
格式化的数据 |
总结
在这篇文章中,通过代码实例和图解的方式,使用SpreadJS JavaScript组件来实现电子表格。SpreadJS提供了数据录入和计算,一级数据的显示,如导入和导出为CSV / JSON格式,可用于在Web浏览器上进行浏览。这种方法,对设计Web前端的类似Excel的电子表格非常有用的。在Excel中的IO服务允许在SpreadJS创建或导入Excel文件中的数据输出Excel文件。
---------------------------------------------------------------------------
SpreadJS中文网站:http://www.gcpowertools.com.cn/products/spreadjs/
SpreadJS在线演示:http://www.gcpowertools.com.cn/products/spreadjs/demo.htm
SpreadJS学习指南:http://demo.gcpowertools.com.cn/SpreadJS/TutorialSample/#/samples
- ASP.NET Core中的依赖注入(5): ServiceProvider实现揭秘 【总体设计 】
- ASP.NET MVC的View是如何被呈现出来的?[设计篇]
- Python大牛告诉你一行代码能干什么?神奇
- 谷歌最新人工智能研究:仅利用稀疏轮廓位置“重构”图像
- DATUM和BigchainDB
- MySQL主从复制的实现过程
- 使用dict和set
- 区块链技术(二):以太坊编程语言Solidity安装及入门初体验
- SQL注入测试神器sqlmap
- 人工智能也分强与弱?
- 【Scikit-Learn 中文文档】集成方法 - 监督学习 - 用户指南 | ApacheCN
- 2017黑科技 颠覆生活哪家强?
- ASP.NET Core中的依赖注入(5): ServiceProvider实现揭秘 【解读ServiceCallSite 】
- ASP.NET MVC的View是如何呈现出来的[实例篇]
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Elasticsearch: Reindex接口
- Android Studio 更新版本之后报错: Cannot access android.arch.lifecycle.ViewModelStoreOwner
- Android各版本查询和开启悬浮窗权限
- RuntimeException: setAudioSource failed异常
- Java&Android获取当前日期、时间、星期几、获取指定格式的日期时间、时间戳工具类包含使用示例
- Android TV 开发之 TV视频播放器
- Android MediaPlayer 音乐播放器扫描 本地音乐、上一曲、下一曲切歌、播放本地音乐
- 1小时真正掌握正则表达式
- Android Studio 安装配置教程 - Windows(详细版)
- Android 天气APP(八)城市切换 之 自定义弹窗与使用
- Android 接入udesk SDK实现IM
- Android 天气APP(十二)空气质量、UI优化调整
- Python+selenium 自动化-调用dom节点的click()监听事件,强力操作节点!穿透元素进行点击,节点被遮挡不可点击解决方法
- pkl是什么类型的文件?怎么来打开它?
- Python 技术篇-如何查看文本用什么类型的编码,文本编码查看方法