← 返回所有博客文章

本实例展示如何让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方法,结束编辑状态。

代码和逻辑都很简单,大家可以试试,或者在线查看演示效果

 

更多资源

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