Title: Prevent Datagrid Load on Pending Changes
Post by: alex_wijoyo on March 28, 2013, 08:00:53 PM
Dear All, I have tried this but didn't work: function onBeforeLoad(param) {
var rows = dg.edatagrid('getRows');
for (var i = 0; i < rows.length; i++) {
if (rows[i].editing)
dg.edatagrid('endEdit', i);
}
// var insertedRows = dg.edatagrid('getChanges', 'inserted');
// var updatedRows = dg.edatagrid('getChanges', 'updated');
// var deletedRows = dg.edatagrid('getChanges', 'deleted');
if (dg.edatagrid('getChanges').length > 0)
return false;
The strange thing is all my changes are canceled before onBeforeLoad called. I have debugged there are no row on inserted, updated or deleted. Can you suggest a solution for this? Thanks. Regards, Alex Wijoyo
Title: Re: Prevent Datagrid Load on Pending Changes
Post by: stworthy on March 29, 2013, 03:02:08 AM
Please confirm if the row has 'editing' property. To determine what row is editing, use the 'editIndex' property instead. onBeforeLoad:function(){
var opts = dg.edatagrid('options');
if (opts.editIndex >= 0){
dg.edatagrid('endEdit',opts.editIndex);
}
var rows = dg.edatagrid('getChanges');
console.log(rows);
if (rows.length){
return false;
}
}
Be sure to download the updated edatagrid plugin from http://www.jeasyui.com/extension/downloads/jquery-easyui-edatagrid.zip.
Title: Re: Prevent Datagrid Load on Pending Changes
Post by: alex_wijoyo on March 30, 2013, 11:27:07 PM
Dear Stworthy, Thank you for your prompt response. The same codes used on the other function for applying changes to server and it worked (with editing property): function applyChanges() {
var rows = dg.edatagrid('getRows');
for (var i = 0; i < rows.length; i++) {
if (rows[i].editing)
dg.edatagrid('endEdit', i);
}
var insertedRows = dg.edatagrid('getChanges', 'inserted');
var updatedRows = dg.edatagrid('getChanges', 'updated');
var deletedRows = dg.edatagrid('getChanges', 'deleted');
dg.edatagrid('loading');
$.post(dg.edatagrid('options').batchUrl, {inserts: insertedRows, updates: updatedRows, deletes: deletedRows}, function(data) {
if (data.hasOwnProperty('msg')) {
alert(data.msg);
}
else {
for (var i = 0; i < data.inserts.length; i++) {
var newRow = data.inserts[i];
var index = dg.edatagrid('getRowIndex', newRow.oldId);
dg.datagrid('updateRow', {
index: index,
row: newRow
});
}
for (var i = 0; i < data.updates.length; i++) {
var newRow = data.updates[i];
var index = dg.edatagrid('getRowIndex', newRow.id);
dg.datagrid('updateRow', {
index: index,
row: newRow
});
}
dg.edatagrid('acceptChanges');
//handle update sucess
}
}, 'json')
.fail(function() {
alert("Failed post request!");
})
.always(function() {
dg.datagrid('loaded');
});
// console.log(insertedRows);
// console.log(updatedRows);
// console.log(deletedRows);
//here you should post these rows to server
}
I don't used single row editing approach like original edatagrid. I use this approach instead http://www.jeasyui.com/tutorial/datagrid/datagrid12.php (http://www.jeasyui.com/tutorial/datagrid/datagrid12.php). And currently I am trying to migrate it to cached updates. My modified edatagrid: /**
* edatagrid - jQuery EasyUI
*
* Licensed under the GPL:
* http://www.gnu.org/licenses/gpl.txt
*
* Copyright 2011 stworthy [ stworthy@gmail.com ]
*
* Dependencies:
* datagrid
* messager
*
*/
(function($) {
function buildGrid(target) {
var opts = $.data(target, 'edatagrid').options;
$(target).datagrid($.extend({}, opts, {
onBeforeLoad: function(param) {
$(this).datagrid('rejectChanges');
if (opts.tree) {
var node = $(opts.tree).tree('getSelected');
param[opts.treeParentField] = node ? node.id : undefined;
}
if (opts.onBeforeLoad)
opts.onBeforeLoad.call(target, param);
}
}));
if (opts.tree) {
$(opts.tree).tree({
url: opts.treeUrl,
onDrop: function(dest, source, point) {
var targetId = $(this).tree('getNode', dest).id;
$.ajax({
url: opts.treeDndUrl,
type: 'post',
data: {
id: source.id,
targetId: targetId,
point: point
},
dataType: 'json',
success: function() {
$(target).datagrid('load');
}
});
}
});
}
}
$.fn.edatagrid = function(options, param) {
if (typeof options == 'string') {
var method = $.fn.edatagrid.methods[options];
if (method) {
return method(this, param);
} else {
return this.datagrid(options, param);
}
}
options = options || {};
return this.each(function() {
var state = $.data(this, 'edatagrid');
if (state) {
$.extend(state.options, options);
} else {
$.data(this, 'edatagrid', {
options: $.extend({}, $.fn.edatagrid.defaults, $.fn.edatagrid.parseOptions(this), options)
});
}
buildGrid(this);
});
};
$.fn.edatagrid.parseOptions = function(target) {
return $.extend({}, $.fn.datagrid.parseOptions(target), {
});
};
$.fn.edatagrid.methods = {
options: function(jq) {
var opts = $.data(jq[0], 'edatagrid').options;
return opts;
},
updateRowDisplay: function(jq, rowIndex) {
return jq.each(function() {
var opts = $.data(this, 'datagrid').options;
var rows = this.datagrid('getRows');
var styleValue = opts.rowStyler ? opts.rowStyler.call(this, rowIndex, rows[rowIndex]) : '';
function _update(frozen) {
var fields = this.datagrid('getColumnFields', frozen);
var tr = opts.finder.getTr(this, rowIndex, 'body', (frozen ? 1 : 2));
var checked = tr.find('div.datagrid-cell-check input[type=checkbox]').is(':checked');
tr.html(this.renderRow.call(this, this, fields, frozen, rowIndex, rows[rowIndex]));
tr.attr('style', styleValue || '');
if (checked) {
tr.find('div.datagrid-cell-check input[type=checkbox]')._propAttr('checked', true);
}
}
this.datagrid('fixRowHeight', rowIndex);
});
},
saveRow: function(jq, index) {
return jq.each(function() {
var dg = $(this);
var opts = $.data(this, 'edatagrid').options;
var row = dg.datagrid('getRows')[index];
var url = row.isNewRecord ? opts.saveUrl : opts.updateUrl;
row.dml = row.isNewRecord ? 'i' : 'u';
if (opts.onBeforeSave.call(this, index) == false) {
setTimeout(function() {
dg.datagrid('selectRow', index);
}, 0);
return;
}
if (opts.hasOwnProperty('parentRow')) {
row.parentRevNum = opts.parentRow.revisionNum;
}
if (dg.datagrid('validateRow', index)) {
if (url) {
dg.datagrid('loading');
dg.datagrid('endEdit', index);
$.post(url, row, function(data) {
if (data.hasOwnProperty('msg')) {
alert(data.msg);
dg.datagrid('beginEdit', index);
}
else {
data.isNewRecord = null;
dg.datagrid('updateRow', {
index: index,
row: data
});
row = data;
if (opts.tree) {
var idValue = row[opts.idField || 'id'];
var t = $(opts.tree);
var node = t.tree('find', idValue);
if (node) {
node.text = row[opts.treeTextField];
t.tree('update', node);
} else {
var pnode = t.tree('find', row[opts.treeParentField]);
t.tree('append', {
parent: (pnode ? pnode.target : null),
data: [{
id: idValue,
text: row[opts.treeTextField]
}]
});
}
}
opts.onSave.call(this, index, row);
}
}, 'json')
.fail(function() {
alert("Failed post request!");
})
.always(function() {
dg.datagrid('loaded');
});
} else {
alert("No post URL!");
}
}
});
},
destroyRow: function(jq, index) {
return jq.each(function() {
var dg = $(this);
var opts = $.data(this, 'edatagrid').options;
var row = dg.datagrid('getRows')[index];
$.messager.confirm('Confirm', 'Are you sure?', function(r) {
if (r) {
if (opts.hasOwnProperty('parentRow')) {
row.parentRevNum = opts.parentRow.revisionNum;
}
if (row.isNewRecord) {
dg.datagrid('cancelEdit', index);
} else {
if (opts.destroyUrl) {
row.dml = 'd';
var idValue = row[opts.idField || 'id'];
dg.datagrid('loading');
$.post(opts.destroyUrl, row, function(data) {
if (data.hasOwnProperty('msg')) {
alert(data.msg);
}
else {
if (opts.tree) {
dg.datagrid('reload');
var t = $(opts.tree);
var node = t.tree('find', idValue);
if (node) {
t.tree('remove', node.target);
}
} else {
dg.datagrid('cancelEdit', index);
dg.datagrid('deleteRow', index);
}
opts.onDestroy.call(this, index, row);
}
}, 'json')
.fail(function() {
alert("Failed post request!");
})
.always(function() {
dg.datagrid('loaded');
});
} else {
alert("No post URL!");
}
}
}
});
});
}
// editRow: function(jq, index){
// return jq.each(function(){
// });
// },
// addRow: function(jq,row){
// return jq.each(function(){
// });
// },
// cancelRow: function(jq){
// return jq.each(function(){
// });
// },
};
$.fn.edatagrid.defaults = $.extend({}, $.fn.datagrid.defaults, {
destroyMsg: {
norecord: {
title: 'Warning',
msg: 'No record is selected.'
},
confirm: {
title: 'Confirm',
msg: 'Are you sure you want to delete?'
}
},
// destroyConfirmTitle: 'Confirm',
// destroyConfirmMsg: 'Are you sure you want to delete?',
url: null, // return the datagrid data
saveUrl: null, // return the added row
updateUrl: null, // return the updated row
destroyUrl: null, // return {success:true}
batchUrl: null, // return {success:true}
tree: null, // the tree selector
treeUrl: null, // return tree data
treeDndUrl: null, // to process the drag and drop operation, return {success:true}
treeTextField: 'name',
treeParentField: 'parentId',
onAdd: function(index, row) {
},
onEdit: function(index, row) {
},
onBeforeSave: function(index) {
},
onSave: function(index, row) {
},
onDestroy: function(index, row) {
}
});
})(jQuery);
Title: Re: Prevent Datagrid Load on Pending Changes
Post by: alex_wijoyo on April 05, 2013, 01:22:57 AM
Dear Stworthy,
It seems this behaviour is by design. I have an event handler for onLoadSuccess and this function is called before onBeforeLoad event handler called. Can you please teach me how to override this behaviour on edatagrid? Thanks.
|