【图解】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、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();
    })
    );  &lt;/script&gt;</pre>备注：如果不指定div元素的大小电子表格的会在浏览器显示全屏，故通过对指定大小限制电子表格的显示范围。SpreadJS div元素的定义<pre>&lt;div id="wijspread1" style="width: 480px; height: 320px; border: 1px solid gray"/&gt;</pre> SpreadJS在网页上显示空电子表格如图所示：<img src="http://p_w_picpaths.cnitblog.com/blog/139239/201407/241714543696006.png" border="0">这个简单的电子表格，此时已经神奇的拥有基本功能，可以输入数字或字母，并可以在单元格中输入公式。<img src="http://p_w_picpaths.cnitblog.com/blog/139239/201407/241714551352905.png" border="0">通过JavaScript对象中的参数设置到wijspread方法的参数，您可以自定义初始显示。我表2列出了主要参数。wijspread的主要参数和默认值：<table style="width:365px;" border="1" cellspacing="0" cellpadding="0"><tbody><tr><td width="143" valign="top"><strong>参数名称</strong></td><td width="149" valign="top"><strong>参数说明</strong></td><td width="71" valign="top"><strong>初始值</strong></td></tr><tr><td width="143" valign="top">sheetCount</td><td width="149" valign="top">Sheet标签页数</td><td width="71" valign="top">1</td></tr><tr><td width="143" valign="top">activeSheetIndex</td><td width="149" valign="top">最初显示表标签页</td><td width="71" valign="top">0</td></tr><tr><td width="143" valign="top">tabEditable</td><td width="149" valign="top">是否可编辑工作表名称</td><td width="71" valign="top">true</td></tr><tr><td width="143" valign="top">allowUserResize</td><td width="149" valign="top">是否更改列的大小</td><td width="71" valign="top">True</td></tr><tr><td width="143" valign="top">allowUserZoom</td><td width="149" valign="top">是否可变焦</td><td width="71" valign="top">True</td></tr><tr><td width="143" valign="top">newTabVisible</td><td width="149" valign="top">是否显示新标签页按钮</td><td width="71" valign="top">true</td></tr></tbody></table> 如我们可设置2个参数，来初始为3个标签页，同时隐藏新建按钮，代码如下：<pre>&lt;script id="scriptInit" type="text/javascript"&gt;
    $(document).ready( $(function () {      // SpreadJS 初始化
      $("#wijspread1").wijspread({
        sheetCount: 3, //初始化为3个标签页
        newTabVisible:false //隐藏新建标签页按钮        });
    })
    );  &lt;/script&gt;</pre> 效果截图：<img src="http://p_w_picpaths.cnitblog.com/blog/139239/201407/241714558389991.png" border="0"><h4>在JavaScript中操作SpreadJS电子表格</h4>如同用Visual Basic来操作Excel的VBA，实现了Excel电子表格的操作；在这里，你也可以用JavaScript操纵SpreadJS 电子表格。为了操作电子表格，首先需要拿到wijspread对象，从而可以得到SpreadJS对象对应的表，可以获得表对象、单元格Cell对象等。然后，可以逐个进行每个对象的实际操作。  如下的代码是通过调节单元格大小、设置字体、以及给文本单元格中赋值、autoFitColumn / autoFitRow方法的大小的一个例子。<pre>      // 获得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);</pre> <strong>效果截图：</strong><img src="http://p_w_picpaths.cnitblog.com/blog/139239/201407/241714566191119.png" border="0"> 通过利用getCells方法，而不是getCell方法可以操作同时获得在一个范围内的多个单元：<pre>      // 获得第2行2列 ~ 第4行5列，并设置背景色      var cell = activeSheet.getCells(1, 1, 3, 4)
      cell.backColor("#00ff00");</pre>同时，通过产生LineBorder对象的边界设置为小区设置单元，borderBottom borderRight的，borderLeft，每个方法borderTop。<pre>      // 获得LineBorder属性      var lineBorder = new $.wijmo.wijspread.LineBorder("#000000", $.wijmo.wijspread.LineStyle.thin);      // 设置边框      cell.borderTop(lineBorder);
      cell.borderBottom(lineBorder);
      cell.borderLeft(lineBorder);
      cell.borderRight(lineBorder);</pre><img src="http://p_w_picpaths.cnitblog.com/blog/139239/201407/241714573079274.png" border="0">您还可以设置边框的类型，通过修改LineStyle第二个参数-使用LineBorder。下表列出主要边框设置<table style="width:165px;" border="1" cellspacing="0" cellpadding="0"><tbody><tr><td width="100" valign="top"><strong>边框名称</strong></td><td width="63" valign="top"><strong>备注</strong></td></tr><tr><td width="100" valign="top">thin</td><td width="63" valign="top">细实线</td></tr><tr><td width="100" valign="top">medium</td><td width="63" valign="top">粗实线</td></tr><tr><td width="100" valign="top">thick</td><td width="63" valign="top">粗实线</td></tr><tr><td width="100" valign="top">dashed</td><td width="63" valign="top">虚线</td></tr><tr><td width="100" valign="top">dotted</td><td width="63" valign="top">点线</td></tr><tr><td width="100" valign="top">dashDot</td><td width="63" valign="top">点虚线</td></tr></tbody></table> 在Excel中，有合并单元格的要求；使用SpreadJS，您也可以使用addSpan方法来合并多个单元格在工作表上，结果如同Excel一样：<pre>      // 列結合
      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);</pre> <img src="http://p_w_picpaths.cnitblog.com/blog/139239/201407/241714582449588.png" border="0"><h4> </h4><h4>可以使用类似Excel的公式和函数</h4>您可以在Excel中通过设置公式中的单元格进行计算，如求和，平均值，同样地，SpreadJS也能帮您实现类似工作： Formula Functions<img src="http://p_w_picpaths.cnitblog.com/blog/139239/201407/241714593385389.png" border="0">如下的例子中，显示了平均值（AVERAGE函数）和总计（SUM函数）。您可以在单元格中设置公式的方法显示结果。<pre>    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)");</pre><img src="http://p_w_picpaths.cnitblog.com/blog/139239/201407/241715005419687.png" border="0"> <h4>使用CSV或JSON的输入和输出数据</h4> 您可以输出您在SpreadJS输入的数据，或者输入来自外部的数据到反向。格式与相应的CSV和JSON。我会在SpreadJS对象中输入和输出的JSON的toJSON / fromJSON方法，同时也会用到JSON.stringify\parse方法。<pre>//数据输出    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);      
    }</pre> 效果截图：<img src="http://p_w_picpaths.cnitblog.com/blog/139239/201407/241715024477371.png" border="0"> 另一方面，以CSV的情况下，我将使用getCsv表对象中，该方法setCsv。Excel作为也就是使用CSV将容纳单元的情况下，输入和输出。您也可以指定起始位置和范围，单元格的分隔符。<pre>//导出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 // 导入选项      );

}

但应注意的是，能在表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.htmlWijmo在线Demo：http://wijmo.com/demos/

[办公软件] 【图解】Web前端实现类似Excel的电子表格

相关帖子

javascript怎么实现窗口置顶

JavaScript怎样实现点击出现图片效果

常用JavaScript的注释方法示例

怎么在JavaScript中加注释

Excel 使用技巧 - 如何使光标所在行的数据自动变颜色

利用html+js触发弹窗事件

javascript如何改变背景

使用原生querySelectorAll和forEach来实现点击切换

免插件、DZ内置JS轻松实现外链访问二次确认对话提示框

唐伯虎 LV4