When I first encountered this problem, there was no solution. Not even in the documentation of sample list of JEasyUI‘s portal.

However, I after I posted a topic in their forum to include it in a future release or so, probably after a day or two, they immediately created a Javascript library to do just that.

Impressive!

Look for the file datagrid-groupview.js and make sure you include that or else grouping rows won’t work in the data grid.

Retrieve your JSON data as is and simply assign the field that you want as basis for grouping the rows and changing the view’s value to groupview.

That’s it! Easy as pie!

While JEasyUI has an extended DataGrid component called eDataGrid, I opted to still use DataGrid rather than load up another script library.

Here is the function to delete a row in a JEasyUI DataGrid table complete with a notification popup when the delete HTTP request is in progress and closes itself when it is done.

To add an action similar to the image (edit, delete, save, cancel) above, add this table header tag within the table row tag.

Now, in order for delete links to appear, you need to add a custom made Javascript function that has parameters ‘value, row and index’ and returns a string that dynamically creates an HTML hyperlink for the delete functionality.

Lastly, you create another custom made function so that when the delete hyperlink is clicked, that function is called.

Related Posts Plugin for WordPress, Blogger...