layui table更新一行数据

需求

        点击一行数据后面的处理,只刷新这行数据的内容,不全部刷新页面

update  

layui 给我们提供了update方法,可以用来修改当前行数据

//工具条事件
table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
  var data = obj.data; //获得当前行数据
  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
  var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
 
  if(layEvent === 'detail'){ //查看
    //do somehing
  } else if(layEvent === 'del'){ //删除
    layer.confirm('真的删除行么', function(index){
      obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
      layer.close(index);
      //向服务端发送删除指令
    });
  } else if(layEvent === 'edit'){ //编辑
    //同步更新缓存对应的值  --- 看这里
    obj.update({
      username: '123'
      ,title: 'xxx'
    });
  } 
});

实际应用

但是这样只能更新行数据,是没有办法更新toobar的

table.on('tool(test)', function(obj){ 
  var data = obj.data; //获得当前行数据
  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）  
    if(layEvent === 'updateStatus'){ //修改状态
        //ajax请求  -- 略  status -> 1
       //更新当前行数据的状态值  status 是属性值
    obj.update({
      status: 1 
    });
  }
});

源码里面的定义

这个代码是从：https://blog.csdn.net/MicroAnswer/article/details/102871487,

我本地的table.js 没有格式化 所以就灭有翻译,直接引用了一下

 // 这里就是我们实际调用更新的代码位置。
        ,update: function(fields){ //修改行数据
          fields = fields || {};

          // 遍历传进来的每一个键值对（实际上就是我们的每一条数据）。
          layui.each(fields, function(key, value){
            // data 是通过服务器返回的实际的每一行数据
            if(key in data){

             // 这边定义一个templet用于确定下方是使用模板来更新数据还是
             // 直接使用字段的值来进行填充。
              var templet,
              td = tr.children('td[data-field="'+ key +'"]');
              data[key] = value;

              // 这个 eachCols 就是一个循环，i 是下标， item2 就是我们render函数
              // 传递进来的每一个col的配置项。
              that.eachCols(function(i, item2){

                // 判断指定字段是否使用模板进行数据展示。
                // 是的话就直接赋值模板。
                if(item2.field == key && item2.templet){
                  templet = item2.templet;
                }
              });

              // 然后这里就进行数据的模板渲染，然后更新到表格界面
              td.children(ELEM_CELL).html(parseTempData({
                templet: templet
              }, value, data));
              td.data('content', value);
            }
          });
        }

分析:其实可以看到update方法就是:

1.传入过去的fileds数组进行遍历

2.把需要更新的filed的值进行更新

3.如果filed是有模板:templet 进行渲染的话就进重新进行模板渲染

所以要实现toolbar一起更新,我们就把toolbar 

1. 添加一个filed

2. 调用update 重新渲染templet 就可以了

toolbar一起更新 

之前定义的toolbar

 修改后的toolbar

1.把toolbar - 修改为 : templet

2.添加filed 字段: remark1这个字段是后台返回的一个字段,我的代码里面这个字段没有用到,大家可以重新定义一个

这里其实主要就是为了让 当执行update字段的时候让它重新渲染

 在我们的update里面把这个字段也更新一下

table.on('tool(test)', function(obj){ 
  var data = obj.data; //获得当前行数据
  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）  
    if(layEvent === 'updateStatus'){ //修改状态
        //ajax请求  -- 略  status -> 1
       //更新当前行数据的状态值  status 是属性值
    obj.update({
      status: 1 ,
      remark1:'' //这里的字段值随便是什么都可以,主要是为了重新让它渲染
    });
  }
});

这样就可以实现只刷薪当前行数据和toolbarl