Show Posts
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.
