Print Page - edatagrid with updateUrl - how can I save the data only data changed in the row?

Title: edatagrid with updateUrl - how can I save the data only data changed in the row?
Post by: Stefan B. on February 24, 2015, 05:57:33 AM

We using edatagrid with a configured updateUrl to save the row data on server side.

But the row data also saved every time if a other row is selected.
Also if no data changed in the row columns!

How can we check if some data changed in the row columns before the data send to the server?

Title: Re: edatagrid with updateUrl - how can save data only data changed in the row?
Post by: Stefan B. on March 05, 2015, 12:39:07 AM

Can someone help me with my problem?

Title: Re: edatagrid with updateUrl - how can I save the data only data changed in the row?
Post by: stworthy on March 08, 2015, 05:48:13 PM

Please download the updated edatagrid plugin from http://www.jeasyui.com/extension/edatagrid.php and include it to your page.

Title: Re: edatagrid with updateUrl - how can I save the data only data changed in the row?
Post by: Stefan B. on March 12, 2015, 06:11:54 AM

This implementation is not working with checkbox editors.
The the folowing code block says
>> changed : false != false

Code:

if (col.editor && opts.originalRow[field] != row[field]){
	console.log(field + ' >> changed >> ' + opts.originalRow[field] + ' != ' + row[field]);
	changed = true;
	break;
}

And also if the data not changed the problem here is, how can I see on the "onSave" Event that the data realy saved on server side?!
to show a slide message or not?

Code:

if (changed){
  ...
} else {
	//this called if no data changed  :-\
	opts.onSave.call(target, index, row);
}

Title: Re: edatagrid with updateUrl - how can I save the data only data changed in the row?
Post by: stworthy on March 12, 2015, 09:32:47 AM

You can return a success flag from server side when saved data successfully.

Code:

//server side code
echo json_encode(array(
	'success' => true,
	...
));

In the 'onSave' event you can detect if the data been saved on server side.

Code:

$('#tt').edatagrid({
	onSave:function(index,row){
		if (row.success){
			console.log('saved successfully');
		}
	}
});

You also can try the 'onSuccess' event that is triggered when the data is saved successfully on server side. Be sure to download the newest 'edatagrid' plugin before using this event.

Code:

$('#tt').edatagrid({
	onSuccess:function(index,row){
		console.log('saved successfully');
	}
});

Title: Re: edatagrid with updateUrl - how can I save the data only data changed in the row?
Post by: Stefan B. on March 13, 2015, 01:59:00 AM

THX for the last information and the new event method. ;D

But what is, that the current implementation is not working with checkbox editors.
The the folowing code block in the edatagrid plugin says that false is not false :-\
>> changed : false != false

Code:
if (col.editor && opts.originalRow[field] != row[field]){
   console.log(field + ' >> changed >> ' + opts.originalRow[field] + ' != ' + row[field]);
   changed = true;
   break;
}

Title: Re: edatagrid with updateUrl - how can I save the data only data changed in the row?
Post by: stworthy on March 13, 2015, 08:00:34 AM

The 'checkbox' editor has 'on' and 'off' options that indicate the checked and unchecked values.

Code:

<th field="status" width="50" data-options="
		editor:{
			type:'checkbox',
			options:{
				on: 'P',
				off: 'N'
			}
		}
		">Status</th>

How do you define the 'checkbox' editor? Please provide an example to demonstrate your issue.

Title: Re: edatagrid with updateUrl - how can I save the data only data changed in the row?
Post by: Stefan B. on March 16, 2015, 12:55:07 AM

The most checkbox eitor's defined so:

Code:

editor:{
  type:'checkbox',
  options:{on:'true', off:'false'}
}

I start a demo here: http://jsfiddle.net/fpzakb1e/
But i do not how to use updateUrl on jsfidle?

But the code to compare the values has problems with "boolean" values and null-values on original row

The field value of "opts.originalRow[field]" is from type boolean
and the field value of row[field] is from type string.

Also we have problems with original values as null. Then the code compares null with empty editor value.

I try to fix some problems direct in the edatagrid plugin. But also that works only sometimes.
Exsample a date original value is saved as a long timestamp value but this cannot compare with the viewed data as string in the dable data >:(

Code:

for(var i=0; i<fields.length; i++){
	var field = fields[i];
	var col = $(this).edatagrid('getColumnOption', field);
	
	var orgValue = opts.originalRow[field];
	var rowValue = row[field];
	
	//*** handle original null object's
	if (orgValue === null) {
		orgValue = '';
	}
	
	//*** convert original boolean values to string to compare
	if (typeof orgValue === 'boolean') {
		orgValue = orgValue.toString();
	}

	if (col.editor && orgValue != rowValue){
		changed = true;
		break;
	}
}

But why you do not comepare the originalRow data with the editedRow data as object compare?

Title: Re: edatagrid with updateUrl - how can I save the data only data changed in the row?
Post by: stworthy on March 16, 2015, 08:53:56 AM

It is not a good idea by enforcing different data types and comparing between them. A null value may have special meaning regarding the user's business logic. The simple way to solve this issue is to use the 'loadFilter' function to convert the original data to the standard data that has unified value or type.

Code:

$('#dg').edatagrid({
  loadFilter: function(data){
    if ($.isArray(data)){
        data = {
            total: data.length,
            rows: data
        };
    }
    data.rows = $.map(data.rows, function(row){
        row.cbx = String(row.cbx);
        if (!row.date){
            row.data = '';
        }
        return row;
    });
    return data;
  }
});

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Stefan B. on February 24, 2015, 05:57:33 AM