Spreadjs纯前端表格控件

最新推荐文章于 2024-10-28 14:11:17 发布

一郭不够吃i

最新推荐文章于 2024-10-28 14:11:17 发布

阅读量9.6k

点赞数 3

分类专栏：随笔文章标签： Spreadj .net java 前端控件

本文链接：https://blog.csdn.net/Guo_men/article/details/77702709

版权

随笔专栏收录该内容

3 篇文章 0 订阅

订阅专栏

SpreadJS纯前端表格控件是基于HTML5的JavaScript电子表格和网格功能控件，适用于.NET、Java和移动端等各平台在线编辑类Excel功能的表格程序开发，类似Excel。

页面引用相应的js

如果购买正式版的话会有license.js，类似于密钥一样引用即可，FileSaver.js和excelio.js是前端导出需要的，最后一个是打印。

html里只需要放一个div就可以了，相当于SpreaJS的容器。

<div id="ss" style="margin-left:50px;width:1080px;height:600px;border:1px #000 solid;"></div>

在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)
                }

2、录入习惯，点击回车后鼠标焦点移动方向，Code实现焦点向下移动且只在第三列和第四列移动。

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();
                    }
            );

向下写down 上up 左left 右right

点击按钮更改单元格焦点的移动方向，设置一遍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;


好了 没有什么可写得了 剩下的都是一下基础设置 那个官网的学习指南都会有，可能还有一些更高级的我没还有学习到 以后再为大家分享！