Custom AJAX settings

[BCottle]

We do a lot of REST-like APIs, using all the different verbs: GET, POST, PUT, DELETE.
We also customize the requests for each API, adding headers, changing content-type, xhrFields, whether to send cross domain or not, choosing async/sync.

Every example I have seen of remote data sources assumes completely unsafe POST/GET type URLs to resources. Is this really the only way to have jQuery EasyUI automatically handle APIs?

Also, are you ever planning to replace the deprecated success() & error() callbacks with the new done() & fail() handler methods?

[stworthy]

Many components have the 'loader' function that defines how to request data from remote server. You can override it to fit your requirements.

Code:

$.extend($.fn.datagrid.defaults, {
	loader: function(param, success, error){
		var opts = $(this).datagrid('options');
		if (!opts.url) return false;
		$.ajax({
			type: opts.method,
			url: opts.url,
			data: param,
			dataType: 'json',
			success: function(data){
				success(data);
			},
			error: function(){
				error.apply(this, arguments);
			}
		});
	}
})

[BCottle]

After much adjusting, I managed to get that to work for my data. THANKS!

However, that seems to be changing how ALL datagrids will work. Isn't there a way to change individual datagrids?

I'd rather only customize on a case-by-case basis, and I may want standard datagrids on the same page as customized ones.

[stworthy]

You can only customize a datagrid with special 'loader' function.

Code:

$('#dg').datagrid({
  loader: function(...){
    ...
  }
});

[BCottle]

That's what I was looking for. Thanks again!

[stevemit]

FWIW, this post is for other newbies like myself looking to this 3-yr old forum topic for ideas on how to consume a pre-existing CRUD REST API with an EasyUI edatagrid.  The following seems to work for me with EasyUI jQuery 1.5.4.1; YMMV.  

Each datagrid row represents a resource; the datagrid itself represents a parent collection resource.  Each of my edatagrid row objects has an "id" property, which is not displayed as a datagrid field.  The id property becomes a REST URL parameter, i.e., the resource id.

I've left the edatagrid url, saveUrl, updateUrl, and destroyUrl option properties undefined, in favor of the following events.  I specify the edatagrid options singleSelect: true and autoSave: true.  I use Axios as an HTTP client with async/await and try/catch promise handling; jQuery Ajax would also work.  I use the queryParams datagrid options property to hold REST URL parameters, i.e., parent resource ID's.

I place a datagrid toolbar with a 'datagrid' attribute pointing to the edatagrid, and two buttons whose onclick functions call edatagrid('addRow') and edatagrid('destroyRow'), respectively.

I use the following edatagrid event handlers.

• onBeforeLoad:  Download data with Axios (GET), call datagrid('loadData', data) method.
• onSave:  If the row's "id" property is undefined, it's a new row (POST); else, it's an old row (PUT).
• onDestroy:  Call Axios.delete (DELETE).

After a POST, the created resource id is available as the last URL component of the POST response's location header.  The created resource id is added to the row object with datagrid.('updateRow').

UPDATE:  For a more RESTful design, give each row a 'url' property instead of an 'id' property, and cache the parent resource url instead of id; treat URL's as opaque.

UPDATE:  This method produces a ton of JavaScript in the client page.  An alternative is to use the EasyUI url, saveUrl, updateUrl, and destroyUrl method, consuming the REST API from the server code.  The EasyUI url's are not dynamic, but you can put request parameters in the datagrid queryParams option.  Parameters appear as query components for a GET request, and are URL encoded in the request body for a POST request.