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 批量编辑和提交