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

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


无需写添加与修改html代码

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

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




（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）效果图如下：

基于springboot整合layui的单元格编辑_字段_02



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


感谢来访！