在 jQuery EasyUI 中，数据网格（DataGrid）默认仅支持数据展示，若需直接在表格中修改或新增记录，需启用行内编辑功能。本文通过完整示例演示如何配置列编辑器、绑定编辑事件并实现保存与取消逻辑，帮助开发者快速掌握行内编辑的实现路径与关键判断依据。

初始化数据网格与基础配置

启用行内编辑的第一步是正确初始化 DataGrid 组件。通过设置 singleSelect: true 限制单选模式，并指定 idField: 'itemid' 作为唯一标识字段，确保后续编辑操作能准确定位目标行。数据源通过 url: 'datagrid_data.json' 加载，列定义中需预留 action 列用于渲染操作按钮。

$(function(){
    $('#tt').datagrid({
        title:'Editable DataGrid',
        iconCls:'icon-edit',
        width:660,
        height:250,
        singleSelect:true,
        idField:'itemid',
        url:'datagrid_data.json',
        columns:[[...]],
        onBeforeEdit:function(index,row){
            row.editing = true;
            updateActions(index);
        },
        onAfterEdit:function(index,row){
            row.editing = false;
            updateActions(index);
        },
        onCancelEdit:function(index,row){
            row.editing = false;
            updateActions(index);
        }
    });
});

上述配置中绑定了三个核心事件：onBeforeEdit、onAfterEdit 和 onCancelEdit，用于在编辑生命周期中切换行状态并刷新操作列。

配置列编辑器类型与参数

在列定义中为需要编辑的字段添加 editor 属性，即可激活对应类型的输入控件。EasyUI 支持多种内置编辑器，如 text、numberbox、combobox 和 checkbox。

{field:'productid',title:'Product',width:100,
    formatter:function(value){
        for(var i=0; i

其中 combobox 编辑器通过 data: products 绑定本地数据源，required: true 强制用户选择有效值；checkbox 编辑器通过 on 和 off 定义选中与未选中时的实际存储值。

实现编辑、保存与取消操作

操作列通过 formatter 动态生成按钮链接，根据当前行是否处于编辑状态显示不同操作项。点击按钮时调用对应函数，并通过 getRowIndex 获取目标行索引。

function getRowIndex(target){
    var tr = $(target).closest('tr.datagrid-row');
    return parseInt(tr.attr('datagrid-row-index'));
}
function editrow(target){
    $('#tt').datagrid('beginEdit', getRowIndex(target));
}
function deleterow(target){
    $.messager.confirm('Confirm','Are you sure?',function(r){
        if (r){
            $('#tt').datagrid('deleteRow', getRowIndex(target));
        }
    });
}
function saverow(target){
    $('#tt').datagrid('endEdit', getRowIndex(target));
}
function cancelrow(target){
    $('#tt').datagrid('cancelEdit', getRowIndex(target));
}

beginEdit 触发编辑模式，endEdit 提交更改并触发 onAfterEdit，cancelEdit 放弃修改并触发 onCancelEdit。删除操作前通过 $.messager.confirm 进行二次确认，防止误删。

同步行编辑状态与界面更新

编辑状态切换后，需同步更新操作列按钮显示。通过 updateActions 函数调用 updateRow 方法刷新指定行，确保界面与数据状态一致。

function updateActions(index){
    $('#tt').datagrid('updateRow',{
        index: index,
        row:{}
    });
}

该函数在 onBeforeEdit、onAfterEdit 和 onCancelEdit 中均被调用，保证每次状态变更后操作列能正确渲染 Edit/Delete 或 Save/Cancel 按钮。