layui---单元格编辑---旧值回写问题

在layui的table模块中有单元格编辑功能：

然后通过事件监听我们可以获得编辑后的值和整行数据

table.on('edit(menuList)',function (obj) {
         var field = obj.field; //得到被编辑的字段名
        var value = obj.value; //的到修改后的值
        ...... //后续操作

这是layui为我们提供的功能，在编辑后会将当前页面的信息变为我们修改后的值。

但是我们有时候会有这样的需求：当值编辑后对值进行一定的判断或其他操作，只有满足后才会进行修改操作，不满足我们希望数据能保持不变。显然layui本身没有给我们提供这么一个功能，那么就需要我们自己去寻找。
在编辑单元格进行断点调试我们可以发现如下现象：

在td的下面多了一个input标签，所以这里就是单元格编辑的秘密所在。其原理是，在监听事件执行完成后会将input标签中的值设置到缓存中。所以我们只需要关注这个标签和原始td就好。
在我们的js中做如下操作

 //监听行编辑事件
    table.on('edit(menuList)',function (obj) {
        var old=$(this).prev().text();//旧值
        //在执行完逻辑后进行如下
        //弹窗提示
        layer.open({
            type:1,
            title:'提示',
            icon: 3,
            content: msg,
            btn:['确定','取消'],
            yes:function (index) {
                layer.msg(value); // 这里不做回写直接修改
                layer.close(index)
            },
            btn2:function (index) {
            // 点击取消后回写
            setTimeout(function () {
                    switch (field){
                        case 'pid':  obj.update({pid:old}) ;break;// 更新当前字段在缓存中的数据
                        case 'title': obj.update({title:old}) ;break;
                        case 'icon':  obj.update({icon:old}) ;break;
                        case 'href':  obj.update({href:old}) ;break;
                    }

                },100) //这里必须做延时否则会有bug
            }
        })
      

上面就是layui单元格编辑，回写的解决方案。
看都看完了点个赞再走吧QVQ