媒介 | 题目背景

本例是由一名用户提出的现实需求。在相似金额的单子中，一个单元格仅许可填写一名数字，每个单元格都对应着一个数字位，比方千位、万位、百位等。

据此需求举行剖析，可知须要完成以下几点基本操纵：

1. 须要把对应表格地区庇护并锁定，不能直接许可用户编辑单元格内容，不然不能保证用户仅输入一名数字；
2. 须要针对键盘事宜举行监听，经由过程事宜代码为单元格赋值，过滤掉除数字外的别的字符；
3. 在一个单元格填写终了后，运动单元格自动后移到下一个单元格上，不须要鼠标点选或键盘切换。

本文基于SpreadJS V12版本，下载请点击。

示例代码剖析

由以上剖析可知，起首须要对表单举行庇护设置，同时设置一下款式和表头，以下所示：

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount : 1 });
var sheet = spread.getActiveSheet();
// 设置表单庇护
sheet.options.isProtected = true;
sheet.setRowCount(5);
sheet.setColumnCount(9);
sheet.defaults.rowHeight = 60;
sheet.defaults.colWidth = 40;
var style = sheet.getDefaultStyle();
// 设置默许款式的边框
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);
// 设置对齐体式格局
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
sheet.setDefaultStyle(style);
var arr = ["百","十","万","千","百","十", "元", "角", "分"];
for(let i=0; i<arr.length; i++){
       sheet.setValue(0, i, arr[i], GC.Spread.Sheets.SheetArea.colHeader);
}
sheet.setRowHeight(0, 60, GC.Spread.Sheets.SheetArea.colHeader);

键盘事宜须要绑定到div上，先举行字符过滤，再实行填值和挪动单元格操纵。以下所示：

$("#ss").keydown(function (event) {
    // 推断是不是是键盘数字键
    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);
            // 挪用敕令向后挪动一个单元格
            spread.commandManager().execute({
                cmd: "moveToNextCell",
                sheetName: sheet.name()
            });
        }
    }
});

须要完全示例，请点击此处下载。

补充议论

本例仅仅展现了最基本的完成思绪，仍有许多没有完美的处所，因为篇幅要素，仅在此处举行议论补充一下。比方：在用户填写错误时，怎样打消或删除？当页面上另有其他数据地区时，怎样做到自动后移单元格不会超越金额地区？这些题目人人能够思索补充。

SpreadJS | 下载试用

纯前端表格控件SpreadJS，是市面上规划与功用都与 Excel 高度相似的一款表格控件，全中文操纵界面，适用于.NET、Java、挪动端等多个平台的类 Excel 数据开辟，备受华为、中通、民航遨游飞翔学院等国内知名企业客户喜爱。