layui数据表格实现快捷键切换编辑单元格

奋斗的新丁

已于 2022-04-09 10:30:33 修改

阅读量1.6k

点赞数 2

文章标签： javascript

于 2022-04-07 16:53:07 首次发布

本文链接：https://blog.csdn.net/qq_42374233/article/details/124020872

版权

将如下代码加到js里即可

 /*
         *编辑数据表格，键盘快捷键方法。
         *可跳过无编辑属性的列
         *tab 右边一个单元格
         *shift + tab 左边一个单元格
         *enter 下一行的单元格
         *shift + enter 上一行的单元格
         */
        //支持tab+enter 的切换
        $(document).on('keydown keyup', '.layui-input',
           function (event) {
               var td = $(this).parent('td'),
                   index = td.index(),
                   tr = td.parent('tr'),
                   isShift = $(document).data('shift'),
                   isKeydown = (event.type == "keydown");
               switch (event.key) {
                   case "Shift":
                       $(document).data('shift', isKeydown);
                       break;
                   case "Tab":
                       event.preventDefault();
                       isKeydown && td[isShift ? 'prevAll' : 'nextAll']('[data-edit="text"]:first').click();
                       break;
                   case "Enter":
                       isKeydown && tr[isShift ? 'prev' : 'next']().children('td').eq(index).click();
                       break;
               }
           });
        //方向键的切换
        $(document).on('keydown', '.layui-table-edit', function (e) {
            var td = $(this).parent('td'),
                tr = td.parent('tr'),
                trs = tr.parent().parent().find("tr")
            tr_index = tr.index(),
                td_index = td.index(),
                td_last_index = tr.find('[data-edit="text"]:last').index(),
                td_first_index = tr.find('[data-edit="text"]:first').index();

            switch (e.keyCode) {
                case 13:
                case 39:
                    td.nextAll('[data-edit="text"]:first').click();
                    if (td_index == td_last_index) {
                        tr.next().find('td').eq(td_first_index).click();
                        if (tr_index == trs.length - 1) {
                            trs.eq(0).find('td').eq(td_first_index).click()
                        }
                    }
                    setTimeout(function () {
                        $('.last-table-edit').select()
                    }, 0)
                    break;
                case 37:
                    td.prevAll('[data-edit="text"]:first').click();
                    setTimeout(function () {
                        $('.last-table-edit').select()
                    }, 0)
                    break;
                case 38:
                    tr.prev().find('td').eq(td_index).click();
                    setTimeout(function () {
                        $('.last-table-edit').select()
                    }, 0)
                    break;
                case 40:
                    tr.next().find('td').eq(td_index).click();
                    setTimeout(function () {
                        $('.last-table-edit').select()
                    }, 0)
                    break;
            }
        });