MVC SpreaJS—學習之篇

標籤：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>

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

 

MVC SpreaJS—學習之篇