基於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）效果圖如下：

 

 

 加上這兩塊代碼就可以了，直接在全查詢信息里進行編輯，無需再執行跳轉，編輯完之后點擊屏幕某一塊就可以了。

 

感謝來訪！