The w2grid object allows you to create data grid controls with local or remote data source. The grid control is the most
complex and flexible control in w2ui. It allows you to define columns, simple or multi field searches, one or many column
sorting, inline editing, etc.
Below is a simple example how to use the grid. This grid does not pull records from the server, but uses local data source.
This example displays similar grid as the example above, but it retrieves records from the server. It assumes that you have a file
data/records.json relative to where your example runs that returns JSON structure.
The grid communicates with the server by sending a HTTP POST request in the format displayed below. Keep in mind that not all of the parameters are
sent with each requests. Parameters such as search, sort-by, etc. might not be submitted if user did not apply them. The grid will also submit
all user defined parameters from the .postData map.
Which will be encoded into HTTP POST that looks like this:
The grid expects data in the JSON format from the server as it is described below. The JSON structure will be merged into the grid with
jQuery.extend method. It means that you can return any supported grid property from the server and it will be applied.
You can define grid's .onRequest and .onLoad events to do data conversion if
you service returns format different from JSON (for example XML).
If you want to return an error from the server side, you can return following JSON structure:
If user selects several records in the grid and clicks the delete button on the toolbar or if you call
.delete() method, the grid will send a request to delete records. The grid sends following parameters:
It sends extra fields that are not directly related to the delete operation. If there was no errors, the grid expects back the response in the format
And as soon as it is received, it will submit a second request to refresh records. If the server responds:
The grid will display the error and will not refresh records.
As a developer you can turn on inline editing in the grid. Once user has changed data and click the Save button, the grid will send the following structure
to the server:
Where changes is an array of object with key value pairs of all changed records. If there were no errors, the grid expects back the response in the format
If the server responds:
The grid will display the error.