标签:event efault 教程 closed 获取 css prototype match 技术
页面引用相应的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())
标签:event efault 教程 closed 获取 css prototype match 技术
原文地址:http://www.cnblogs.com/GZ040825/p/6098665.html