需求目的：
双击web单元格编辑后，保存数据到mongodb数据库。就像Excel那样更新数据。
1. 首先Layui 标识列可单击修改
添加 edit:text标识，标识列可修改
{field: 'Id', title: '编号', width: 80, sort: true, fixed: 'left'}
,{field: 'username', title: '用户名' , edit: 'text'}
,{field: 'gender', title: '性别', width: 80 , edit: 'text'}
,{field: 'password', title: '密码', width: 80 , edit: 'text'}
,{field: 'address', title: '地址', width: 80 , edit: 'text'}
,{field: 'email', title: '邮箱', width: 80 , edit: 'text'}
,{field: 'phone', title: '电话', width: 80 , edit: 'text'}
此时点击数据表，可看到数据表进入编辑模式
2. 获取编辑表格事件，添加列修改后监听：
//监听单元格编辑
table.on('edit(test_table)',
function (obj) {
var value = obj.value //得到修改后的值
,
data = obj.data //得到所在行所有键值
,
field = obj.field; //得到字段
layer.msg('[ID: ' + data.Id + '] ' + field + ' 字段更改为：' + value);
console.log(data.Id);
var jsonResult = dataServer.updateUserInfo(obj.data);
if(jsonResult==1){
layer.alert("更新成功", {icon: 6},function () {
x_admin_father_reload();
});
}else{
layer.msg("更新成功！");
}
});
3. 后台添加对应的编辑修改接口：
/**
修改用户列表
*/
func (m UserC) Update(g *gin.Context) {
rsp := new(Rsp)
var info models.User
err := g.BindJSON(&info)
if err != nil {
rsp.Msg = "json faild"
rsp.Code = 201
g.JSON(http.StatusOK, rsp)
return
}
if info.Id.String() == "" {
rsp.Msg = "id is empty!"
rsp.Code = 201
g.JSON(http.StatusOK, rsp)
return
}
filter := bson.D{{"_id", info.Id}}
//selector := bson.M{"_id": updateId}
//updateInfo,_ :=bson.Marshal(&info)
result := m.Mgo.Collection(db.User).FindOneAndReplace(context.Background(), filter, info)
if result != nil {
if result.Err() != nil {
fmt.Println(result.Err())
}
rsp.Msg = "success"
rsp.Code = 200
rsp.Data = 1
g.JSON(http.StatusOK, rsp)
return
}
rsp.Msg = "err"
rsp.Code = 201
rsp.Data = 0
g.JSON(http.StatusOK, rsp)
return
}
4. 查看完成效果：
单击表格并编辑成功！
获取源代码请转发后回复：1
