摘要：在類似金額的票據(jù)中，一個(gè)單元格僅允許填寫(xiě)一位數(shù)字，每一個(gè)單元格都對(duì)應(yīng)著一個(gè)數(shù)字位，例如千位萬(wàn)位百位等。例如在用戶填寫(xiě)錯(cuò)誤時(shí)，如何撤銷(xiāo)或刪除當(dāng)頁(yè)面上還有其他數(shù)據(jù)區(qū)域時(shí)，如何做到自動(dòng)后移單元格不會(huì)超出金額區(qū)域這些問(wèn)題大家可以思考補(bǔ)充。

本例是由一位用戶提出的實(shí)際需求。在類似金額的票據(jù)中，一個(gè)單元格僅允許填寫(xiě)一位數(shù)字，每一個(gè)單元格都對(duì)應(yīng)著一個(gè)數(shù)字位，例如千位、萬(wàn)位、百位等。

據(jù)此需求進(jìn)行分析，可知需要實(shí)現(xiàn)以下幾點(diǎn)基本操作：

需要把對(duì)應(yīng)表格區(qū)域保護(hù)并鎖定，不能直接允許用戶編輯單元格內(nèi)容，否則不能保證用戶僅輸入一位數(shù)字；

需要針對(duì)鍵盤(pán)事件進(jìn)行監(jiān)聽(tīng)，通過(guò)事件代碼為單元格賦值，過(guò)濾掉除數(shù)字外的其它字符；

在一個(gè)單元格填寫(xiě)完畢后，活動(dòng)單元格自動(dòng)后移到下一個(gè)單元格上，不需要鼠標(biāo)點(diǎn)選或鍵盤(pán)切換。

本文基于SpreadJS V12版本，下載請(qǐng)點(diǎn)擊。

由以上分析可知，首先需要對(duì)表單進(jìn)行保護(hù)設(shè)置，同時(shí)設(shè)置一下樣式和表頭，如下所示：

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount : 1 });
var sheet = spread.getActiveSheet();
// 設(shè)置表單保護(hù)
sheet.options.isProtected = true;
sheet.setRowCount(5);
sheet.setColumnCount(9);
sheet.defaults.rowHeight = 60;
sheet.defaults.colWidth = 40;
var style = sheet.getDefaultStyle();
// 設(shè)置默認(rèn)樣式的邊框
style.borderLeft =new GC.Spread.Sheets.LineBorder("black",GC.Spread.Sheets.LineStyle.thin);
style.borderTop = new GC.Spread.Sheets.LineBorder("black",GC.Spread.Sheets.LineStyle.thin);
style.borderRight = new GC.Spread.Sheets.LineBorder("black",GC.Spread.Sheets.LineStyle.thin);
style.borderBottom = new GC.Spread.Sheets.LineBorder("black",GC.Spread.Sheets.LineStyle.thin);
// 設(shè)置對(duì)齊方式
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
sheet.setDefaultStyle(style);
var arr = ["百","十","萬(wàn)","千","百","十", "元", "角", "分"];
for(let i=0; i
鍵盤(pán)事件需要綁定到div上，先進(jìn)行字符過(guò)濾，再執(zhí)行填值和移動(dòng)單元格操作。如下所示：
$("#ss").keydown(function (event) {
    // 判斷是否是鍵盤(pán)數(shù)字鍵
    var kc = event.keyCode;
    console.log(kc);
    var keyValue = -1;
    if(kc >= 48 && kc <= 57){
        keyValue = kc - 48;
    }else if(kc >= 96 && kc <= 105){
        keyValue = kc - 96;
    }
    if(keyValue >= 0){
        var sel = sheet.getSelections();
        if(sel && sel.length > 0){
            var row = sel[0].row;
            var col = sel[0].col;
            sheet.setValue(row, col, keyValue);
            // 調(diào)用命令向后移動(dòng)一個(gè)單元格
            spread.commandManager().execute({
                cmd: "moveToNextCell",
                sheetName: sheet.name()
            });
        }
    }
});
需要完整示例，請(qǐng)點(diǎn)擊此處下載。
補(bǔ)充討論
本例僅僅展示了最基礎(chǔ)的實(shí)現(xiàn)思路，仍有很多沒(méi)有完善的地方，由于篇幅因素，僅在此處進(jìn)行討論補(bǔ)充一下。例如：在用戶填寫(xiě)錯(cuò)誤時(shí)，如何撤銷(xiāo)或刪除？當(dāng)頁(yè)面上還有其他數(shù)據(jù)區(qū)域時(shí)，如何做到自動(dòng)后移單元格不會(huì)超出金額區(qū)域？這些問(wèn)題大家可以思考補(bǔ)充。
SpreadJS | 下載試用

純前端表格控件SpreadJS，是市面上布局與功能都與 Excel 高度類似的一款表格控件，全中文操作界面，適用于.NET、Java、移動(dòng)端等多個(gè)平臺(tái)的類 Excel 數(shù)據(jù)開(kāi)發(fā)，備受華為、中通、民航飛行學(xué)院等國(guó)內(nèi)知名企業(yè)客戶青睞。