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

junfeng777 发布于2019-08-23 16:31 / 3544人阅读

摘要：在类似金额的票据中，一个单元格仅允许填写一位数字，每一个单元格都对应着一个数字位，例如千位万位百位等。例如在用户填写错误时，如何撤销或删除当页面上还有其他数据区域时，如何做到自动后移单元格不会超出金额区域这些问题大家可以思考补充。

前言 | 问题背景

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

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

需要把对应表格区域保护并锁定，不能直接允许用户编辑单元格内容，否则不能保证用户仅输入一位数字；

需要针对键盘事件进行监听，通过事件代码为单元格赋值，过滤掉除数字外的其它字符；

在一个单元格填写完毕后，活动单元格自动后移到下一个单元格上，不需要鼠标点选或键盘切换。

本文基于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
键盘事件需要绑定到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 数据开发，备受华为、中通、民航飞行学院等国内知名企业客户青睐。

GPU云服务器云服务器 js 输入金额控制输入框输入框监听输入框图片

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103111.html

从零开始，SpreadJS新人学习笔记【第5周】

摘要：复制粘贴单元格格式和单元格类型本周，让我们一起来学习的复制粘贴单元格格式和单元格类型，希望我的学习笔记能够帮助你们，从零开始学习，并逐步精通。复制粘贴、单元格格式和单元格类型本周，让我们一起来学习SpreadJS 的复制粘贴、单元格格式和单元格类型，希望我的学习笔记能够帮助你们，从零开始学习 SpreadJS，并逐步精通。在此前的学习笔记中，相信大家已经学会并熟练掌握了Sprea...

shadowbook 2019-08-26 10:18 评论0 收藏0
华为云EI ModelArts，从0到1开发训练AI模型，通过“极快”和“极简”实现普惠AI

摘要：华为云，从到开发训练模型，通过极快和极简实现普惠现如今技术概念火爆落地应用更是繁多，但开发呢是否困难到底有多痛据了解，大部分开发者的工作时间并不长，并且十有八九可能不是科班出身。华为云EI ModelArts，从0到1开发训练AI模型，通过极快和极简实现普惠AI现如今 AI 技术、概念火爆、落地应用更是繁多，但开发呢？是否困难？到底有多痛？据了解，大部分 AI 开发者的工作时间并不长...

Alex 2019-06-26 18:54 评论0 收藏0
纯前端开发案例：用 SpreadJS 搭建信息系统软件开发平台

摘要：葡萄城的是一个基于技术的纯控件，控件性能流畅，有类似的在线表格编辑器，适合非专业程序员设计报表模板，很符合平台部分无编码开发的理念。葡萄城控件产品对于项目的价值控件主要用于本项目中的报表设计，展示，打印等功能。 showImg(https://segmentfault.com/img/bVbalYk?w=1000&h=400); 华闽通达 - R 平台应用所使用产品：SpreadJS ...

Heier 2019-08-22 17:08 评论0 收藏0