前端表格插件-SpreadJS

1. spreadJS简介

1）类 Excel 功能的纯前端表格控件，基于 HTML5 的 JavaScript 电子表格和网格功能控件；

2）适用于 Java 、Web 应用程序、移动端等多种平台的表格数据处理；

3）支持数据排序、过滤、增删改查、导出、导入、可视化；

4）高度类似 Excel 功能和外观的在线表格编辑程序；

具体详细介绍可以去官网： https://www.grapecity.com.cn/developer/spreadjs

2 . 表格组成

一个表格是由spread（workbook）对象包含多个sheet，每个sheet有row（行）和 column（列）组成，每个行和列组成对应的cell（单元格）。

3. 功能简介

1）图表：SpreadJS支持柱形图，折线图，饼形图，条形图，组合图等多种图标形式。
2）表格：有时候需要简单的管理或者一组数据，这时候就可以在sheet中插入一个表格。
3）条件格式：当有数千行数据时，仅仅通过从原始数据中检查模式是极其困难的。条件格式化提供了另外一种途径来可视化数据和使表单更加容易理解。
4）区域分组：如果有一个要进行组合和汇总的数据列表，则可以创建分级显示。可创建行的分级显示和列的分级显示。
5）右键：右键点击工作簿将会展示上下文菜单，菜单的内容取决于点击的内容。
还有很多的实用功能，这里就不一一列举。

4 . 初始化spread

SpreadJS不依赖任何第三方组件,只需要引用下列文件：

1 2	<link rel="styleSheet" href="gc.spread.sheets.xx.x.x.css" /> <script src="gc.spread.sheets.all.xx.x.x.min.js" type="text/javascript"></script>

HTML：页面中添加一个DOM元素作为它的容器

1	<div id="ss" style="width:100%; height:360px;border: 1px solid gray;"></div>

JavaScript：用 new GC.Spread.Sheets.Workbook()来初始化Spread

1
2
3

window.onload = function () {
        var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
};

5. sheet

每个sheet分为4部分组成，分别是：
角：
GC.Spread.Sheets.SheetArea. Corner ，简写：0；
行头：
GC.Spread.Sheets.SheetArea.RowHeader ，简写：1；
列头：
GC.Spread.Sheets.SheetArea.ColumnHeader ，简写：2；
表格区域：
GC.Spread.Sheets.SheetArea.viewport ，简写：3。
如图所示：
sheet组成
1）获取当前活动的sheet：

1	var activeSheet = spread.getActiveSheet();

2）根据sheet的name获取：

1	var sheet = spread.getSheetFromName(“Sheet1”);

3）通过sheet的索引来获取：

1	var sheet = spread. getSheetIndex( index );

4）设置sheet的数量：

1	spread.setSheetCount( number );

5）根据索引删除sheet：

1	spread.removeSheet( index );

6. cell

1）获取活动单元格所在行和列的index：

1 2	var col = sheet. getActiveColumnIndex(); var row = sheet.getActiveRowIndex();

2）获取单元格的值

1 2	sheet.getValue( rowIndex, colIndex )； sheet.getText( rowIndex, colIndex );

3）单元格设置样式（大多数样式和CSS的策略相同）：

Spread.Sheets 提供一个样式的类, 其中包含很多属性, 例如前景色, 背景色：

var style = GC.Spread.Sheets.Style(); 
style.backColor = 'red’; 
style.foreColor = 'green’;

// 设置样式给（ row, col ）单元格
sheet.setStyle(row, col, style, GC.Spread.Sheets.SheetArea.viewport); 
// row为-1表示整列设置该样式；col为-1时表示整行设置该样式

4）使用公式：

sheet.getCell(1,1).value(3);
sheet.getCell(2,1).value(1);
spread.options.allowUserEditFormula = true;
activeSheet.setArrayFormula( row, col, rowCount, colCount, "B1:B5*C1:C5");
// 单元格和sheet的索引是从0开始

5）单元格设置值：

1 2	sheet.setValue( rowIndex, colIndex , 3 ); // 3代表表格区域, 第三个参数不写默认为表格区域 sheet.getCell( row, col ).value( “hello world”);

6）合并单元格:

var sheet = spread.getActiveSheet();

sheet.addSpan( row, col, rowCount, colCount );
//从单元格( row, col )开始合并rowCount行， colCount列

6）单元格格式:

1 2	sheet.setValue( 1, 2, new Date(2018, 7, 28 ) ); sheet.setFormatter( 1, 2, “d-mmm; @”);

7. 表单事件

Spread.Sheets 在表单上提供了很多事件，可以通过调用 bind 和 unbind 方法来监听表单的某一个事件或取消监听表单的某一个事件，调用 unbindAll 方法来取消监听表单所有的事件。

var sheet = spread.getActiveSheet();

//绑定单击事件
sheet.bind( GC.Spread.Sheets.Events. CellClick, function ( e, args ){
	// do some thing …
})

// 解绑事件：
sheet.unbind( GC.Spread.Sheets.Events. CellClick );

常用的事件有：
CellClick, CellDoubleClick, ClipboardChanging, ClipboardChanged, ClipboardPasted, ClipboardPasting, CloumnWidthChanged, EditEnding, EditEnded, EditStarting ……

参考：
http://help.grapecity.com/spread/SpreadJSWeb/webframe.html#JavascriptLibrary~GcSpread.Sheets.Events.html

8. 数据绑定

数据绑定类型有表单级别绑定和单元格级别绑定

可以使用 setDataSource 和 getDataSource 方法来设置获取数据源
1）表单级绑定数据
a. 自动生成绑定列方法

var customers = [ 
	{ ID:0, Name:'A', Info1:'Info0' }, 
	{ ID:1, Name:'B', Info1:'Info1' }, 
	{ ID:2, Name:'C', Info1:'Info2' },
]; 

sheet.autoGenerateColumns = true;    //控制是否自动生成绑定列
sheet.setDataSource(customers);

b. 使用bindColumns绑定所有自定义列方法：

// 数据
var datasource = [ 
	{ name: 'Alice', age: 27, birthday: '1985/08/31', position: 'PM’ }
 ];
//每列配置信息
var colInfos = [ 
	{ name: ‘position‘,   displayName: ’Position‘, size: 50, visible: false }, 
	{ name: ‘name‘,      displayName: 'Display Name‘,  size: 70 }, 
	{ name: 'birthday‘,  displayName: 'Birthday', formatter: 'd/M/yy', size: 120 }, 
	{ name: ‘age‘,         displayName: 'Age', size: 40, resizable: false }, 
];

sheet.autoGenerateColumns = false; 
sheet.setDataSource(datasource); 
sheet.bindColumns(colInfos);

2）单元格级别绑定数据

使用 setBindingPath 方法来设置绑定路径到指定的单元格，并将数据源设置到表单上

var person = { 
	name: 'Wang feng', age: 25, sex: 'male', address: { postcode: '710075’ } 
}; 
var source = new GC.Spread.Sheets.Bindings.CellBindingSource(person);

sheet.setBindingPath(2, 1, 'name’); 
sheet.setBindingPath(3, 1, 'age’); 
sheet.setBindingPath(4, 1, 'sex’); 
sheet.setBindingPath(5, 1, 'address.postcode’); 
sheet.setDataSource(source);

3）获取表单数据
a. 获取某一行的数据：

1	sheet.getDataItem( row );

b. 获取表单所有数据

1	sheet.getDataSource( ); // 数组对象格式

9. 单元格类型

1）按钮单元格

var button = new GC.Spread.Sheets.CellTypes.Button();

button.marginLeft(15);  //设置按钮的margin-left
button.text(button‘);    // 按钮文字
button.buttonBackColor(‘red‘);   //设置背景颜色
sheet.setCellType(3, 2, button, GC.Spread.Sheets.SheetArea.viewport);

2）复选框单元格

var checkbox = new GC.Spread.Sheets.CellTypes.CheckBox(); 
checkbox.textTrue(‘Check state’);       // 设置选中状态显示文本
checkbox.textFalse(‘UnCheck state’);  // 设置未选中状态显示文本

sheet.setCellType(3, 2, checkbox, GC.Spread.Sheets.SheetArea.viewport);

3）普通组合框单元格

var combo = new GC.Spread.Sheets.CellTypes.ComboBox();
//使用 editorValueType 方法来设置或者获取被写入底层数据模型的值
combo.editorValueType( GC.Spread.Sheets.CellTypes.EditorValueType.text );

combo.items([ 
	{ text: 'Oranges', value: '11k' }, 
	{ text: 'Apples', value: '15k' }, 
	{ text: 'Grape', value: '100k’ }
]);
sheet.setCellType(3, 2, combo, GC.Spread.Sheets.SheetArea.viewport);

4）超链接单元格

var h = new GC.Spread.Sheets.CellTypes.HyperLink(); 

h.text(www.babytree.com’); //设置超链接的文本
h.linkToolTip(宝宝树’);        //鼠标悬停在超链接上时显示的提示信息
h.linkColor(‘red’);    //设置链接显示颜色
h.visitedLinkColor(‘blue’);    //设置访问过的链接显示颜色

sheet.setCellType(3, 2, h, GC.Spread.Sheets.SheetArea.viewport);

5）自定义单元格
前面这四种单元格在满足不了有些场景的时候，就可以使用自定义单元格。

自定义单元格的实现：
通过继承 Base 类型来自定制单元格类型，并且实现一些必须的方法：
paint, processMouseDown, processMouseMove, processMouseUp, processMouseEnter, processMouseLeave

function MyCellType(){ }

MyCellType.prototype = new GC.Spread.Sheets.CellTypes.Base( );  // 继承自Base 类型

MyCellType.prototype.paint = function (ctx, value, x, y, w, h, style, options) { 
	//1. 拿到image对象
	//2. 使用canvas 进行绘制
};

MyCellType.prototype.processMouseDown = function ( args ) {
	// 自定义单元格的mouseDown事件
}

MyCellType.prototype.processMouseEnter = function ( args ){
	//自定义单元格的mouseEnter事件
}

// 将自定义好的单元格设置到对应的单元格中
sheet.getRange(1, 1, 1, 1).cellType( new MyCellType() );

10. 导入导出

需要导入导出时需要引入相关的js文件：

1	<script src='.../spreadjs/plugins/gc.spread.excelio.x.xx.xxxxx.x.min.js' type='text/javascript'></script>

初始化Workbook实例和ExcelIO实例：

var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss')); 
var excelIo = new GC.Spread.Excel.IO();
//可以使用open方法将excel文件导入为spread json，使用 save 方法将spread json导出为excel文件：

//导入：
excelIo.open(excelFile, function (json) { 
	var workbookObj = json; 
	workbook.fromJSON(workbookObj); 
}, function (e) { 
	// console.log(e); 
}); 

//导出
excelio.save(json, function (blob) { 
	//do some thing …
}, function (e) { 
	//console.log(e); 
});

其中导出的时候可能会用到FileSaver.js的saveAs()方法。