easyui-datagrid 撤销修改问题
每当我执行添加，删除，更改等这些操作后，会在
onAfterEdit: function(rowIndex, rowData, changes){
dataGridOper.datagrid('acceptChanges');
}执行这句话，但再次点击撤销就出问题了，
如图，操作前
操作后如图
我在点击取消编辑方法中看过，火狐控制台打印的红色代码那块全是空的，但页面数据却是出问题了，不知道什么原因
{
handler: function(){
//回滚自从创建以来或最后一次调用acceptChanges以来所有更改的数据
console.info(dataGridOper.datagrid('getChanges','inserted'));
console.info(dataGridOper.datagrid('getChanges','deleted'));
console.info(dataGridOper.datagrid('getChanges','updated'));
dataGridOper.datagrid('rejectChanges');
editorRow = -1;
}
}
js代码
var dataGridOper;
$.extend($.fn.datagrid.methods, {
//增加时有编辑框
//第一个参数组件本身，第二个参数要传递的参数
addEditor: function(jq, param){
if (param instanceof Array) {
$.each(param, function(index, item){
var e = $(jq).datagrid('getColumnOption', item.field);
e.editor = item.editor;
});
}
else {
var e = $(jq).datagrid('getColumnOption', param.field)
e.editor = param.editor;
}
},
//修改时没编辑框
//编辑时使用可以跳过指定的列编辑,对某些列不需要编辑
// 如 datagrid('removeEditor','password')，不让编辑密码
removeEditor: function(jq, param){
if (param instanceof Array) {
$.each(param, function(index, item){
var e = $(jq).datagrid('getColumnOption', item);
e.editor = {};
});
}
else {
var e = $(jq).datagrid('getColumnOption', param)
e.editor = {};
}
}
})
function getRootPath(){
var curWwwPath = window.document.location.href;
var pathName = window.document.location.pathname;
var pos = curWwwPath.indexOf(pathName);
var localhostPaht = curWwwPath.substring(0, pos);
var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
return (localhostPaht + projectName);
}
$(function(){
operateDataGrid();
});
var operateDataGrid = function(){
//用于存放操作记录
var operator = "";
//存放编辑的行号
var editorRow = -1;
dataGridOper = $('#dataGrid').datagrid({
url: getRootPath() + '/operateDataGrid?operator=selectData',
method: 'post',
title: '用户信息',
fitColumns: true,
width: '100%',
height: 335,
loadMsg: 'loading',
columns: [[{
field: 'oid',
title: '编号',
width: 100,
align: 'center',
//设置可以排序，则不显示此列
checkbox: true
}, {
field: 'username',
title: '姓名',
width: 100,
align: 'center',
//设置可以排序
sortable: true,
editor: {
//string,object string 时指编辑类型，当 object 是options：对象，编辑类型对应的编辑器选项
type: 'validatebox',
options: {
required: true
}
}
}, {
field: 'gender',
title: '性别',
width: 100,
align: 'center',
sortable: true,
editor: {
type: 'validatebox'
}
}, {
field: 'phonenum',
title: '电话',
width: 100,
align: 'center',
sortable: true,
editor: {
type: 'text',
options: {
required: true
}
}
}]],
pagination: true,
toolbar: [{
id: 'idEdit',
text: '修改',
iconCls: 'icon-edit',
disabled: enable,
handler: function(){
//控制一次只能编辑一行
var rows2 = dataGridOper.datagrid('getSelections');
//console.info(rows2[0]);
//一次只能编辑一行
if (rows2.length == 1) {
//判断是否有其他行正在编辑
if (editorRow == -1) {
//不让编辑用户名
//dataGridOper.datagrid('removeEditor', ['username','']); 传多个对象
dataGridOper.datagrid('removeEditor', 'username');
//返回指定行的索引，row 参数可以是一个行记录或者一个 id 字段的值
var index1 = dataGridOper.datagrid('getRowIndex', rows2[0]);
operator = "updateData";
//在第一行增加
//队列进行编辑时必须在columns中列设置editor属性
//开始对一行进行编辑,参数index 索引
dataGridOper.datagrid('beginEdit', index1);
editorRow = index1;
}
else {
$.messager.confirm('提示', '是否保存正在修改的数据', function(btn2){
//点击确定则保存,否则取消
if (btn2) {
dataGridOper.datagrid('endEdit', editorRow);
//设置当前无正在编辑的行
editorRow = -1;
}
});
}
}
else {
$.messager.alert('提示', '一次只能对一行进行编辑', 'warning');
}
}
}, '-', {
id: 'idSave',
text: '保存',
iconCls: 'icon-save',
//disabled: true,
handler: function(){
//结束对第一行进行编辑,参数index 索引
if (editorRow != -1) {
dataGridOper.datagrid('endEdit', editorRow);
}
}
}, '-', {
id: 'idCancle',
text: '取消编辑',
iconCls: 'icon-undo',
//disabled: true,
handler: function(){
//回滚自从创建以来或最后一次调用acceptChanges以来所有更改的数据
console.info(dataGridOper.datagrid('getChanges','inserted'));
console.info(dataGridOper.datagrid('getChanges','deleted'));
console.info(dataGridOper.datagrid('getChanges','updated'));
console.info(dataGridOper.datagrid('rejectChanges').length);
dataGridOper.datagrid('rejectChanges');
editorRow = -1;
}
}, '-']，
onAfterEdit: function(rowIndex, rowData, changes){
//获取最后一次提交以来更改的行，type 参数表示更改的行的类型，可能的值是：inserted、deleted、updated，等等。
//dataGridOper.datagrid('getChanges', 'inserted');//用于判断是增删改的操作
//当用户完成编辑一行时触发，参数包括rowIndex：编辑行的索引，从 0 开始
//rowData：编辑行对应的记录 changes：更改的字段/值对
var urlData = "";
if (operator == "insertData") {
urlData = "username=" + rowData.username + "&gender=" + rowData.gender + "&phone=" + rowData.phonenum;
}
else {
urlData = "id=" + rowData.oid + "&gender=" + rowData.gender + "&phone=" + rowData.phonenum;
}
$.ajax({
type: "POST",
url: getRootPath() + '/operateDataGrid?operator=' + operator,
data: urlData,
dataType: 'text',
success: function(msgResult){
//console.info(msgResult);
if (msgResult == "success") {
//提交自从被加载以来或最后一次调用acceptChanges以来所有更改的数据,
//保持该数据的状态,否则点击取消编辑，将会回到修改前的数据,相当于提交事务
dataGridOper.datagrid('acceptChanges');
//title, msg, icon, fn
$.messager.alert('系统提示', '保存成功', 'info', function(btn){
//回调函数
dataGridOper.datagrid('load');
});
}
else {
$.messager.alert('系统提示', '保存失败', 'error');
//回滚
dataGridOper.datagrid('rejectChanges');
}
editorRow = -1;
},
error: function(XMLHttpRequest, textStatus, errorThrown){
$.messager.alert('系统提示', '保存失败：' + textStatus, 'info')
}
});
},
onDblClickRow: function(rowIndex, rowData){
//当用户双击一行时触发，参数包括,rowIndex：被双击行的索引，从 0 开始,rowData：被双击行对应的记录
//双击行时进行编辑该行
//控制一次只能编辑一行
if (editorRow == -1) {
operator = "updateData";
//不让编辑用户名
dataGridOper.datagrid('removeEditor', 'username');
//在第一行增加
//队列进行编辑时必须在columns中列设置editor属性
//开始对一行进行编辑,参数index 索引
dataGridOper.datagrid('beginEdit', rowIndex);
editorRow = rowIndex;
}
else {
$.messager.confirm('提示', '是否保存正在修改的数据', function(btn2){
//点击确定则保存,否则取消
if (btn2) {
dataGridOper.datagrid('endEdit', editorRow);
//设置当前无正在编辑的行
editorRow = -1;
}
});
}
}
});
}
html页面代码
<body>
<div width="100%">
<table id="dataGrid"></table>
</div>
</body>
[解决办法]
可能是自带的bug
试试
//获取总数
var paper = dataGridOper.datagrid('getPager');
var total = paper.pagination('options').total;
//回滚自从创建以来或最后一次调用acceptChanges以来所有更改的数据
dataGridOper.datagrid('rejectChanges');
//重新设置总数
paper.pagination({
total: total
});
