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);
                }
            });
        })

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