layui之单元格通过键盘切换编辑

支持 enter，上，下，右键 切换单元格，支持隐藏列跳过切换。

一、edit：‘tex’ 开启单元格修改状态

开启后单元格可编辑但是无法切换

二、通过键盘切换单元格处理函数

<script>
   //方向键的切换
   $(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;
            }
        });
</script>

可通过键盘切换单元格 但是无法保存到数据库，页面刷新数据未修改成功

三、与后台交互代码

//键盘切换编辑
        table.on(edit(dataTable),function (obj1) {
          
   
            //回车即保存
            var data =JSON.stringify(obj1.data);
            var model1 = document.getElementById("model");
            var model=model1.value;
            var createtime1 = document.getElementById("createtime");
            var createtime=createtime1.value;
            console.log(model);
            $.ajax({
          
   
                type : "POST",
                dataType: "json",//通过GET方式上传请求
                contentType : "application/json",//上传内容格式为json结构
                data : data,                                 //上传的参数
                async: false ,
                url : "/updateLocation?model="+model+"&createtime="+createtime,
                success : function(data) {
          
             //请求成功的回调函数
                    if (data.code == 1000) {
          
   
                        layer.msg("编辑成功");
                    }else {
          
   
                        layer.msg(data.msg, {
          
    icon: 5 });
                    }
                },
                error : function(e) {
          
              //请求失败的回调函数
                    console.info(e);
                }
            });
        })

修改之后数据库也修改成功