SpreadJS电子表格

SpreadJS是wijmo旗下的一款HTML5电子表格控件。

官方网址：http://wijmo.com/products/spreadjs/

在这里简单整理了SpreadJS几个比较简单的特点，如下：

SpreadJS所支持的浏览器

1) Microsoft IE10

　　　　2) Microsoft IE9

　　　　3) Mozilla FireFox

　　　　4) Safari

　　　　5) Google Chrome

使用SpreadJS步骤

　　　　1)添加Jquery、SpreadJS脚本以及样式表的引用

　        <!--jQuery References-->

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

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

　　　　　　<!--Theme-->

　　　　　　<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />

　　　　　　<!--SpreadJS Widgets JavaScript-->

　 　　　　　<script src="http://cdn.wijmo.com/spreadjs/jquery.wijmo.wijspread.all.1.20133.8.min.js" type="text/javascript"></script>

　　　　　　<!--SpreadJS Widgets CSS-->

　　　　　　<link href="http://cdn.wijmo.com/spreadjs/jquery.wijmo.wijspread.1.20133.8.css" rel="stylesheet" type="text/css" />

　　　　　　2) 生成HTML标记

<div id="ss" style="width:100%;height:400px;"></div>

　　　　　　3) 初始化电子表格

　            <script type="text/javascript">

    　　　　　　$(document).ready(function(){

        　　　　$("#ss").wijspread({sheetCount:1}); // create wijspread control

        　　　　var spread = $("#ss").wijspread("spread"); // get instance of wijspread control

        　　　　var sheet = spread.getActiveSheet(); // get active worksheet of the wijspread control

        　　　　// initializing the active worksheet here...

   　　　　　　 });

　　　　　　　　</script>

Spread绘制图表解决方案

　　　　1) SparkLine

　　　　对单个单元格绘制图表

function setSparkline(

   　　　　row : number,

   　　　　col : number,

  　　　　 dataRange : Range,

   　　　　dataOrientation : DataOrientation,

   　　　　sparklineType : SparklineType,

   　　　　sparklineSetting : SparklineSetting,

   　　　　dateAxisRange : Range,

   　　　　dateAxisOrientation : DataOrientation

　　　　　　) : Sparkline;

　　　　　　缺点：Sparkline只有三种类型：

Member	Description
column	Specifies the column sparkline.
line	Specifies the line sparkline.
winloss	Specifies the win-loss sparkline.

　　　　2) SparkLineEx

　　　　可以在指定单元格区域内通过公式来绘制图表

sheet.setFormula(i, 4, '=CASCADESPARKLINE(C2:C17,' + i + ',B2:B17,,,"#8CBF64","#D6604D",false)');

　　　　优点：可以有多种图表类型

　　　　可以跨多个单元格绘制图表

　　　　缺点：只能通过公式来绘制图表

　　　　图表的种类不够多，不能动态展示

　　　　3) Floating Objects

　　　　通过添加浮动对象中指定的HTML元素，添加完浮动对象后，在嵌入的div中绘制图表：

　var div = document.createElement('div');

　　　　div.setAttribute("id", "div1");

　　　　div.innerHTML = "<div id= 'myChart'>button<div/>";

　　　　customFloatingObject.Content(div);

　　　　$(div).highcharts......(此处省略highcharts使用方法);

　　　　优点：可以使用多种嵌入浮动对象的图表控件绘制图表

　　　　缺点：目前没找到可以*伸缩的方法

SpreadJS懒加载方案：

　　　　　　目前尚未发现脚本懒加载的方案

SpreadJS支持国际化

　　　　　　$.wijmo.wijspread.CultureInfo中有默认的国际化变量，可以识别为各个culture，支持自定义culture以及设定此culture的变量

SpreadJS 支持 Knockout (KO)技术

KnockoutJS 是一个使用 MVVM 模式的 JavaScript 库，允许双向数据绑定，使数据和UI界面进行实时的交互更新。

　　 1）添加最新的 jQuery 引用， Wijmo 插件， Knockout .js 文件和 KO 关于 Wijmo 的扩展文件。

　　　　　　2）创建 ViewModel 和 View：添加 JavaScript 定义数据和 UI 行为。创建标记创建 View 视图，可交互的UI。

　　　　　　3）绑定 SpreadJS 插件到 ViewModel 和 KO.

可以使用SpreadJS Designer设计器，设计器主要有以下功能：

　　　　　　1）导入导出ssjson、xls、csv等文件

　　　　　　2）可以保存为js文件

　　　　　　3）加载、保存schema(json格式)

　　　　　　4）像excel一样操作文档，编辑单元格，移动单元格，字体、颜色、样式、对齐

　　　　　　5）添加sparkline图表、table、Picture

　　　　　　6）设计报表公式

　　　　　　7）表条件过滤、排序

缩小自适应单元格Shrink to Fit

　　　　　　对单个单元格的较长字段缩放以自适应单元格长度

支持typescript

　　　　　　添加wijmo.wijspread.d.ts 和 jquery.d.ts，可以智能感知

支持数据验证

　　　　　　1）   createDateValidator
　　　　　　2）
createFormulaValidator
　　　　　　3）
createFormulaListValidator
　　　　　　4）
createListValidator
　　　　　　5）
createNumberValidator
　　　　　　6）
createTextLengthValidator

秒客网

SpreadJS电子表格

相关文章