【图解】Web前端实现类似Excel的电子表格

在本文中，我将用图解的方式用Wijmo（JavaScript库）中的SpreadJS来一步一步实现网页上的电子表格产品SpreadSheet(例如可构建Office 365 Excel产品、Google的在线SpreadSheet).

博文简介：

Wijmo控件，是葡萄城提供的HTML\JavaScript库，目前最新版是2014 V2(2014.7.22号发布)，支持jQuery UI和jQuery、jQuery Mobile、Angular.js、Bootstrap.js、Knockout.js等。同时，Wijmo提供了很多小部件(UI 控件), 以此非常方便用来构建一个Web应用程序或者网站。

其中，Wijmo的SpreadJS提供了如下特性：

• 由HTML5显示电子表格，可方便数据输入

• 可方便的设定颜色、边框、字体

• 可使用类似Excel公式

• 可兼容JSON、CSV的数据输入、输出

• 可进行数据分析：条件格式过滤等

• Cell图形展示

• 日期、IME格式

• 自定义的输入单元格类型

• 触摸手势支持

• 图形、图像的应用

本文将涉及1~4点。

 

 

谁适合阅读本文？

• 如果你想了解Web站点和Web应用程序的构建技术
• 如果你想在短时间内构建一个复杂的SpreadSheet类型的网站
• 如果您想用纯前端、HTML5方式实现Web站点

 

必要的环境

用如下环境进行开发

• Wijmo 2014 V2的Spread JS 3.20142.11
• jQuery 1.8.2+
• Windows 8.1 64位版本
• IE浏览器11、Chrome 36.0.1985.125 m

SpreadJS版本和Wijmo许可证

SpreadJS的授权包括在Wijmo企业中

	Wijmo专业	Wijmo企业	Wijmo企业可选包
基本widget	◯	◯	-
SpreadJS	-	◯	-
SpreadJS设计器及Excel的I / O	-	-	◯
技术支持	◯	◯	◯

 

Wijmo的个人授权GPL Version 3； 对企业用户而言，采用Wijmo企业版是性价比非常高的策略。

其中包含在Wijmo企业版中的SpreadJS设计器和Excel I\O对于加快设计SpreadSheet非常有用，如可方便的查看JSON格式数据。

使用前的准备SpreadJS CDN

为了使用的SpreadJS，请在HTML中的head标签中列出描述。（1）在对语言进行说明，（2） - （5）是读取css和jQuery SpreadJS，jQuery的UI。

<!-- SpreadJS语言设置（1）-->
    <meta name="spreadjs culture" content="zh-cn" />

    <!-- jQuery（2） -->
    <script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>

    <!-- Wijmo CSS（3）-->
    <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />

    <!-- SpreadJS（4） -->
    <script src="http://cdn.wijmo.com/spreadjs/jquery.wijmo.wijspread.all.3.20142.11.min.js" type="text/javascript"></script>

    <!-- SpreadJS CSS（5）-->
    <link href="http://cdn.wijmo.com/spreadjs/jquery.wijmo.wijspread.3.20142.11.css" rel="stylesheet" type="text/css" />

首先，让我们来显示电子表格

首先, 让我们试着简单地显示一个电子表格，您可以通过在HTML中，对wijspread元素, 安装如下的方法查看空电子表格，代码如下所示：