本实例展示如何让SpreadJS按下Tab键后在可编辑(unlocked)单元格之间切换.
SpreadJS 默认按下Tab键后移动至下一个单元格,当设置了表单保护只运行用户编辑部分单元格时,用户会希望可以快速在可编辑单元格中切换,这样可以实现快速填报,提高工作效率。
实现Tab键自定义切换我们需要重新设置按下tab键后的Aciton。下面为重值keymap代码,有关keymap可以参考Using Input Mapping.
activeSheet.addKeyMap(GcSpread.Sheets.Key.tab, false, false, false, false, function() {var sheet = this;var startRow, startCol, row, col, searchStartRow, searchStartCol;
var isLocked;
startRow = sheet.getActiveRowIndex();startCol = sheet.getActiveColumnIndex();var rowCount = sheet.getRowCount();
var colCount = sheet.getColumnCount();
searchStartRow = startRow;for (row = startRow; row < rowCount; row++) {
searchStartCol = row === startRow ? startCol + 1 : 0;if (searchStartCol == colCount) {
row++;searchStartCol = 0;}for (col = searchStartCol; col < colCount; col++) {
isLocked = sheet.getCell(row, col).locked();if (!isLocked) {
if (!sheet.endEdit()) {
return
}sheet.setActiveCell(row, col);return;
}}}for (row = 0; row < rowCount; row++) {
for (col = 0; col < colCount; col++) {
if (row === startRow && col === startCol) {
return
}isLocked = sheet.getCell(row, col).locked();if (!isLocked) {
if (!sheet.endEdit()) {
return
}sheet.setActiveCell(row, col);return;
}}}});
代码中,先从当前单元格的下一个单元格开始寻找locked状态为false的单元格,如果找到则切换ActiveCell为那个单元格,然后停止。只到查找到最后一个单元格,如果没有找到,就在从第一个单元格重新开始查找只到其实单元格结束。
需要注意的是,如果我们是在编辑状态下按下tab那我们希望用户数据数据提交后再切换单元格,所以我们需要在setActiveCell之前调用endEdit方法,结束编辑状态。
代码和逻辑都很简单,大家可以试试,或者直接登陆RunJS查看演示效果:
http://runjs.cn/detail/brfggowz
更多资源
SpreadJS中文学习指南:http://demo.grapecity.com.cn/SpreadJS/TutorialSample/#/samples
SpreadJS在线英文产品文档:http://sphelp.grapecity.com/webhelp/SpreadJSWeb/webframe.html#welcome.html
如果您对SpreadJS产品感兴趣,可以到官方网站下载试用:/developer/spreadjs
如果你有疑问,可以到GCDN论坛获得技术支持:http://gcdn.grapecity.com.cn