2022-03-31 工作记录--LayUI-触发单元格编辑

LayUI-触发单元格编辑

在这里插入图片描述

一、实现效果

在这里插入图片描述

二、实现代码

1、前提是要给cols里的对应行添加edit:'text'

在这里插入图片描述

2、触发单元格编辑
table.on('edit(test)', function(obj){
    
     //注:edit是固定事件名,test是table原始容器的属性 lay-filter="对应的值"
            console.log(obj.value); //得到修改后的值
            console.log(obj.field); //当前编辑的字段名
            console.log(obj.data); //所在行的所有相关数据
            $.ajax({
    
    
                url:"{:url('editActivityContent')}",
                type:"post",
                data:{
    
    
                    id:obj.data.cd_id,
                    content:obj.value,
                },
                success:function(res){
    
    
                    res = JSON.parse(res);
                    if(res.sta == 2000){
    
    
                        layer.msg(res.msg,{
    
    icon: 1},function () {
    
    
                            obj.update(res.data) //修改当前行数据
                        });
                    }else{
    
    
                        layer.msg(res.msg,{
    
    icon:2})
                    }
                }
            })
        });

三、官方文档:https://www.layuiweb.com/doc/modules/table.html#onedit

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_48850734/article/details/123883789