标签：des style blog http io ar color os 使用
SpreadJS是wijmo旗下的一款HTML5电子表格控件。
官方网址：http://wijmo.com/products/spreadjs/
在这里简单整理了SpreadJS几个比较简单的特点，如下：
1) Microsoft IE10
2) Microsoft IE9
3) Mozilla FireFox
4) Safari
5) Google Chrome
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>
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使用方法);
优点：可以使用多种嵌入浮动对象的图表控件绘制图表
缺点：目前没找到可以自由伸缩的方法
目前尚未发现脚本懒加载的方案
$.wijmo.wijspread.CultureInfo中有默认的国际化变量，可以识别为各个culture，支持自定义culture以及设定此culture的变量
KnockoutJS 是一个使用 MVVM 模式的 JavaScript 库，允许双向数据绑定，使数据和UI界面进行实时的交互更新。
1） 添加最新的 jQuery 引用， Wijmo 插件， Knockout .js 文件和 KO 关于 Wijmo 的扩展文件。
2） 创建 ViewModel 和 View：添加 JavaScript 定义数据和 UI 行为。创建标记创建 View 视图，可交互的UI。
3） 绑定 SpreadJS 插件到 ViewModel 和 KO.
1） 导入导出ssjson、xls、csv等文件
2） 可以保存为js文件
3） 加载、保存schema(json格式)
4） 像excel一样操作文档，编辑单元格，移动单元格，字体、颜色、样式、对齐
5） 添加sparkline图表、table、Picture
6） 设计报表公式
7） 表条件过滤、排序
对单个单元格的较长字段缩放以自适应单元格长度
添加wijmo.wijspread.d.ts 和 jquery.d.ts，可以智能感知
1） createDateValidator
2）
createFormulaValidator
3）
createFormulaListValidator
4）
createListValidator
5）
createNumberValidator
6）
createTextLengthValidator
标签：des style blog http io ar color os 使用
原文地址：http://www.cnblogs.com/imyc/p/4142995.html
