使用SpreadJS制作账单金额输入框

前言|问题背景本例为用户提出的实际需求。在类似金额的票据中，一个单元格只允许填写一个数字，每个单元格对应一个数字，如千、万、百等。根据这个需求分析可以看出：需要实现以下基本操作：需要保护和锁定对应的表格区域，不能直接允许用户编辑单元格内容，否则不能保证用户只输入一位数字；需要监听键盘事件，通过事件码给单元格赋值，过滤除数字以外的其他字符；填充一个单元格后，活动单元格将自动移动到下一个单元格，无需鼠标单击或键盘切换。本文基于SpreadJSV12版本，请点击下载。样例代码分析从上面的分析可知，首先需要对表单进行保护，同时设置样式和表头，如下：varspread=newGC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:1});varsheet=spread.getActiveSheet();//设置sheet保护sheet.options.isProtected=true;sheet.setRowCount(5);sheet.setColumnCount(9);sheet.defaults.rowHeight=60;sheet.defaults.colWidth=40;varstyle=sheet.getDefaultStyle();//设置默认样式的边框style.borderLeft=newGC.Spread.Sheets.LineBorder("black",GC.Spread.Sheets.LineStyle.thin);style.borderTop=newGC.Spread.Sheets.LineBorder("黑色",GC.Spread.Sheets.LineStyle.thin);style.borderRight=newGC.Spread.Sheets.LineBorder("黑色",GC.Spread.Sheets.LineStyle.thin);style.borderBottom=newGC.Spread.Sheets.LineBorder("black",GC.Spread.Sheets.LineStyle.thin);//设置对齐方式style.hAlign=GC.Spread.Sheets.Horizo??ntalAlign.center;style.vAlign=GC.Spread.Sheets.VerticalAlign.center;sheet.setDefaultStyle(style);vararr=["百","十","万","千","百","十","元","角","分"];for(设i=0;i=48&&kc<=57){keyValue=kc-48;}elseif(kc>=96&&kc<=105){keyValue=kc-96;}if(keyValue>=0){varsel=sheet.getSelections();if(sel&&sel.length>0){varrow=sel[0].row;varcol=sel[0].col;sheet.setValue(row,col,keyValue);//调用命令向后移动一个单元格spread.commandManager().execute({cmd:"moveToNextCell",sheetName:sheet.name()});}}});如需完整示例，请在此处下载。补充讨论这个例子只是展示了最基本的实现思路，还有很多地方不够完善。限于篇幅，这里只做讨论和补充。例如：当用户出错时如何撤消或删除？当页面上有其他数据区域时，如何保证单元格自动后移而不超出数量区域？您可以添加这些问题。传播JS|下载试用纯前端表格控件SpreadJS。是一款布局和功能与市面上Excel高度相似的表格控件。全中文操作界面，适用于.NET、Java、移动端等多平台类Excel数据开发，深受华为、中通、民航飞行学院等国内知名企业客户青睐。