因layui表格可编辑的单元格需要单独控制,所以找资料及自己琢磨了一下,现功能已实现,具体代码如下:
需要在table.render中添加done事件,需要注意的是,如果默认没有指定某个单元格,则会将整行的单元格都设置为可编辑。
, done: function (res, curr, count) {
let tableView = this.elem.next();
layui.each(res.data, function (i, item) {
if (item.CustomerType === '门店') {
//tableView.find('tr[data-index=' + i + ']').find('td').eq(9).data('edit', true); //设置下标为9的单元格为可编辑
tableView.find('tr[data-index=' + i + ']').find('td').data('edit', true);
}
})
}
注意:单独控制时无需设置属性 edit: ‘text’ ,如果设置的话,则需要在if后添加else判断
if (item.CustomerType === '门店') {
//tableView.find('tr[data-index=' + i + ']').find('td').eq(9).data('edit', true); //设置下标为9的单元格为可编辑
tableView.find('tr[data-index=' + i + ']').find('td').data('edit', true);
}else {
// tableView.find('tr[data-index=' + i + ']').find('td').eq(9).data('edit', false);
tableView.find('tr[data-index=' + i + ']').find('td').data('edit', false);
}
单元格编辑后监听事件代码如下:
table.on('edit(tb)', function (obj) {
var value = obj.value;//修改后的数据
var field = obj.field;//修改的字段名
var data = obj.data;//修改的当行数据
if (value.length > 50) { //判断字段长度
layer.msg("字符长度不能超过50!", { icon: 2 });
return false;
}
//获取修改行的ID值
var Id= data.Id;
$.post("/Data/Record/EditCustomerName", { Id: Id, CustomerName: value }, function (data) {
if (data.suc) {
layer.msg("修改成功!", { icon: 1 });
} else {
layer.msg("修改失败!", { icon: 2 });
}
});
});
也可弹出后台返回的消息数据。