MVC SpreaJS—学习之篇

页面引用相应的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>

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

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

往表格添加设置数据官网上都有教程: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())
时间: 2024-11-05 16:28:32

MVC SpreaJS—学习之篇的相关文章

MVC基础学习—理论篇

1.      简介 ?  定义?什么是MVC     MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑.数据.界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互的同时,不需要重新编写业务逻辑.MVC被独特的发展起来用于映射传统的输入.处理和输出功能在一个逻辑的图形化用户界面的结构中. ?  VC模式和我们熟悉的WebForm模式    

[转]ASP.NET MVC 5 学习教程:快速入门

本教程将使用Visual Studio 2013手把手教你构建一个入门的ASP.NET MVC5 Web应用程序.本教程配套的C#源码工程可通过如下网址下载:C#版本源码链接.同时,请查阅 Building the Chapter Downloads 来完成编译源码和配置数据库. 在本教程中的源码工程,您可在Visual Studio中运行MVC 5应用程序.您也可以使Web应用程序部署到一个托管服务提供商上.微软提供免费的网络托管多达10个网站,free Windows Azure trial

UI学习第二篇 (控件)

UIbutton 也是一个控件,它属于UIControl 用的最多的就是事件响应 1. //创建按钮对象 UIButton * _botton = [UIButton buttonWithType:UIButtonTypeCustom]; //设置标题 [_botton setTitle:@"按住说话" forstate:UIControlStateNormal]; [_botton setTitle:@"松开说话" forstate:UIControlStateH

JDK源码学习--String篇(二) 关于String采用final修饰的思考

JDK源码学习String篇中,有一处错误,String类用final[不能被改变的]修饰,而我却写成静态的,感谢CTO-淼淼的指正. 风一样的码农提出的String为何采用final的设计,阅读JDK源码的时候,有粗略的思考过,今天下班后又把<Thinking in Java>中关于final的内容重新看了一遍,对此写下一些关于自己的理解和想法. String类中final关键字的使用 final关键字,用来描述一块数据不能被改变,两种可能理由:设计.效率 final使用的三种情况:数据.方

三层学习------理论篇

学校放假了,刚回家的孩子就像个客人被父母招待着.在放假的前几天里,你尽管开口,想吃啥爸妈都会满足你,不过好景可不长!在我家,厨房是老妈的地盘,买菜.做饭.洗碗刷锅,一个人全包了.而在饭店吃饭呢,吃饭的人多了,顾客点的饭菜种类各不相同.前前后后,一个人忙乎,哪里顾得过来,所以饭店就有了分工.前台服务员负责将顾客点的菜上报给厨师和:厨师根据上报的菜单做菜:采购员负责柴米油盐酱醋茶.这样,大家各司其职,井井有条. 我们在家中吃饭比较简单,没有具体的分工.饭店就是一个复杂庞大的系统了,需要合理规划,分工

Python学习基础篇第一篇——快速入门(适合初学者)

一.Python学习基础篇第一篇--(快速入门) 建议从Python2.7开始学习,Python2.7可以支持扩展大量的第三方类库,是目前比较成熟的版本 编写代码的软件推荐将python自带的IDLE和PyCharm集成IDE结合起来使用 1.1 Python命令行 Python命令行将以 >>> 开始,比如 >>>print 'Hello World!' 对于验证简单的命令可以在python自带的IDLE中完成  1.2 在Python自带的IDLE写一段小程序 在所

.Net MVC的学习(一)

套种间作,也挺有意思的--近来学习感悟.DRP学习的同时,折腾了点以前不曾学习但是却很多次耳闻过的东西--Asp.Net中的MVC架构模式. 一.是什么? MVC,即(Model-View-Controller,模型-视图-控制器模式),和三层类似,用于表示一种软件架构模式.在这种模式下,将系统的实现分为模型Model,视图View,控制器Controlller.其中Model:对数据库的操作和一般的业务逻辑.View:负责做出和用户交互的显示:Controller:处理Request和Resp

(asp.net MVC学习)System.Web.Mvc.HtmlHelper学习及使用

在ASP.NET MVC框架中没有了自己的控件,页面显示完全就回到了写html代码的年代.还好在asp.net mvc框架中也有自带的HtmlHelper和UrlHelper两个帮助类.另外在MvcContrib扩展项目中也有扩展一些帮助类,这样我们就不光 只能使用完整的html来编写了需要显示的页面了,就可以使用这些帮助类来完成,但最后运行时都还是要生成html代码的. 先来看看HtmlHelper能帮我们生成一些什么样的html呢.直接看效果吧. <div>          1.使用Ht

Entity Framework学习中级篇

1-EF支持复杂类型的实现 本节,将介绍如何手动构造复杂类型(ComplexType)以及复杂类型的简单操作. 通常,复杂类型是指那些由几个简单的类型组合而成的类型.比如:一张Customer表,其中有FristName和LastName字段,那么对应的Customer实体类将会有FristName和LastName这两个属性.当我们想把FirstName和LastName合成一个名为CustomerName属性时,此时,如果要在EF中实现这个目的,那么我们就需要用到复杂类型. 目前,由于EF不