Mikel
来源： layui table更新一行数据_layui更新table行信息-CSDN博客
需求
点击一行数据后面的处理,只刷新这行数据的内容,不全部刷新页面
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
————————————————
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/sunshinezx8023/article/details/119343923
