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

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

博文简单介绍：

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

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前端实现相似Excel的电子表格-LMLPHP

谁适合阅读本文？

假设你想了解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的个人授权基于MIT和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、jQurey UI （2） -->

    <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>

    <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.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元素, 安装例如以下的方法查看空电子表格。代码例如以下所看到的：

<script id="scriptInit" type="text/javascript">

        $(document).ready( $(function () {

            // SpreadJS 初始化

            $("#wijspread1").wijspread();

        })

        );

    </script>

备注：假设不指定div元素的大小电子表格的会在浏览器显示全屏，故通过对指定限制大小电子表格的显示范围。

SpreadJS div元素的定义

<div id="wijspread1" style="width: 480px; height: 320px; border: 1px solid gray"/>

SpreadJS在网页上显示空电子表格如图所看到的：

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

这个简单的电子表格，此时已经奇妙的拥有基本功能，能够输入数字或字母。并能够在单元格中输入公式。

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

通过JavaScript对象中的參数设置到wijspread方法的參数。您能够自己定义初始显示。我表2列出了主要參数。

wijspread的主要參数和默认值：

參数名称	參数说明	初始值
sheetCount	Sheet标签页数	1
activeSheetIndex	最初显示表标签页	0
tabEditable	是否可编辑工作表名称	true
allowUserResize	是否更改列的大小	True
allowUserZoom	是否可变焦	True
newTabVisible	是否显示新标签页button	true

如我们可设置2个參数，来初始为3个标签页，同一时候隐藏新建button。代码例如以下：

<script id="scriptInit" type="text/javascript">

        $(document).ready( $(function () {

            // SpreadJS 初始化

            $("#wijspread1").wijspread({

                sheetCount: 3, //初始化为3个标签页

                newTabVisible:false //隐藏新建标签页button

                });

        })

        );

    </script>

效果截图：

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

在JavaScript中操作SpreadJS电子表格

如同用Visual Basic来操作Excel的VBA。实现了Excel电子表格的操作。在这里。你也能够用JavaScript操纵SpreadJS 电子表格。

为了操作电子表格，首先须要拿到wijspread对象，从而能够得到SpreadJS对象相应的表，能够获得表对象、单元格Cell对象等。然后，能够逐个进行每一个对象的实际操作。

例如以下的代码是通过调节单元格大小、设置字体、以及给文本单元格中赋值、autoFitColumn / autoFitRow方法的大小的一个样例。

          // 获得Spread 对象

            var spread = $("#wijspread1").wijspread("spread");

            // 获得当前激活的标签页

            var activeSheet = spread.getActiveSheet();

            // 获得第2行2列单元格

            var cell = activeSheet.getCell(1, 1);

            // 对这个单元格进行赋值

            cell.value("Wijmo SpreadJS");

            //单元格设置字体大小

            cell.font("15pt 宋体");

            // 当前标签页自己主动进行行、列适应大小

            activeSheet.autoFitColumn(1);

            activeSheet.autoFitRow(1);

效果截图：

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

通过利用getCells方法，而不是getCell方法能够操作同一时候获得在一个范围内的多个单元：

          // 获得第2行2列 ~ 第4行5列，并设置背景色

            var cell = activeSheet.getCells(1, 1, 3, 4)

          cell.backColor("#00ff00");

同一时候。通过产生LineBorder对象的边界设置为小区设置单元，borderBottom borderRight的。borderLeft。每一个方法borderTop。

          // 获得LineBorder属性

            var lineBorder = new $.wijmo.wijspread.LineBorder("#000000", $.wijmo.wijspread.LineStyle.thin);

            // 设置边框

            cell.borderTop(lineBorder);

            cell.borderBottom(lineBorder);

            cell.borderLeft(lineBorder);

            cell.borderRight(lineBorder);

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

您还能够设置边框的类型，通过改动LineStyle第二个參数-使用LineBorder。下表列出主要边框设置

边框名称	备注
thin	细实线
medium	粗实线
thick	粗实线
dashed	虚线
dotted	点线
dashDot	点虚线

在Excel中，有合并单元格的要求。使用SpreadJS，您也能够使用addSpan方法来合并多个单元格在工作表上，结果如同Excel一样：

          // 列結合

            activeSheet.addSpan(0, 0, 2, 4, $.wijmo.wijspread.SheetArea.colHeader);

          // 行結合

            activeSheet.addSpan(0, 0, 2, 4, $.wijmo.wijspread.SheetArea.rowHeader);

          // 单元格結合

            activeSheet.addSpan(0, 0, 2, 4, $.wijmo.wijspread.SheetArea.viewport);

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

能够使用相似Excel的公式和函数

您能够在Excel中通过设置公式中的单元格进行计算，如求和。平均值。相同地，SpreadJS也能帮您实现相似工作： Formula Functions

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

例如以下的样例中，显示了平均值（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)");

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

使用CSV或JSON的输入和输出数据

您能够输出您在SpreadJS输入的数据，或者输入来自外部的数据到反向。格式与相应的CSV和JSON。

我会在SpreadJS对象中输入和输出的JSON的toJSON / fromJSON方法。同一时候也会用到JSON.stringify\parse方法。

//数据输出

        function ExportJSON()

        {

            // 获得Spread 对象

            var spread = $("#wijspread1").wijspread("spread");

            var jsonStr = JSON.stringify(spread.toJSON());

            $("#jsonCode").html(jsonStr);

        }

        ////数据输入

        function ImportJSON()

        {

            // 获得Spread 对象

            var spread = $("#wijspread1").wijspread("spread");

            var jsonObj = JSON.parse($("#jsonCode").html());

            spread.fromJSON(jsonObj);

        }

效果截图：

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

还有一方面，以CSV的情况下，我将使用getCsv表对象中，该方法setCsv。Excel作为也就是使用CSV将容纳单元的情况下，输入和输出。

您也能够指定起始位置和范围，单元格的分隔符。

//导出CSV字符串

        function ExportCSV() {

            // 获得Spread 对象

            var spread = $("#wijspread1").wijspread("spread");

            var csvString = spread.getActiveSheet().getCsv(

                0,                                       // 開始行

                0,                                       // 開始列

                10,                                      // 行数

                5,                                       // 列数

                "\n",                                    // 行切割字符

                ","                                      // 列切割字符

            );

            $("#jsonCode").html(csvString);

        }

        //导入CSV字符串

        function ImportCSV() {

            // 获得Spread 对象

            var spread = $("#wijspread1").wijspread("spread");

            var csvString = $("#jsonCode").html();

            spread.getActiveSheet().setCsv(

                0,                                       // 開始行

                0,                                       // 開始列

                csvString,                               // CSV字符串

                "\n",                                    // 行切割字符

                ",",                                     // 列切割字符

                $.wijmo.wijspread.TextFileOpenFlags.None // 导入选项

            );

        }

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

但应注意的是，能在表4中指定的值来setCsv方法的导入标记。默觉得无。

TextFileOpenFlags选项	选项的内容
ImportFormula	导入公式
ncludeColumnHeader	包括列标题
IncludeRowHeader	有标题行
None	无（默认)
UnFormatted	格式化的数据

总结

在这篇文章中。通过代码实例和图解的方式，用Wijmo库提供的SpreadJS JavaScript组件来实现电子表格。

SpreadJS提供了数据录入和计算。一级数据的显示。如导入和导出为CSV / JSON格式，可用于在Web浏览器上进行浏览。

这样的方法。对设计Web前端的相似Excel的电子表格很实用的。

在Wijmo，可选包Wijmo企业能够作为一个选项，以採取更方便SpreadJS优势。

通过使用包括在此选项Spread设计器，您能够创建一个独立的应用程序的数据SpreadJS。

在Excel中的IO服务同意您与您在SpreadJS创建或导入Excel文件里的数据输出Excel文件。

---------------------------------------------------------------------------

Wijmo中文站点：http://wijmo.gcpowertools.com.cn/

Wijmo使用文档： http://wijmo.com/docs/wijmo/#WijmoUserGuide.html

Wijmo在线Demo：http://wijmo.com/demos/

电子表格