資訊專欄INFORMATION COLUMN
摘要：在類似金額的票據(jù)中，一個單元格僅允許填寫一位數(shù)字，每一個單元格都對應(yīng)著一個數(shù)字位，例如千位萬位百位等。例如在用戶填寫錯誤時，如何撤銷或刪除當(dāng)頁面上還有其他數(shù)據(jù)區(qū)域時，如何做到自動后移單元格不會超出金額區(qū)域這些問題大家可以思考補充。
前言 | 問題背景
本例是由一位用戶提出的實際需求。在類似金額的票據(jù)中，一個單元格僅允許填寫一位數(shù)字，每一個單元格都對應(yīng)著一個數(shù)字位，例如千位、萬位、百位等。
據(jù)此需求進行分析，可知需要實現(xiàn)以下幾點基本操作：
需要把對應(yīng)表格區(qū)域保護并鎖定，不能直接允許用戶編輯單元格內(nèi)容，否則不能保證用戶僅輸入一位數(shù)字；
需要針對鍵盤事件進行監(jiān)聽，通過事件代碼為單元格賦值，過濾掉除數(shù)字外的其它字符；
在一個單元格填寫完畢后，活動單元格自動后移到下一個單元格上，不需要鼠標點選或鍵盤切換。
本文基于SpreadJS V12版本，下載請點擊。
示例代碼分析由以上分析可知，首先需要對表單進行保護設(shè)置，同時設(shè)置一下樣式和表頭，如下所示：
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount : 1 });
var sheet = spread.getActiveSheet();
// 設(shè)置表單保護
sheet.options.isProtected = true;
sheet.setRowCount(5);
sheet.setColumnCount(9);
sheet.defaults.rowHeight = 60;
sheet.defaults.colWidth = 40;
var style = sheet.getDefaultStyle();
// 設(shè)置默認樣式的邊框
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);
// 設(shè)置對齊方式
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上，先進行字符過濾，再執(zhí)行填值和移動單元格操作。如下所示：
$("#ss").keydown(function (event) {
// 判斷是否是鍵盤數(shù)字鍵
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);
// 調(diào)用命令向后移動一個單元格
spread.commandManager().execute({
cmd: "moveToNextCell",
sheetName: sheet.name()
});
}
}
});
需要完整示例，請點擊此處下載。
補充討論
本例僅僅展示了最基礎(chǔ)的實現(xiàn)思路，仍有很多沒有完善的地方，由于篇幅因素，僅在此處進行討論補充一下。例如：在用戶填寫錯誤時，如何撤銷或刪除？當(dāng)頁面上還有其他數(shù)據(jù)區(qū)域時，如何做到自動后移單元格不會超出金額區(qū)域？這些問題大家可以思考補充。
SpreadJS | 下載試用
純前端表格控件SpreadJS，是市面上布局與功能都與 Excel 高度類似的一款表格控件，全中文操作界面，適用于.NET、Java、移動端等多個平臺的類 Excel 數(shù)據(jù)開發(fā)，備受華為、中通、民航飛行學(xué)院等國內(nèi)知名企業(yè)客戶青睞。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103111.html
摘要：復(fù)制粘貼單元格格式和單元格類型本周，讓我們一起來學(xué)習(xí)的復(fù)制粘貼單元格格式和單元格類型，希望我的學(xué)習(xí)筆記能夠幫助你們，從零開始學(xué)習(xí)，并逐步精通。 復(fù)制粘貼、單元格格式和單元格類型 本周，讓我們一起來學(xué)習(xí)SpreadJS 的復(fù)制粘貼、單元格格式和單元格類型，希望我的學(xué)習(xí)筆記能夠幫助你們，從零開始學(xué)習(xí) SpreadJS，并逐步精通。 在此前的學(xué)習(xí)筆記中，相信大家已經(jīng)學(xué)會并熟練掌握了Sprea...
摘要：華為云，從到開發(fā)訓(xùn)練模型，通過極快和極簡實現(xiàn)普惠現(xiàn)如今技術(shù)概念火爆落地應(yīng)用更是繁多，但開發(fā)呢是否困難到底有多痛據(jù)了解，大部分開發(fā)者的工作時間并不長，并且十有八九可能不是科班出身。 華為云EI ModelArts，從0到1開發(fā)訓(xùn)練AI模型，通過極快和極簡實現(xiàn)普惠AI現(xiàn)如今 AI 技術(shù)、概念火爆、落地應(yīng)用更是繁多，但開發(fā)呢？是否困難？到底有多痛？據(jù)了解，大部分 AI 開發(fā)者的工作時間并不長...
摘要：葡萄城的是一個基于技術(shù)的純控件，控件性能流暢，有類似的在線表格編輯器，適合非專業(yè)程序員設(shè)計報表模板，很符合平臺部分無編碼開發(fā)的理念。葡萄城控件產(chǎn)品對于項目的價值控件主要用于本項目中的報表設(shè)計，展示，打印等功能。 showImg(https://segmentfault.com/img/bVbalYk?w=1000&h=400); 華閩通達 - R 平臺應(yīng)用所使用產(chǎn)品：SpreadJS ...
閱讀 3251·2021-11-24 09:39
閱讀 2936·2021-09-09 11:34
閱讀 3203·2021-09-07 09:58
閱讀 2308·2019-08-30 13:07
閱讀 2872·2019-08-29 15:09
閱讀 1569·2019-08-29 13:01
閱讀 2314·2019-08-26 12:18
閱讀 1938·2019-08-26 10:28
