项目中在easyui启用行编辑模式后，每次编辑数据，combobox下拉列表都会重新刷新，不能回显原先的数据，导致用户在修改信息时还需要记住之前的信息，用户体验较差，下拉列表较少的情况下还好，如果较多，用户还需要一个接一个地重新选择，给用户带来了很大的麻烦。为了增强用户使用的简便性，有必要为combobox添加数据的回显功能。具体的实现方案如下：
1.定义一个全局变量tmpRowData，用于记录当前编辑行的数据；
2.在datagrid中的onBeforeEdit事件中将编辑行数据保存到全局变量中；
这里需要注意，onBeforeEdit中的row即我们需要的行数据，只需要我们将其赋值给我们的全局变量tmpRowData即可。
3.在combobox的onLoadSuccess事件中，将全局变量中保存的combobox数据赋值给combobox。
即通过combobox的setValue方法将combobox的值设置为全局变量tmpRowData中的数据：
$(this).combobox('setValue', tmpRowData.JZId);
具体的代码如下：
<!DOCTYPE html>
<html>
<head>
<title>咨询列表</title>
<meta http-equiv="pragma" content="no-cache" />
<script src="/Scripts/loading.js" type="text/javascript"></script>
<link href="/EasyUI/themes/icon.css" rel="stylesheet" type="text/css" />
<link href="/EasyUI/themes/gray/easyui.css" rel="stylesheet" type="text/css" />
<script src="/EasyUI/jquery.min.js" type="text/javascript"></script>
<script src="/EasyUI/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/Scripts/distinguishBrowser.js" type="text/javascript"></script>
<script src="../EasyUI/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var datagrid; //定义全局变量datagrid
var editRow = undefined; //定义全局变量：当前编辑的行
var tmpRowData = undefined;
datagrid = $("#dd").datagrid({
url: '/ZX/ZXHandler.ashx?action=GetAll', //请求的数据源
title: '咨询列表',
iconCls: 'icon-edit', //图标
pagination: true, //显示分页
pageSize: 10, //页大小
pageList: [10, 20, 30, 40], //页大小下拉选项此项各value是pageSize的倍数
fit: true, //datagrid自适应宽度
fitColumn: false, //列自适应宽度
striped: true, //行背景交换
nowap: true, //列内容多时自动折至第二行
border: true,
idField: 'Id', //主键
columns: [[//显示的列
{field: 'ck', checkbox: true },
{ field: 'Id', title: '咨询编号', width: 100, align: 'center' },
{ field: 'Name', title: '专家名', width: 155, align: 'center',
editor: { type: 'combobox', options: {
required: true, url: '/User/UserHandler.ashx?action=GetAllZJUName', valueField: 'text', textField: 'id',
onLoadSuccess: function () {
$(this).combobox('setValue', tmpRowData.Name);
}
}
}
},
{ field: 'JZId', title: '机组编号', width: 130, align: 'center',
editor: { type: 'combobox', options: {
valueField: 'text', textField: 'id', url: '/JZ/JZHandler.ashx?action=GetAllJZId', required: true,
onLoadSuccess: function () {
$(this).combobox('setValue', tmpRowData.JZId);
}
}
}
}
]],
toolbar: [{ text: '添加', iconCls: 'icon-add', handler: function () {//添加列表的操作按钮添加，修改，删除等
//添加时先判断是否有开启编辑的行，如果有则把开户编辑的那行结束编辑
if (editRow != undefined) {
datagrid.datagrid("endEdit", editRow);
}
//添加时如果没有正在编辑的行，则在datagrid的第一行插入一行
if (editRow == undefined) {
datagrid.datagrid("insertRow", {
index: 0, // index start with 0
row: {
}
});
//将新插入的那一行开户编辑状态
datagrid.datagrid("beginEdit", 0);
//给当前编辑的行赋值
editRow = 0;
//选中首行
datagrid.datagrid('unselectAll');
datagrid.datagrid('selectRow', 0); //选中该行
}
}
},
'-',
{ text: '删除', iconCls: 'icon-remove', handler: function () {
//删除时先获取选择行
var rows = datagrid.datagrid("getSelections");
//选择要删除的行
if (rows.length > 0) {
$.messager.confirm("提示", "你确定要删除吗?", function (r) {
if (r) {
//获取所有要删除的用户的编号
var ids = [];
for (var i = 0; i < rows.length; i++) {
ids.push(rows[i].Id);
}
//执行数据删除操作
$.ajax({
url: '/ZX/ZXHandler.ashx?action=Delete',
type: 'POST',
data: {
Id: ids.join(',')
},
beforeSend: function () {
$.messager.progress({
text: '正在处理中...'
});
},
success: function (data) {
$.messager.progress('close');
data = eval('(' + data + ')'); //将一个json字符串解析成js对象
if (data.Success) {
datagrid.datagrid('reload');
$.messager.show({
title: '操作提醒',
msg: data.Message
})
} else {
$.messager.alert('删除失败', data.Message, 'warning');
}
location.reload();
}
});
}
});
}
else {
$.messager.alert("提示", "请选择要删除的行", "error");
}
}
}, '-',
{ text: '修改', iconCls: 'icon-edit', handler: function () {
//修改时要获取选择到的行
var rows = datagrid.datagrid("getSelections");
//如果只选择了一行则可以进行修改，否则不操作
if (rows.length == 1) {
//修改之前先关闭已经开启的编辑行，当调用endEdit该方法时会触发onAfterEdit事件
if (editRow != undefined) {
datagrid.datagrid("endEdit", editRow);
}
//当无编辑行时
if (editRow == undefined) {
//获取到当前选择行的下标
var index = datagrid.datagrid("getRowIndex", rows[0]);
//开启编辑
datagrid.datagrid("beginEdit", index);
//把当前开启编辑的行赋值给全局变量editRow
editRow = index;
//当开启了当前选择行的编辑状态之后，
//应该取消当前列表的所有选择行，要不然双击之后无法再选择其他行进行编辑
datagrid.datagrid("unselectAll");
}
}
}
}, '-',
{ text: '保存', iconCls: 'icon-save', handler: function () {
//保存时结束当前编辑的行，自动触发onAfterEdit事件如果要与后台交互可将数据通过Ajax提交后台
datagrid.datagrid("endEdit", editRow);
}
}, '-',
{ text: '取消编辑', iconCls: 'icon-redo', handler: function () {
//取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行
editRow = undefined;
datagrid.datagrid("rejectChanges");
datagrid.datagrid("unselectAll");
}
}, '-'],
onBeforeEdit: function (index, row) {
tmpRowData = row;
},
onAfterEdit: function (rowIndex, rowData, changes) {
//endEdit该方法触发此事件
var inserted = datagrid.datagrid('getChanges', 'inserted');
var updated = datagrid.datagrid('getChanges', 'updated');
if (inserted.length < 1 && updated.length < 1) {
editRow = undefined;
datagrid.datagrid('unselectAll');
return;
}
var url = '';
if (inserted.length > 0) {
url = '/ZX/ZXHandler.ashx?action=Add';
}
if (updated.length > 0) {
url = '/ZX/ZXHandler.ashx?action=Update';
}
//更新数据库
$.ajax({
url: url,
type: 'POST',
data: {
'Id': rowData.Id,
'Name': rowData.Name,
'JZId': rowData.JZId
},
beforeSend: function () {
$.messager.progress({
text: '正在处理中...'
})
},
success: function (data) {
$.messager.progress('close');
data = eval('(' + data + ')'); //将一个json字符串解析成js对象
if (data.Success) {
datagrid.datagrid("acceptChanges");
$.messager.show({
title: '操作提示',
msg: data.Message
});
editRow = undefined;
datagrid.datagrid("reload");
$('#addcheck').val(1);
} else {
datagrid.datagrid("beginEdit", editRow);
$.messager.alert('警告操作', '未知错误！请重新刷新后提交！', 'warning');
}
datagrid.datagrid("unselectAll");
}
});
},
onDblClickRow: function (rowIndex, rowData) {
datagrid.datagrid('unselectAll');
datagrid.datagrid('selectRow', rowIndex); //选中该行
//双击开启编辑行
if (editRow != undefined) {
datagrid.datagrid("endEdit", editRow);
}
if (editRow == undefined) {
datagrid.datagrid("beginEdit", rowIndex);
editRow = rowIndex;
}
}
});
var p = datagrid.datagrid('getPager');
$(p).pagination({
pageSize: 10, //每页显示的记录条数，默认为10
pageList: [5, 10, 15], //可以设置每页记录条数的列表
beforePageText: '第', //页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录'
});
});
</script>
</head>
<body>
<table id="dd">
</table>
</body>
</html>了解easyui各个控件的事件对于大家深入了解easyui具有很大的帮助，笔者建议初学者找一下较为详细的API文档阅读。