使用 SpreadJS制作票据金额输入框

收藏

前言 | 问题背景

本例是由一位用户提出的实际需求。在类似金额的票据中，一个单元格仅允许填写一位数字，每一个单元格都对应着一个数字位，例如千位、万位、百位等。

据此需求进行分析，可知需要实现以下几点基本操作：

本文基于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上，先进行字符过滤，再执行填值和移动单元格操作。如下所示：

复制代码

需要完整示例，请点击此处下载。

补充讨论

本例仅仅展示了最基础的实现思路，仍有很多没有完善的地方，由于篇幅因素，仅在此处进行讨论补充一下。例如：在用户填写错误时，如何撤销或删除？当页面上还有其他数据区域时，如何做到自动后移单元格不会超出金额区域？这些问题大家可以思考补充。

		自动登录	找回密码
密码			立即注册

0 个回复