EasyUI DataGrid 实现单行/多行编辑功能

要实现 EasyUI DataGrid 的可编辑很简单，在需要编辑的列添加 editor 【编辑器】就可以了。

---

• 单行编辑

// 初始化数据列表
function initDatagrid() {
    $('#dg').datagrid({
        loadMsg: '数据加载中请稍后……',
        striped: true,
        url: '/api/Employee',
        method: "get",
        striped: true,
        border: true,
        selectOnCheck: false,
        checkOnSelect: false,
        remoteSort: true,
        singleSelect: true,    // 只允许选中一行
        idField: 'EmployeeID',
        pagination: true,
        rownumbers: false,
        fitColumns: true,
        pageSize: 100,   // 每页显示的记录条数，默认为100
        pageList: [20, 50, 100, 200, 500],  // 设置可选的每页记录条数的列表
        columns: [[
            { field: 'ck', checkbox: true },
            { field: 'Num', title: "编号", width: 30, sortable: false },
            {
                field: 'Name', title: "姓名", width: 80, sortable: true,
                editor: {
                    type: 'validatebox',
                    options: { required: true, missingMessage: '请输入姓名' }
                }
            },
            {
                field: 'Sex', title: "性别", width: 50, sortable: true,
                formatter: formatSex,
                // 编辑器
                editor: {
                    type: 'combobox', // 指明控件类型
                    // options里面的内容可选
                    options: {
                        textField: 'sex',
                        valueField: 'value',
                        data: [
                            {
                                sex: '男',
                                value: 0
                            },
                            {
                                sex: '女',
                                value: 1
                            }
                        ],
                        required: true, // 是否必填
                        missingMessage: '请选择性别'
                    }
                }
            }
            ...
        ]],
        // 工具栏
        toolbar: [
            {
                text: "新增",
                iconCls: "icon-add",
                handler: function () {
                    if (isEditing == true) {
                        $.messager.alert('操作提示', '您有正在编辑的数据尚未保存，请先保存或取消编辑！', 'warning');
                    }
                    else {
                        // 在第一行编辑新增数据
                        $('#dg').datagrid('insertRow', {
                            index: 0,
                            row: {
                                Name: '',
                                Sex: '',
                                EntryDate: '',
                                LeaveDate: '',
                                OMPDate: ''
                            }
                        });
                        $("#dg").datagrid("beginEdit", 0);
                        isEditing = true;
                        editRow = 0;

                        isEdit = false;
                    }
                }
            },
            {
                text: "编辑",
                iconCls: "icon-edit",
                handler: function () {
                    var row = $('#dg').datagrid('getSelected');
                    var rowIndex = $('#dg').datagrid('getRowIndex', row);
                    if (isEditing == true && rowIndex != editRow) {
                        $.messager.alert('操作提示', '您有正在编辑的数据尚未保存，请先保存或取消编辑！', 'warning');
                    } else if (rowIndex > -1) {
                        $('#dg').datagrid("beginEdit", rowIndex);
                        isEditing = true;
                        editRow = rowIndex;
                    } else {
                        $.messager.alert('操作提示', '请先选择要编辑的行！', 'info');
                    }

                    isEdit = true;
                }
            },
            {
                text: "保存",
                iconCls: "icon-save",
                handler: function () {
                    $('#dg').datagrid("endEdit", editRow);
                }
            },
            {
                text: "取消",
                iconCls: "icon-cancel",
                handler: function () {
                    $('#dg').datagrid("cancelEdit", editRow);
                    isEditing = false;
                    $('#dg').datagrid("reload");
                }
            }
        ],
        onBeforeLoad: function (params) {
            // 添加参数
            params.name = $("#queryName").val();
            params.year = $("#queryYear").numberbox("getValue");
            params.month = $("#queryMonth").numberbox("getValue");
        },
        // 完成编辑时发送请求保存数据到后台
        onAfterEdit: function (rowIndex, rowData, changes) {
            $(this).datagrid("beginEdit", rowIndex); // 这句如果注释掉下一行的ed就获取不到值
            var ed = $(this).datagrid('getEditor', { index: rowIndex, field: 'Sex' });
            var sex = ed.target.combobox('getValue');
            editRow = rowIndex;
            isEditing = false;
            Employee.save(rowData, sex);
        }
    });
}

Note： datagrid 的 getEditor 方法要在那一行是编辑状态下才能获取到编辑器，所以要先调用 beginEdit 方法开启行编辑状态。
比如上面的代码 onAfterEdit 函数里面如果 $(this).datagrid("beginEdit", rowIndex); 这句注释掉了，下一行的使用 getEditor 就获取不到值，ed 得到的是 null 。

---

• 多行编辑

多行编辑的时候可以一次提交大量数据到后台，是使用表单的方式提交的。后台获取到的数据也需要进行处理，因此这里也贴一下后台代码吧。

前端代码：

    // 初始化数据列表
    function initDatagrid() {
        $('#dg').datagrid({
            loadMsg: '数据加载中请稍后……',
            striped: true,
            url: '/api/Attendance',
            sortName: 'ID',
            sortOrder: 'desc',
            method: "get",
            striped: true,
            border: true,
            selectOnCheck: false,
            checkOnSelect: false,
            remoteSort: true,
            singleSelect: true,
            idField: 'ID',
            pagination: true,
            rownumbers: false,
            pageSize: 100,   // 每页显示的记录条数，默认为100
            pageList: [20, 50, 100, 200, 500],  // 设置可选的每页记录条数的列表
            fitColumns: true,
            columns: [[
                {
                    field: 'Num', title: "编号", width: 34, sortable: false
                },
                {
                    field: 'Employee', title: "人员", width: 64, sortable: true
                },
                 {
                    field: 'Extra', title: "加班<br>(天)", width: 50, sortable: true,
                    // 只有添加了editor的列才是可编辑的
                    editor: {
                        type: 'numberbox',
                        options: {
                            precision: 3,
                            onChange: function () {
                                var rowIndex = getRowIndex(this);
                                updateEstimatedDays(rowIndex);
                            }
                        }
                    }
                },
                {
                    field: 'UnpaidVacate', title: "请假<br>(天)", width: 50, sortable: true,
                    editor: {
                        type: 'numberbox',
                        options: {
                            precision: 3,
                            onChange: function () {
                                var rowIndex = getRowIndex(this);
                                updateEstimatedDays(rowIndex);
                            }
                        }
                    }
                },
                // 此处省略部分列...
                {
                    field: 'Year', title: "年份", width: 37, sortable: false
                },
                {
                    field: 'Month', title: "月份", width: 34, sortable: false
                },
                {
                    field: 'Remark', title: "备注", width: 260, sortable: false,
                    editor: {
                        type: 'textbox'
                    }
                }
            ]],
            // 添加工具栏
            toolbar: [
                {
                    text: "生成基础数据",
                    iconCls: "icon-add",  // 定义图标样式
                    handler: function () {
                        var year = $('#queryYear').numberbox('getValue');
                        var month = $('#queryMonth').numberbox('getValue');
                        $.get('/api/Attendance?year=' + year + '&month=' + month, function (data) {
                            if (!data.State) {
                                $.messager.alert('警告', data.Data, 'info');
                            } else {
                                $('#dg').datagrid('reload');
                            }
                        });
                    }
                },
                {
                    text: "保存",
                    iconCls: "icon-save",
                    // 批量提交多条已修改数据到后台
                    handler: function () {
                        // 关闭最后一个当前编辑行，否则最后一行的数据不会被getChanges方法捕获到
                        $('#dg').datagrid('endEdit', editRow);

                        // 修改过的行突出显示
                        if (editRow > 0) {
                            var element = document.getElementById("datagrid-row-r1-2-" + editRow);
                            element.style.backgroundColor = "#d6e486";
                        }

                        // 如果有数据修改过才进行提交
                        if ($('#dg').datagrid('getChanges').length) {

                            // 获取已修改的数据
                            var updated = $('#dg').datagrid('getChanges', "updated");
                            var effectRow = new Object();
                            if (updated.length) {
                                effectRow["updated"] = JSON.stringify(updated);
                            }

                            // 后台处理数据时先显示一个提示框，防止用户多次点击【保存】重复提交数据
                            $.messager.progress({
                                title: '提示',
                                msg: '正在保存，请稍候……',
                            });

                            var year = parseInt($('#queryYear').numberbox('getValue'));
                            var month = parseInt($('#queryMonth').numberbox('getValue'));

                            $.ajax({
                                type: "put",
                                dataType: "json",
                                data: effectRow,
                                url: "/api/Attendance?year=" + year + "&month=" + month,
                                success: function (data) {
                                    if (!data.State) {
                                        $.messager.alert('警告', data.Data, 'info');
                                    } else {
                                        $('#dg').datagrid('reload');
                                        editRow = -1;
                                    }

                                    $.messager.progress('close');
                                    $('#dg').datagrid('unselectAll');
                                },
                                error: function () {
                                    $.messager.alert('警告', data.Data, 'info');
                                    $.messager.progress('close');
                                    $('#dg').datagrid('unselectAll');
                                }
                            });
                        }
                    }
                },
                {
                    text: "取消",
                    iconCls: "icon-cancel",
                    handler: function () {
                        endEdit(editRows);
                        $('#dg').datagrid('reload');
                        $('#dg').datagrid('unselectAll');
                        editRow = -1;
                    }
                }
            ],
            onBeforeLoad: function (params) {
                params.employeeID = $("#queryEmployee").combobox("getValue");
                params.year = $("input[name='queryYear']").val() != "" ? $("input[name='queryYear']").val() : -1;
                params.month = $("input[name='queryMonth']").val() != "" ? $("input[name='queryMonth']").val() : -1;
                params.sortField = sortField;
                params.sortOrder = sortOrder;
            },
            // 鼠标单击某一行是开启该行的编辑状态
            onClickRow: function (rowIndex, rowData) {
                if (canEdit == true) {
                    $('#dg').datagrid('endEdit', editRow);
                    if (rowIndex > 0) {
                        $('#dg').datagrid("beginEdit", rowIndex);
                    }
                    // 修改过的行突出显示
                    if (editRow > 0) {
                        var element = document.getElementById("datagrid-row-r1-2-" + editRow);
                        element.style.backgroundColor = "#d6e486";
                    }

                    editRows.push(rowIndex);
                    editRow = rowIndex;
                }
            }
        });
    }

PS：既然是多行输入，肯定是想一次性连续编辑多行再提交数据了，那就意味着要一次性开启多行的编辑状态。但是我发现当行较多时一次性打开全部行的编辑状态会很慢，导致页面卡一下，一次性关闭全部编辑状态同理也是。这个问题没有找到很好的解决办法。于是我改成了鼠标单击某一行的时候就开启该行的编辑状态，再点击其他行时就关闭上次点击行，然后开启新点击的行。这样不至于让页面变慢，而且输入方式也还能接受吧。
当然大家有更好的解决方法欢迎留言哈~~

后台代码【C#】

/// <summary>
/// 批量修改考勤数据
/// </summary>
/// <returns></returns>
public ResponseModel Put(int year, int month)
{
    ResponseModel result = new ResponseModel();

    try
    {
        // 从表单获取提交的数据
        string updated = System.Web.HttpContext.Current.Request.Form["updated"];
        // 反序列化json对象
        JavaScriptSerializer jsSerializer = new JavaScriptSerializer();
        List<Attendance> attendanceList = jsSerializer.Deserialize<List<Attendance>>(updated);
        if (attendanceList.Count > 0)
        {
            if (m_AttendanceBLL.Update(attendanceList, year, month)
            {
                result.State = ResponseModel.ResponseState.Success;
                result.Data = true;
            }
            else
            {
                result.Data = "修改考勤数据失败";
            }
        }
    }
    catch (Exception ex)
    {
        result.Data = "修改考勤数据失败";
        LogHelper.WriteLog(m_ModelName + "修改考勤数据失败：" + ex.Message, ex);
    }

    return result;
}

---

Tips：一个获取当前编辑行索引的方法

// 扩展easyui datagrid方法，获取当前编辑行的索引
// target: 当前编辑元素
function getRowIndex(target) {
  var tr = $(target).closest("tr.datagrid-row");

  return parseInt(tr.attr("datagrid-row-index"));
}

---

参考文章：easyui datagrid 批量编辑和提交