jQuery EasyUI 数据网格 – 启用行内编辑

下面直接给你最实用、最常见的几种行内编辑（inline row editing）方法，jQuery EasyUI datagrid 支持超好，复制粘贴就能用，领导最爱的“点击行开始编辑 + 保存/取消按钮”全都有！

方法1：最简单 – 点击行开始编辑（推荐现在就用这个，超级流畅）
双击或点击行进入编辑，编辑完点击别处或按钮保存。

<table id="dg" class="easyui-datagrid" title="行内编辑数据网格" style="width:800px;height:400px"
    data-options="
        url:'your_data.json',
        singleSelect:true,
        fitColumns:true,
        toolbar:'#tb',
        onClickRow:onClickRow
    ">
    <thead>
        <tr>
            <th data-options="field:'id',width:60">ID</th>
            <th data-options="field:'name',width:120,editor:'textbox'">姓名</th>
            <th data-options="field:'age',width:80,editor:{type:'numberbox',options:{min:1,max:120}}">年龄</th>
            <th data-options="field:'sex',width:80,
                editor:{type:'combobox',options:{data:[{value:'男',text:'男'},{value:'女',text:'女'}],valueField:'value',textField:'text'}},
                formatter:function(value){return value=='男'?'男':'女';}">性别</th>
            <th data-options="field:'status',width:80,align:'center',
                editor:{type:'checkbox',options:{on:1,off:0}},
                formatter:function(value){return value==1?'启用':'禁用';}">状态</th>
        </tr>
    </thead>
</table>

<div id="tb" style="padding:5px;">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="appendRow()">新增一行</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="saveRow()">保存当前行</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="cancelEdit()">取消编辑</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="deleteRow()">删除当前行</a>
</div>

<script>
var editIndex = undefined;  // 当前编辑的行索引

function endEditing(){
    if (editIndex == undefined){return true}
    if ($('#dg').datagrid('validateRow', editIndex)){
        $('#dg').datagrid('endEdit', editIndex);
        editIndex = undefined;
        return true;
    } else {
        return false;
    }
}

function onClickRow(index){
    if (editIndex != index){
        if (endEditing()){
            $('#dg').datagrid('selectRow', index).datagrid('beginEdit', index);
            editIndex = index;
        } else {
            $('#dg').datagrid('selectRow', editIndex);
        }
    }
}

function appendRow(){
    if (endEditing()){
        $('#dg').datagrid('appendRow',{status:1});  // 新增一行，默认值
        editIndex = $('#dg').datagrid('getRows').length-1;
        $('#dg').datagrid('selectRow', editIndex).datagrid('beginEdit', editIndex);
    }
}

function saveRow(){
    if (endEditing()){
        var row = $('#dg').datagrid('getSelected');
        // 这里可以发ajax保存到服务器
        $.post('save.php',{row:row},function(res){
            if(res.success){
                $('#dg').datagrid('reload');
                $.messager.show({title:'成功',msg:'保存成功'});
            }
        },'json');
    }
}

function cancelEdit(){
    if (editIndex != undefined){
        $('#dg').datagrid('cancelEdit', editIndex);
        editIndex = undefined;
    }
}

function deleteRow(){
    var row = $('#dg').datagrid('getSelected');
    if(row){
        $.messager.confirm('确认','确定删除这行吗？',function(r){
            if(r){
                // ajax删除
                $('#dg').datagrid('reload');
            }
        });
    }
}
</script>

效果：点击行自动进入编辑，支持文本框、数字框、下拉框、复选框，超级专业！

方法2：每行右边加“编辑/保存/取消”按钮（经典风格，很多后台系统都用这个）

<table id="dg" class="easyui-datagrid" ... >
    <thead>
        <tr>
            <!-- 其他列 -->
            <th field="action" width="120" formatter="actionFormatter">操作</th>
        </tr>
    </thead>
</table>

<script>
function actionFormatter(value,row,index){
    if (row.editing){
        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){
    $('#dg').datagrid('beginEdit', index);
    var row = $('#dg').datagrid('getRows')[index];
    row.editing = true;
    $('#dg').datagrid('refreshRow', index);
}

function saverow(index){
    $('#dg').datagrid('endEdit', index);
    var row = $('#dg').datagrid('getRows')[index];
    row.editing = false;
    $('#dg').datagrid('refreshRow', index);
    // ajax保存
}

function cancelrow(index){
    $('#dg').datagrid('cancelEdit', index);
    var row = $('#dg').datagrid('getRows')[index];
    row.editing = false;
    $('#dg').datagrid('refreshRow', index);
}
</script>

方法3：用官方扩展 edatagrid（双击行编辑 + 自动保存到服务器，最省事）
下载 edatagrid 扩展后：

<table id="dg" class="easyui-edatagrid" url="get_data.php" saveUrl="save.php" updateUrl="update.php" destroyUrl="delete.php" ... >
    <!-- 列定义同上，加 editor -->
</table>

双击行就编辑，保存自动发请求，超级方便！

你现在直接复制方法1到你的页面，刷新一下就能看到行内编辑效果了！
结合之前的复选框 + 自定义分页 + 批量删除，完美后台表格就齐活了。

想要我给你一个完整的HTML文件（带远程数据加载 + 行内编辑 + 保存到服务器示例 + 复选框 + 分页）？
或者你告诉我你想用哪种编辑器（日期框、校验等），我2分钟发你完整代码，复制就能跑！

快说说你现在的需求（比如“要支持新增/修改/删除自动保存”），我手把手帮你搞定，5分钟内看到完美编辑效果！