SpreadJS是面向企業(yè)級應(yīng)用開發(fā)、基于HTML5的純JavaScript電子表格控件，可用不到100行代碼，在前端實現(xiàn)Excel的全部功能。提供移動跨平臺和瀏覽器支持，同時滿足.NET、Java、App等應(yīng)用程序中的Web Excel組件開發(fā)、數(shù)據(jù)填報、在線文檔、圖表公式聯(lián)動、類Excel UI設(shè)計。

本文整理了該JavaScript電子表格控件的表單相關(guān)問題及答案，希望對你有所幫助。

點擊下載SpreadJS正式版

問：可以設(shè)置表單的行數(shù)列數(shù)嗎？

可以通過相關(guān)API來設(shè)置表單的行數(shù)、列數(shù)，默認情況表單會有200行、20列。例如：sheet.setRowCount(20, GC.Spread.Sheets.SheetArea.viewport);設(shè)置了表單行數(shù)為20行。

問：如何在新增行的時候復制上一行的樣式？

可以使用getActualStyle()獲取上一行的樣式，在使用setStyle()給新增行設(shè)置樣式，參考代碼：

sheet.addRows(intIndex,1);
      for(var i=0;i<sheet.getColumnCount();i++){
        var actualStyle = sheet.getActualStyle(intIndex-1,i);
        sheet.setStyle(intIndex,i,actualStyle);
      }

問：如何解決調(diào)用setActiveSheet方法后當前表單位置未移動的問題？

可通過獲取到sheet的index后調(diào)用startSheetIndex方法來定位。

問：如何處理報錯“將帶來重復的合并效果”？

確定一下粘貼范圍是不是已經(jīng)存在合并單元格了，如果是，那么粘貼過來會有重復合并的效果。

舉個例子：有兩個合并單元格（0,0,2,2）、(2,1,2,2)。將(0,0,2,2)copyto至 2,1（toRow:2,toColumn:1）就會出現(xiàn)重復合并的情況，因為2,1,2,2上已經(jīng)存在了一個合并單元格，該合并單元格與將要粘貼的區(qū)域存在沖突。

問：如何判斷當前選中的單元格處于可顯示區(qū)域？

用TopRowChanged和LeftColumnChanged事件進行判斷

問：點擊新增按鈕會觸發(fā)什么事件？

SheetTabClick事件中可以通過判斷來獲取 ，例如：

spread.bind(GC.Spread.Sheets.Events.SheetTabClick, function (e, info) {
        alert("Index (" + info.sheetTabIndex + ")");
});

如果是，點擊新增Sheet頁alert的結(jié)果是-1。

問：如何獲取一個單元格中的選中數(shù)據(jù)？

SpreadJS產(chǎn)品本身的接口是獲取不到的，HTML中可以通過window.getSelection()來獲取鼠標選中的范圍的內(nèi)容，

問：（表單保護）如何設(shè)置單元格鎖定？

很多用戶對如何設(shè)置SpreadJS單元格是編輯狀態(tài)比較困惑。下面我們就詳細說明下spreadJS的表單保護機制，如何不讓單元格被編輯。

SpreadJS雖然是一款控件但是他并不是像其他控件一樣只要設(shè)置disabled等屬性就可以禁止編輯。和Excel一樣需要同時設(shè)定鎖定（locked）和保護（Protect）兩個狀態(tài)為true，才能讓單元格禁止編輯。

具體我們分三種情況詳細說明一下。

1. 所有單元格都不能編輯

這種情況比較簡單只要設(shè)置sheet.setIsProtected(true);就可以實現(xiàn)效果，因為sheet默認是被鎖定的，我們只需要設(shè)置保護即可。

2. Sheet中大部分單元格不可編輯只有少數(shù)行列可編輯。

這種情況就和網(wǎng)站示例中所展示的效果一致，綠色單元格格是可以編輯的。其余不可以編輯。

如果我們不希望單元格被編輯，只要給單元格設(shè)置一個locked為true的style即可，如果整行都不希望被編輯，使用setStyle方法時第二個參數(shù)設(shè)置為-1，那么這一行都被locked了。

3. Sheet中大部分單元格可以編輯少數(shù)不能編輯。

和上面第二種情況相反，我們可能只希望少數(shù)幾個單元格是不能編輯的，比如希望第一行作為列頭是不能編輯的。這時只要設(shè)置sheet默認loecked為false，然后將第一行鎖定即可。

var defaultStyle = new GcSpread.Sheets.Style();
defaultStyle.locked = false;
activeSheet.setDefaultStyle(defaultStyle, GcSpread.Sheets.SheetArea.viewport);
var style = new GcSpread.Sheets.Style();
style.locked = true;
style.backColor = "red";
activeSheet.setStyle(0, -1, style);
activeSheet.setIsProtected(true);

以上三種情況就是我們所能遇到的所有情況了。只要理解了表單保護的機制，設(shè)置起來是很簡單的。只要記得最后一定要setIsProtected(true)！

*想要獲得 SpreadJS 更多資源或正版授權(quán)的朋友，可以咨詢了解哦~