基于springboot整合layui的单元格编辑

在做项目的时候，比如添加、修改的时候我们可以使用单元格进行编辑，可以减少很多代码量，岂不是美滋滋。

多的话不说，下面来展示一下操作步骤

 

无需写添加与修改html代码

（1）在需要修改的字段后加上  edit: 'text'

 

 

 

（2）监听修改操作

js代码如下：

/** * 监听单元格编辑 */ table.on('edit(labels)', function (obj) { var value = obj.value //得到修改后的值
            , data = obj.data //得到所在行所有键值
            , field = obj.field; //得到字段

        const jiuData = $(this).prev().text(); if ((field == 'userIp')) { if (value == '') { $.message({ message: '用户ip不能为空', type: 'warning', showClose: true }); $(this).val(jiuData) return false; } } //编辑
        var layerIndex = layer.load(3); $.ajax({ type: "PUT", url: "/users/update", datatype: "json", data: data, success: function (data) { if (data.code == 200) { $.message({ message: '编辑成功', type: 'success', showClose: true }); } else { $.message({ message: data.msg, type: 'warning', showClose: true }); } }, error: function () { $.message({ message: 'boom..', type: 'error', showClose: true }); }, complete: function (XHR, TS) { layer.close(layerIndex); } }); });

 

（3）效果图如下：

 

 

 加上这两块代码就可以了，直接在全查询信息里进行编辑，无需再执行跳转，编辑完之后点击屏幕某一块就可以了。

 

感谢来访！