• layUI关于table编辑列支持方向键功能


    最近使用layui的框架时,发现table插件不支持键盘快捷键切换单元格,花了点时间实现此功能。

    分享给有需要的朋友们~~~

       /*
        *编辑数据表格,键盘快捷键方法。
        *可跳过无编辑属性的列
        *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-edid="text"]:last').index(),
                td_first_index = tr.find('[data-edid="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;
            }
        }); 
    View Code
  • 相关阅读:
    磁盘缓存
    算法与追MM(转)
    人人都能上清华(转)
    软件加密技术和注册机制原理攻略(转)
    计算二重定积分
    C++运算符重载
    STL中list的用法
    累了??放松一下,看几张关于程序员的几张搞笑图片
    解决来QQ消息后歌曲音量降低问题
    搞ACM的你伤不起(转)
  • 原文地址:https://www.cnblogs.com/kingvi/p/12736156.html
Copyright © 2020-2023  润新知