如何刷新w2ui grid以渲染编程修改后的记录值？

你遇到的问题是w2ui v1.5版本grid的常见使用误区，核心原因和解决方法如下： #

问题根因 #

• 调用refreshCell参数错误：该方法第二个参数是列绑定的field字段名，不是要刷新的值，传值会导致方法执行无效
• 单元格处于编辑状态：change事件触发时，当前修改的单元格仍处于编辑态，此时修改records的值只会更新内存数据，不会同步到编辑框的UI展示
• 事件循环触发：用set方法回退值时会再次触发change事件，导致重复提交AJAX请求，反而覆盖你回退的数值

修复代码 #

1. 新增锁变量避免事件循环 #

在全局作用域新增一个标识位，区分是用户主动修改还是冲突回退的自动修改：

let isRollback = false;

2. 修改change事件逻辑 #

增加锁判断，避免回退操作触发提交：

w2ui.myGrid.on('change',(event)=>{
    // 自动回退操作直接跳过提交逻辑
    if (isRollback) return;
    if(event.value_new !== event.value_previous) {
        const previousNote = event.value_previous;
        const updatedNote = event.value_new;
        const customId = event.recid;

        $.ajax({
            url:`/stuff/${customId}`,
            type:'PUT',
            contentType:'application/json',
            data:JSON.stringify({
                previousNote,
                updatedNote,
            })
        }).done((data, textStatus, xhr) => {
            console.log('DONE--->',data,'status',textStatus,'xhr',xhr);
        }).fail((xhr, textStatus, errorThrown)=>{
            conflictPopup(customId, xhr.responseJSON);
        });
    }
});

3. 修改conflictPopup逻辑 #

先强制退出编辑状态，再修改值刷新：

const conflictPopup = (customId, data) => {
  // 强制退出对应单元格的编辑状态，同步UI和内存数据
  w2ui.myGrid.editField(customId, 'userNotes', false);
  // 加锁，避免set操作触发change事件
  isRollback = true;
  // 更新内存数据
  w2ui.myGrid.set(customId,{userNotes:data.previousNote});
  // 刷新对应单元格UI
  w2ui.myGrid.refreshCell(customId, 'userNotes');
  // 解锁
  isRollback = false;

  w2popup.open({
    title: 'CONFLICT - STALE DATA',
    body: 'oops!',
    actions: {
        Ok(event) {
            w2popup.close();
            isRollback = true;
            w2ui['myGrid'].set(customId,{userNotes: data.currentValue});
            w2ui['myGrid'].refreshCell(customId, 'userNotes');
            isRollback = false;
        }
    }
});
}

额外注意事项 #

• 确认grid列定义中，对应列的field属性值为userNotes，字段名不匹配也会导致刷新失效
• 若你使用了行渲染自定义函数，需要确认渲染逻辑是读取records对应字段的值，没有做静态缓存

内容的提问来源于stack exchange，提问作者PhD