bootstrap-table 键盘上下选中行

最新推荐文章于 2023-05-06 17:59:22 发布

原创最新推荐文章于 2023-05-06 17:59:22 发布 · 691 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #javascript #html

这篇博客探讨了一个在使用键盘控制表格行上下滑动时遇到的keydown事件无效的故障。作者通过JavaScript和jQuery实现了对Bootstrap Table的事件监听，当用户按下上箭头(38)或下箭头(40)键时，选中行会相应上移或下移。文章提供了详细的代码示例，展示了如何检查当前选中行并切换选中状态，从而解决该问题。

在通过键盘控制行上下滑动的时候，遇到一个keydown无效的问题。

具体参考： https://www.cnblogs.com/goloving/p/13220359.html

$(document).on("keydown", "#uiLayoutCenter", function (event) {
            let arrs = $("#bootstrap-table").bootstrapTable('getSelections');
            if (arrs.length == 1) {
                let data = $("#bootstrap-table").bootstrapTable('getData');
                for (let j = 0; j < data.length; j++) {
                    if (data[j].stockId == arrs[0].stockId) {
                        if (event.keyCode === 38) { // up
                            if (j > 0) {
                                $("#bootstrap-table").bootstrapTable('uncheckBy', { field: 'stockId', values: [arrs[0].stockId] });
                                $("#bootstrap-table").bootstrapTable('checkBy', { field: 'stockId', values: [data[j - 1].stockId]});
                            } else {
                                break;
                            }
                        } else if (event.keyCode === 40) { // down
                            if (j < data.length - 1) {
                                $("#bootstrap-table").bootstrapTable('uncheckBy', {field: 'stockId', values: [arrs[0].stockId] });
                                $("#bootstrap-table").bootstrapTable('checkBy', {field: 'stockId', values: [data[j + 1].stockId]});
                            } else {
                                break;
                            }
                        }
                    }
                }
            }
            event.preventDefault();
        });```