layui table 使用tab键切换单元格

<script src="${ctx}/static/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script>
    /*
        *编辑数据表格,键盘快捷键方法。
        *可跳过无编辑属性的列
        *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 
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
可以通过监听盘事件来实现盘快捷的功能,同时也可以通过监听 table单元格编辑事件来判断当前编辑的单元格位置,从而实现切换单元格编辑的功能。 具体实现方式如下: 1. 监听盘事件,当按下 Tab 时,判断当前正在编辑的单元格位置,然后切换到下一个单元格进行编辑。 ``` // 监听盘事件 $(document).keydown(function (e) { // 判断是否按下了 Tab if (e.keyCode === 9) { // 阻止默认事件 e.preventDefault(); // 获取当前编辑的单元格位置 var editIndex = $('table').find('.layui-table-edit').parent().index(); // 切换到下一个单元格进行编辑 $('table').find('td:eq(' + (editIndex + 1) + ')').trigger('click'); } }); ``` 2. 监听 table单元格编辑事件,当单元格进入编辑状态时,添加一个 class 名称用于标记当前正在编辑的单元格。 ``` // 监听 table单元格编辑事件 table.on('edit(test)', function(obj){ // 添加 class 名称用于标记当前正在编辑的单元格 $(obj.tr).find('td:eq('+obj.field+')').addClass('layui-table-edit'); }); ``` 3. 监听 table单元格编辑结束事件,当结束编辑时,移除用于标记的 class 名称。 ``` // 监听 table单元格编辑结束事件 table.on('tool(test)', function(obj){ // 移除用于标记的 class 名称 $(obj.tr).find('.layui-table-edit').removeClass('layui-table-edit'); }); ``` 通过以上三个步骤的组合,可以实现盘快捷切换单元格编辑的功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值