MVC SpreaJS—学习之篇

2018-06-22 06:06:21来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

页面引用相应的js以及css

因为SpreaJS是用jquery操作的所以要引用一个jquery的js,第二个js以及最后的css是SpreaJS本身需要引用的,第三个js是做打印才会用到的。

 

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

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

在js直接初始化调用就可以了

//页面初始化
        window.onload = function () {
            var spread = new GcSpread.Sheets.Spread(document.getElementById('ss'), { sheetCount: 1 });
        };
View Code

往表格添加设置数据官网上都有教程:http://demo.gcpowertools.com.cn/SpreadJS/TutorialSample/#/samples

SpreadJS一些属性以及方法,每行都会有注释。

//页面初始化
        window.onload = function () {
            var spread = new GcSpread.Sheets.Spread(document.getElementById('ss'), { sheetCount: 1 });
            var spreadNS = GcSpread.Sheets;
            //获取当前第一个sheet页,0代表索引
            var sheet = spread.getSheet(0);
            SheetArea = spreadNS.SheetArea;
            //在这个里面写相应的代码,否则不生效,结尾加sheet.isPaintSuspended(false);
            sheet.isPaintSuspended(true);
            //禁止拖拽单元格
            spread.canUserDragDrop(false);
            //页面视图31行9列
            sheet.setRowCount(31, SheetArea.viewport);
            sheet.setColumnCount(9, SheetArea.viewport);
            //显示具有零宽度或高度的列或行的双网格线。
            spread.resizeZeroIndicator(GcSpread.Sheets.ResizeZeroIndicator.Enhanced);
            //sheet页名称
            sheet.setName("A企业(集团)主要经济指标月报");
            //全局锁定,不可编辑
            sheet.setIsProtected(true);
            //设置用户不可选已锁定的
            sheet.protectionOption({
                allowSelectLockedCells: false,
            });
            //新建sheet页按钮隐藏
            spread.newTabVisible(false);
            
            //获取单元格的值
            //alert(sheet.getValue(0,3));
            //设定某个单元格不可编辑
            //sheet.getCell(0, 3).locked(true);

            //根据单元格获取索引
            //var range = GcSpread.Sheets.Calc.formulaToRange(sheet, "E5", 0, 0);

            //sheet页名称不可编辑
            spread.tabEditable(false)
sheet.isPaintSuspended(false);
};

 

验证信息,输入错误提示消息

 //数据校验
            //输入5到20之间
            spread.highlightInvalidData(true);
            var dv = GcSpread.Sheets.DefaultDataValidator.createNumberValidator(GcSpread.Sheets.ComparisonOperator.Between, "5", "20", true);
            dv.showInputMessage = true;
            dv.inputMessage = "只能添5到20之间的";
            dv.inputTitle = "错误";
            //dv.IgnoreBlank(false);
            sheet.setDataValidator(1, 3, dv);
            
            //输入大于50
            var dv = GcSpread.Sheets.DefaultDataValidator.createNumberValidator(GcSpread.Sheets.ComparisonOperator.GreaterThan,"50", true);
            dv.showInputMessage = true;
            dv.showErrorMessage = true;
            dv.inputMessage = "不能大于50";
            dv.inputTitle = "错误";
            //dv.IgnoreBlank(false);
            sheet.setDataValidator(2, 3, dv);

限制输入,只允许输入数字

//非数字禁止输入 
        function NumberCellType() {
        }
        NumberCellType.prototype = new GcSpread.Sheets.TextCellType();
        NumberCellType.prototype.createEditorElement = function (context) {
            var editor = GcSpread.Sheets.TextCellType.prototype.createEditorElement.call(this, context);
            var textarea = editor.firstChild;
            textarea.onkeypress = function (event) {
                return event.keyCode >= 48 && event.keyCode <= 57 || event.keyCode == 46
            }
            textarea.onkeyup = function (event) {
                this.value = this.value.replace(/[\u4e00-\u9fa5]/g, '').replace(/\D/g, '')
            }
            textarea.onpaste = function (event) {
                var clipData = event.clipboardData;
                return !clipData.getData('text').match(/\D/);
            }
            textarea.ondragenter = function (event) {
                return false;
            }
            return editor;
        };


//此单元格只能输入数字 单元格调用上面的方法(NumberCellType)就可以了
                sheet.setCellType(3, 3, new NumberCellType())
                sheet.setCellType(4, 4, new NumberCellType())

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:ASP.NET Core 1.1 Preview 1 简介(包含.NETCore 1.1升级公告)

下一篇:[水煮 ASP.NET Web API 2 方法论] 目 录