使用 SpreadJS制作票據金額輸入框

junfeng777 發布于2019-08-23 16:31 / 3575人閱讀

摘要：在類似金額的票據中，一個單元格僅允許填寫一位數字，每一個單元格都對應著一個數字位，例如千位萬位百位等。例如在用戶填寫錯誤時，如何撤銷或刪除當頁面上還有其他數據區域時，如何做到自動后移單元格不會超出金額區域這些問題大家可以思考補充。

前言 | 問題背景

本例是由一位用戶提出的實際需求。在類似金額的票據中，一個單元格僅允許填寫一位數字，每一個單元格都對應著一個數字位，例如千位、萬位、百位等。

據此需求進行分析，可知需要實現以下幾點基本操作：

需要把對應表格區域保護并鎖定，不能直接允許用戶編輯單元格內容，否則不能保證用戶僅輸入一位數字；

需要針對鍵盤事件進行監聽，通過事件代碼為單元格賦值，過濾掉除數字外的其它字符；

在一個單元格填寫完畢后，活動單元格自動后移到下一個單元格上，不需要鼠標點選或鍵盤切換。

本文基于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 輸入金額控制輸入框輸入框監聽輸入框圖片

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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