Easyui datagrid formatter 删除行失败解决

Easyui datagrid formatter 删除行失败解决

问题现象

使用formatter 为每行新增一个删除操作，,删除第一个行的时候没问题，如果存在多行的时候，当删除行时，提示错误

问题原因

因为是使用 formatter 相当于每行在渲染的时候index已经固定了，因此我在删除的时候就会出现index错误

解决方案

1、使用checkbox选择框进行删除（非行编辑）；
2、在每次删除之后重新的渲染formatter 使得index更新

由于需求要求按行删除，因此选择方案2

错误代码

function formatOpt(value, row, index){
    return '<a href="javascript:void(0)" οnclick="deleteRow('+index+')"><font color="blue" style="text-decoration:underline">删除</font></a> '
}

/*删除行*/
function deleteRow(index){
    $('#addTable').datagrid.('deleteRow',index)
}

修改后代码

function formatOpt(value, row, index){
    return '<a href="javascript:void(0)" οnclick="deleteRow('+index+')"><font color="blue" style="text-decoration:underline">删除</font></a> '
}

/*删除行*/
function deleteRow(index){
    console.log('index',index)
    let dg = $('#addTable');
    // 从数据源中删除该行数据
    let dataSource = dg.datagrid('getData');
    dataSource.rows.splice(index, 1);
    dg.datagrid('loadData', dataSource);
    // 重新设置formatter相关逻辑，更新索引
    dg.datagrid('getColumnOption', 'id').formatter = function(value, row, index){
        return '<a href="javascript:void(0)" οnclick="deleteRow('+index+')"><font color="blue" style="text-decoration:underline">删除</font></a> ';
    };
}
 

如果每次删除之后和服务器交互刷新datagrid也可以解决此问题；