jeasyui可编辑datagrid添加行编辑按钮及保存校验问题

解决方案 #

最优方案：直接基于现有edatagrid扩展（无需切换普通datagrid） #

你原本的edatagrid双击编辑逻辑已经跑通，不需要重构切换为普通datagrid，只需加操作列和对应的触发方法即可复用所有现有校验、提交逻辑：

1. 放开HTML中注释的Action列

<th field='action' title='Action' width="80" align='center' formatter='formatAction'>Action</th>

2. 新增操作列格式化和对应的触发函数

// 操作列格式化
function formatAction(val, row, index) {
    // 获取当前正在编辑的行索引
    const editIndex = $('#my_table_edit_id').edatagrid('getEditingRowIndex');
    if (editIndex === index) {
        return `<a href="javascript:void(0)" onclick="saveRow(${index})">保存</a> | <a href="javascript:void(0)" onclick="cancelRow(${index})">取消</a>`;
    } else {
        return `<a href="javascript:void(0)" onclick="editRow(${index})">编辑</a>`;
    }
}
// 触发行编辑
function editRow(index) {
    $('#my_table_edit_id').edatagrid('editRow', index);
    $('#my_table_edit_id').datagrid('refreshRow', index);
}
// 保存行编辑
function saveRow(index) {
    $('#my_table_edit_id').edatagrid('saveRow', index);
}
// 取消行编辑
function cancelRow(index) {
    $('#my_table_edit_id').edatagrid('cancelRow', index);
    $('#my_table_edit_id').datagrid('refreshRow', index);
}

原有edatagrid的onBeforeSave校验逻辑、updateUrl提交配置、onSuccess/onError回调完全复用，和之前双击编辑的运行逻辑一致，无需额外修改。

普通datagrid方案的报错修复 #

如果你一定要使用普通datagrid，你的报错是因为datagrid('updateRow')方法必须传入index和row参数，且普通datagrid本身没有内置updateUrl提交能力，需要自己写ajax请求提交数据：

1. 首先删除onEndEdit里的错误代码，替换为如下逻辑：

onEndEdit:function(index,row, changes){
    const variable_1 = "19.00";
    const variable_2 = "1";
    // 校验逻辑
    if(parseFloat(row.price) > parseFloat(variable_1) && variable_2==1){
        alertify.confirm( "注意：频道M.R.P高于Rs."+variable_1+"，应当创建为指定类型的套餐。",  (e)=> {
            if(e){
                // 校验通过后手动发ajax提交数据
                $.post('<?php echo base_url() ?>index.php/Ajax/update_action_new', row, function(res){
                    res = JSON.parse(res);
                    if(res.code == 0){
                        alertify.alert(res.msg || '记录更新成功');
                        row.editing = false;
                        $('#table_id').datagrid('refreshRow', index);
                    }else{
                        alertify.alert(res.msg || '更新失败，请重试');
                        $('#table_id').datagrid('beginEdit', index);
                    }
                })
            }else{
                $('#table_id').datagrid('cancelEdit', index);
            }
        });
        return false;
    }
    // 无需确认的场景直接提交
    $.post('<?php echo base_url() ?>index.php/Ajax/update_action_new', row, function(res){
        // 同上处理回调逻辑
    })
},

2. 普通datagrid没有onSuccess、onError、updateUrl这些配置项，是edatagrid的专属能力，你之前写的对应配置不会生效，相关逻辑都要放到自定义的ajax回调中处理。

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