摘要：前端頁面中經常需要使用到表格控件，為方便表單的設計填報，今天嘗試使用一款純前端表格控件。控件下載地址首先初始化此時，頁面中表格已經出現。

前端頁面中經常需要使用到表格控件，為方便表單的設計填報，今天嘗試使用一款純前端表格控件。
控件下載地址：https://www.grapecity.com.cn/...

首先初始化Spread

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });

此時，頁面中表格已經出現。
通過以下方法可以增加，清空，刪除表單：

/*------------------Spread表單--------------------------*/
    spread.addSheet(0);  
    console.log(spread.getSheetCount()); // 3
    spread.setSheetCount(1);
    console.log(spread.getSheetCount()); // 3 初始化時創建了兩個
    var sheet = spread.getSheet(0);
    var sheet1 = spread.getSheetFromName("Sheet3"); 
    console.log (sheet == sheet1);  // 結果：True,此時我頁面的 索引為0 的sheet 名字叫 Sheet3
    // spread.removeSheet(0); 
    // spread.clearSheets(); // 清空了，一片空白
    spread.setSheetCount(4);
    console.log(spread.getActiveSheetIndex()); // 獲取活動表單索引
spread.setActiveSheetIndex(3); // 設置活動表單

通過一下方法可以控制 表單，標簽的一些顯示，標簽名稱背景色等

/*------------------表單名稱標簽--------------------------*/
    // spread.options.tabStripVisible = false; // 標簽條 顯示控制
    // spread.options.newTabVisible = false;
    var curSheet = spread.getActiveSheet();
    //curSheet.options.sheetTabColor = "blue"; // 設置當前sheetTab 背景顏色，
    spread.options.tabEditable = true; // 雙擊是否可修改表單名稱
    spread.options.allowSheetReorder = false; // 是否可通過拖拽調整表單順序
    // spread.startSheetIndex(1); // 設置起始的sheet的索引
    spread.options.tabStripRatio = 0.8; // 設置TabStrip的寬度，取值0-1

滾動條的相關設置

//horizontal，vertical；both；none 拖動滾動條給出提示，默認none
    spread.options.showScrollTip = GC.Spread.Sheets.ShowScrollTip.horizontal; 
    spread.options.showVerticalScrollbar = true; // 控制水平或豎直滾動條是否顯示 showVerticalScrollbar，showHorizontalScrollbar 
    spread.options.scrollbarShowMax = true; // 是否基于表單全部的行列總數顯示滾動條
    spread.options.scrollbarMaxAlign = true; //滾動條末尾是否對齊視圖中表單的最后一行或一列

背景

//        spread.options.backColor = "red";
    //spread.options.backgroundImage = "img/bag.jpg";  //同時設置，圖片優先
    //spread.options.backgroundImageLayout = GC.Spread.Sheets.ImageLayout.stretch; //stretch，center，zoom，none
    spread.options.grayAreaBackColor = "red";// 配合spread.options.scrollbarMaxAlign = false 使用

Spread事件

var activeSheetChanged = GC.Spread.Sheets.Events.ActiveSheetChanged;
    spread.bind(activeSheetChanged,function(){
            console.log("activeSheetChanged");
    })
    // spread.suspendEvent(); // 暫停觸發事件
    // spread.resumeEvent();  // 恢復觸發事件
    var SelectionChanging = GC.Spread.Sheets.Events.SelectionChanging;
    spread.bind(SelectionChanging,function(){
            console.log("SelectionChanging");
    })
    var CellClick = GC.Spread.Sheets.Events.CellClick;
    spread.bind(CellClick,function(){
            console.log("CellClick");
    })
    var SelectionChanged = GC.Spread.Sheets.Events.SelectionChanged;
    spread.bind(SelectionChanged,function(){
            console.log("SelectionChanged");
    })
    var EditStarting = GC.Spread.Sheets.Events.EditStarting;
    spread.bind(EditStarting,function(){
            console.log("EditStarting");
    })
    var EditEnded = GC.Spread.Sheets.Events.EditEnded;
    spread.bind(EditEnded,function(){
            console.log("EditEnded");
    })

事件觸發時控制臺打印出相應提示：

免費在線版Excel：https://demo.grapecity.com.cn...