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

将如下代码加到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;
            }
        });

版权声明:本文为qq_42374233原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。