需求目的：

双击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