SpreadJS文章

本文将通过图解的方式,使用纯前端表格控件 SpreadJS 来一步一步实现网页上的电子表格产品SpreadSheet(例如可构建Office 365 Excel产品、Google的在线SpreadSheet)。

工具简介:

SpreadJS 纯前端表格控件是基于 HTML5 的 JavaScript 电子表格和网格功能控件,提供了完备的公式引擎、排序、过滤、输入控件、数据可视化、Excel 导入/导出等功能,适用于 .NET、Java 和移动端等各平台在线编辑类 Excel 功能的表格程序开发。

SpreadJS具有以下功能特点:

  • 丰富的数据交互和外观
  • 数据、显示、可视化和分析支持
  • 强大的计算引擎
  • 工作表和单元格级别的数据绑定
  • 数据验证
  • 单元格类型
  • 数据操作
  • 高速、低耗

谁适合阅读本文?

  • 如果你想了解Web站点和Web应用程序的构建技术
  • 如果你想在短时间内构建一个复杂的SpreadSheet类型的网站
  • 如果想用纯前端、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) - (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元素, 安装如下的方法查看空电子表格,代码如下所示:

<script id="scriptInit" type="text/javascript">
        $(document).ready( $(function () {
            // SpreadJS 初始化
            $("#wijspread1").wijspread();
        })
        );
    </script>

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

SpreadJS div元素的定义

<div id="wijspread1" />

SpreadJS在网页上显示空电子表格如图所示:

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

通过JavaScript对象中的参数设置到wijspread方法的参数,可以自定义初始显示。我表2列出了主要参数。

wijspread的主要参数和默认值:


参数名称


参数说明


初始值


sheetCount


Sheet标签页数


1


activeSheetIndex


最初显示表标签页


0


tabEditable


是否可编辑工作表名称


true


allowUserResize


是否更改列的大小


True


allowUserZoom


是否可变焦


True


newTabVisible


是否显示新标签页按钮


true

如我们可设置2个参数,来初始为3个标签页,同时隐藏新建按钮,代码如下:

<script id="scriptInit" type="text/javascript">
        $(document).ready( $(function () {
            // SpreadJS 初始化
            $("#wijspread1").wijspread({
                sheetCount: 3, //初始化为3个标签页
                newTabVisible:false //隐藏新建标签页按钮
                });
        })
        );
    </script>

效果截图:

在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);

效果截图:

通过利用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);

还可以设置边框的类型,通过修改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);

可以使用类似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)");

使用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);
        }

效果截图:

另一方面,以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 // 导入选项
            );
        }

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


TextFileOpenFlags选项


选项的内容


ImportFormula


导入公式


ncludeColumnHeader


包含列标题


IncludeRowHeader


有标题行


None


无(默认)


UnFormatted


格式化的数据

总结

在这篇文章中,通过代码实例和图解的方式,使用SpreadJS JavaScript组件来实现电子表格。SpreadJS提供了数据录入和计算,一级数据的显示,如导入和导出为CSV / JSON格式,可用于在Web浏览器上进行浏览。这种方法,对设计Web前端的类似Excel的电子表格非常有用的。在Excel中的IO服务允许在SpreadJS创建或导入Excel文件中的数据输出Excel文件。

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

SpreadJS中文网站:http://www.gcpowertools.com.cn/products/spreadjs/

SpreadJS学习指南:http://demo.gcpowertools.com.cn/SpreadJS/TutorialSample/#/samples

SpreadJS在线演示:http://www.gcpowertools.com.cn/products/spreadjs/demo.htm

时间: 2024-10-12 18:08:20

SpreadJS文章的相关文章

JVM学习(2)——技术文章里常说的堆,栈,堆栈到底是什么,从os的角度总结--转载http://www.cnblogs.com/kubixuesheng/p/5202561.html

转载自---http://www.cnblogs.com/kubixuesheng/p/5202561.html 俗话说,自己写的代码,6个月后也是别人的代码--复习!复习!复习!涉及到的知识点总结如下: 堆栈是栈 JVM栈和本地方法栈划分 Java中的堆,栈和c/c++中的堆,栈 数据结构层面的堆,栈 os层面的堆,栈 JVM的堆,栈和os如何对应 为啥方法的调用需要栈 属于月经问题了,正好碰上有人问我这类比较基础的知识,无奈我自觉回答不是有效果,现在深入浅出的总结下: 前一篇文章总结了:JV

《深入理解Java集合框架》系列文章

Introduction 关于C++标准模板库(Standard Template Library, STL)的书籍和资料有很多,关于Java集合框架(Java Collections Framework, JCF)的资料却很少,甚至很难找到一本专门介绍它的书籍,这给Java学习者们带来不小的麻烦.我深深的不解其中的原因.虽然JCF设计参考了STL,但其定位不是Java版的STL,而是要实现一个精简紧凑的容器框架,对STL的介绍自然不能替代对JCF的介绍. 本系列文章主要从数据结构和算法层面分析

对TTY的理解,这篇文章不错

原文:http://blog.chinaunix.net/uid-20543672-id-3225777.html 虽然一直做嵌入式Linux,宿主机和开发板通信天天都在用tty设备通信,但是其实自己对TTY设备及终端的概念认识几乎是0.对于Linux内核的终端.tty.控制台等概念的认识很模糊.由于在学习的时候碰到了重定向console的问题,所以借机学习下tty的知识.以下是我对tty的认识总结,信息来源于网络和内核文档.参考资料见文章末尾. tty一词源于Teletypes,或Telety

最近在开发一个文章聚合的工具

现在的RSS一个重大的问题就是内容重复,针对性不是特别的强.还有一点是无法推荐好的优质文章. 说实在的时间是个宝贵的东西,宁可花点钱读点有价值的文章,也不看一堆rss结果中找好的文章,还不一定找到,浪费时间啊. 所有我决定做一个小工具.文章聚合并去重,同时还根据友情链接挖掘好的rss源. 项目目前为止,可以提供简单的访问和更新功能,挖掘的功能还没有做.

微服务 - 文章

[微服务与容器的监控 —— 来自Adrian Cockcroft的挑战][http://www.infoq.com/cn/news/2015/07/monitoring-microservices]Adrian Cockcroft在GlueCon 2015大会上为听众列举了如何对微服务与基于容器的应用进行监控的多条规则.他还重强调了在监控cloud native并且基于容器的系统时所面临的挑战,并介绍了微服务模拟与可视化工具“Spigo” [微服务的好处][http://www.infoq.co

无限互联奖学金文章连载北京总部四十九期胡梦川 第一篇

无限互联奖学金文章连载北京总部四十九期胡梦川 第一篇: 今天是来到无限互联的第四天,严格来说已经第六天了,刚来就是开班典礼,给人一种很好的氛围.老师讲了很多关于以后学习的技巧和规定,我的第一感觉是,比备战高考还要严格,不过这才能体现一个组织的负责任.正式开讲才感觉到这个班级的大神无处不在,不努力根本赶不上,就是这个学习氛围和高强度的练习很重要.多用心你才能感觉到有些事其实很简单.关于学习时间大家基本都是一天不动的在敲代码,等于给自己一个机会吧.时间飞逝,抓住机会才重要.刚来第一周,感受最深就是好

《鸡啄米C++编程入门系列》系列技术文章整理收藏

<鸡啄米C++编程入门系列>系列技术文章整理收藏 收藏整理鸡啄米C++编程入门系列文章,供个人和网友学习C++时参考 1鸡啄米:C++编程入门系列之前言 2鸡啄米:C++编程入门系列之一(进制数) 3鸡啄米:C++编程入门系列之二(原码.反码与补码) 4鸡啄米:C++编程入门系列之三(VS2010的使用介绍) 5鸡啄米:C++编程入门系列之四(数据类型) 6鸡啄米:C++编程入门系列之五(运算符和表达式) 7鸡啄米:C++编程入门系列之六(算法的基本控制结构之选择结构) 8鸡啄米:C++编程入

文章标题

epoll极简介绍 关于epoll的详细介绍,已经有较多文章可以参考,例如这篇文章介绍就比较详细: http://blog.chinaunix.net/uid-24517549-id-4051156.html epoll编程的接口: epoll_create 创建一个epoll内核对象,返回指向该对象的fd epoll_ctl 往epoll中添加.删除.修改需要监控的套接字 epoll_wait 等待epoll中的套接字产生可读.可写.异常消息 使用epoll时有如下应该注意的地方: 确保被ep

如何编辑好看的微信文章微助点微信编辑

微助点微信编辑器,是一款"素材最多,最好用"的微信图文编辑工具,丰富素材样式任您挑选,调整颜色.排版更简单,为您提供好看.易读的文章是我们动力!下面给您具体介绍微助点微信编辑器. 1.编辑器网站框架 怎么样?看起来简单大气吧,微助点编辑器操作起来也和他的界面一样简单方便,还有更多的文本.标题.分割线.内容等素材可以供大家选择使用.再来看看其他素材的截图 更多的素材可访问微助点官方网站微助点官方网址