Spreadjs纯前端表格控件
SpreadJS纯前端表格控件是基于HTML5的JavaScript电子表格和网格功能控件，适用于.NET、Java和移动端等各平台在线编辑类Excel功能的表格程序开发，类似Excel。
页面引用相应的js
如果购买正式版的话会有license.js，类似于密钥一样引用即可，FileSaver.js和excelio.js是前端导出需要的，最后一个是打印。
html里只需要放一个div就可以了，相当于SpreaJS的容器。
在js直接初始化调用就可以了
window.onload = function () {
var spread = new GcSpread.Sheets.Spread(document.getElementById('ss'), { sheetCount: 1 });
};官网的学习指南，基础的东西都会有：点击打开链接
下面分享一些针对特殊需求的特殊的Spreadjs的方法
1、非数字禁止输入，只允许输入负数与整数，重写Spreadjs方法。
//非数字禁止输入
var NumberCellType = new GC.Spread.Sheets.CellTypes.Text();
NumberCellType.createEditorElement = function (context) {
var editor = GC.Spread.Sheets.CellTypes.Text.prototype.createEditorElement.call(this, context);
var textarea = editor;
textarea.onkeyup = function (event) {
//只允许输入负数与整数 可以自己写逻辑也可以用正则
if (this.value == "-") {
this.value = this.value;
}
else {
if (this.value.indexOf("-") != -1) {
var reg = new RegExp("-", "g");
var str = this.value.replace(reg, "");
this.value = '-' + str;
if (this.value.length > 17) {
var a = this.value.substring(0, 17);
this.value = a;
}
}
else {
this.value = this.value.replace(/[^\-\d]/g, '');
if (this.value.length > 16) {
var a = this.value.substring(0, 16);
this.value = a;
}
}
}
}
textarea.onpaste = function (event) {
//不同浏览器取值的方式不一样 需要做判断
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1; //判断Chrome浏览器
if (isChrome) {
var clipData = event.clipboardData;
} else {
var clipData = window.clipboardData;
}
return !clipData.getData('text').match(/\D/);
}
textarea.ondragenter = function (event) {
return false;
}
return editor;
};
//赋给相应的单元格
for (var i = 0; i < responseData.QueryReportDataGather.length; i++) {
sheet.setCellType(i, 3, NumberCellType)
sheet.setCellType(i, 4, NumberCellType)
}
spread.commandManager().register('down',
function (spread) {
spread.suspendEvent();
var activeSheet = spread.getActiveSheet();
var RowCount = activeSheet.getRowCount();
var select = activeSheet.getSelections();
//判断是否在第三列和第四列
if (select[0].col == 3 || select[0].col == 4) {
if (select[0].col == 3 && select[0].row == RowCount - 1) {
activeSheet.setActiveCell(0, 4);
activeSheet.showRow(0, GC.Spread.Sheets.VerticalPosition.top);
} else {
if (select[0].col == 4 && select[0].row == RowCount - 1) {
activeSheet.setActiveCell(0, 3);
activeSheet.showRow(0, GC.Spread.Sheets.VerticalPosition.top);
} else {
spread.commandManager().execute({ cmd: "commitInputNavigationDown", sheetName: activeSheet.name() });
}
}
} else {
//不在3、4列的话把焦点拉回到该行的第三列
activeSheet.setActiveCell(select[0].row, 3);
activeSheet.showRow(select[0].row, GC.Spread.Sheets.VerticalPosition.center);
};
spread.resumeEvent();
}
);
点击按钮更改单元格焦点的移动方向，设置一遍null是为了清空之前已经设置好的单元格移动方向，然后再调用相应的代码就可以了
3、Spreadjs自带的复制粘贴正常的需求都可以满足，但是我们的需求都不是正常的，所以没办法只好自己写一个复制粘贴喽，各位有什么逻辑可以往里面加，我们自己的业务就不展示了。
复制：根据页面选择的单元格下标 循环获取到值
var spread = me.spread.spread;
sheet = spread.getActiveSheet();
var fromRange = sheet.getSelections();
if (fromRange.length > 1)
{
Ext.Msg.alert('提示', '不能对多重选择区域使用复制操作,请按下鼠标左键拖动选择区域！');
return;
}
CopyData = [];
for (i = 0; i < fromRange[0].rowCount; i++) {
var t = "";
for (j = 0; j < fromRange[0].colCount; j++) {
var v = fromRange[0].col + j;
t += sheet.getValue(fromRange[0].row + i, v) + "|";
}
CopyData.push(t);
}for (var i = 0; i < CopyData.length; i++) {
var cloData = CopyData[i].split('|');
for (var j = 0; j < cloData.length - 1; j++) {
var t = toRange[0].col + j;
if (t == 3 || t == 4) {
if (cloData[j] != '' && cloData[j] != 'null') {
sheet.setValue(toRange[0].row + i, t, parseFloat(cloData[j]));
}
else {
sheet.getCell(toRange[0].row + i, t).formula(null);
sheet.getCell(toRange[0].row + i, t).value(null);
}
}
}
}4、数值计算，这是我认为做的比较有意思的一个功能。
给sheet页绑定一个选择单元格的事件，然后获取到选择区域内的所有的值做合计 最大值 最小值 平均值等等等等你想算的所有，然后在自己页面上找一个位置显示。
//数值计算
sheet.bind(GC.Spread.Sheets.Events.SelectionChanging, function (e, info) {
var sheet = info.sheet;
var selections = info.newSelections;
selections = sheet.getSelections();
var h = [], l = [];
var num = [], sum = 0;
for (var n = 0; n < selections.length; n++) {
var range = selections[n];
var startRow = range.row;
var rowCount = range.rowCount;
var startCol = range.col;
var colCount = range.colCount;
for (var i = startRow; i < startRow + rowCount; i++) {
if (i >= 0) { h.push(i) };
}
for (var j = startCol; j < startCol + colCount; j++) {
if (j >= 0) { l.push(j) };
}
for (var i = 0; i < h.length; i++) {
for (var j = 0; j < l.length; j++) {
if (typeof (sheet.getValue(h[i], l[j])) == typeof (123)) {
num.push(sheet.getValue(h[i], l[j]));
}
}
};
h = []; l = [];
for (var i = 0; i < num.length; i++) {
if (n == selections.length - 1) {
sum += num[i];
} else {
sum = 0;
}
};
};
if (num.length > 0) {
var max = Math.max.apply(null, num);
var min = Math.min.apply(null, num);
var avg = sum / (num.length);
var s = parseFloat(avg);
s = Math.round(avg * 100) / 100;
var w = parseFloat(sum);
w = Math.round(sum * 100) / 100;
var str = "最大值：" + max + " 最小值：" + min + " 平均值：" + s + " 求和: " + w + "";
$(document.getElementsByName("sum")).html("" + str + "");
}
else {
var str = "最大值：" + "" + " 最小值：" + "" + " 平均值：" + "" + " 求和:" + "" + "";
$(document.getElementsByName("sum")).html("" + str + "");
}
});效果图：
这个可以做一个右键菜单，第一次点击显示这个计算值，第二次点击隐藏，体验也是不错的
5、在线查看Excel 这个只需要查出在数据库存入的路径 通过路径找到并把excel文件转成json字符串 然后返回到前端 根据json显示
前端代码：
spread.fromJSON(JSON.parse(responseData.Data));
Importer importer = new Importer();
FileStream fs = System.IO.File.Open("E:\\Files\\Upload\\2421018.xlsx", FileMode.Open);
string result = importer.ImportExcel(fs);
return result;好了 没有什么可写得了 剩下的都是一下基础设置 那个官网的学习指南都会有，可能还有一些更高级的我没还有学习到 以后再为大家分享！