首先,让我们来显示电子表格
首先, 让我们试着简单地显示一个电子表格。您能够通过在HTML中,对wijspread元素, 安装例如以下的方法查看空电子表格。代码例如以下所看到的:
备注:假设不指定div元素的大小电子表格的会在浏览器显示全屏,故通过对指定限制大小电子表格的显示范围。
SpreadJS在网页上显示空电子表格如图所看到的:
这个简单的电子表格,此时已经奇妙的拥有基本功能,能够输入数字或字母。并能够在单元格中输入公式。
通过JavaScript对象中的參数设置到wijspread方法的參数。您能够自己定义初始显示。我表2列出了主要參数。
wijspread的主要參数和默认值:
是否显示新标签页button |
如我们可设置2个參数,来初始为3个标签页,同一时候隐藏新建button。代码例如以下:
为了操作电子表格,首先须要拿到wijspread对象,从而能够得到SpreadJS对象相应的表,能够获得表对象、单元格Cell对象等。然后,能够逐个进行每一个对象的实际操作。
例如以下的代码是通过调节单元格大小、设置字体、以及给文本单元格中赋值、autoFitColumn / autoFitRow方法的大小的一个样例。
// 获得第2行2列单元格
// 对这个单元格进行赋值
//单元格设置字体大小
// 当前标签页自己主动进行行、列适应大小
通过利用getCells方法,而不是getCell方法能够操作同一时候获得在一个范围内的多个单元:
// 获得第2行2列 ~ 第4行5列,并设置背景色
您还能够设置边框的类型,通过改动LineStyle第二个參数-使用LineBorder。下表列出主要边框设置
在Excel中,有合并单元格的要求。使用SpreadJS,您也能够使用addSpan方法来合并多个单元格在工作表上,结果如同Excel一样:
能够使用相似Excel的公式和函数
您能够在Excel中通过设置公式中的单元格进行计算,如求和。平均值。相同地,SpreadJS也能帮您实现相似工作:
例如以下的样例中,显示了平均值(AVERAGE函数)和总计(SUM函数)。您能够在单元格中设置公式的方法显示结果。
使用CSV或JSON的输入和输出数据
您能够输出您在SpreadJS输入的数据,或者输入来自外部的数据到反向。格式与相应的CSV和JSON。
还有一方面,以CSV的情况下,我将使用getCsv表对象中,该方法setCsv。Excel作为也就是使用CSV将容纳单元的情况下,输入和输出。
您也能够指定起始位置和范围,单元格的分隔符。
但应注意的是,能在表4中指定的值来setCsv方法的导入标记。默觉得无。
在这篇文章中。通过代码实例和图解的方式,用Wijmo库提供的SpreadJS JavaScript组件来实现电子表格。
SpreadJS提供了数据录入和计算。一级数据的显示。如导入和导出为CSV / JSON格式,可用于在Web浏览器上进行浏览。
这样的方法。对设计Web前端的相似Excel的电子表格很实用的。
在Wijmo,可选包Wijmo企业能够作为一个选项,以採取更方便SpreadJS优势。
通过使用包括在此选项Spread设计器,您能够创建一个独立的应用程序的数据SpreadJS。
在Excel中的IO服务同意您与您在SpreadJS创建或导入Excel文件里的数据输出Excel文件。