How To Group Rows In JEasyUI DataGrid
Posted by blogmeister on
April 1, 2013
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.
|
1 2 |
<span style="color: #0000ff;"><strong>view: groupview,</strong></span> <strong><span style="color: #0000ff;">groupField: 'mycolumn</span>',</strong> |
That’s it! Easy as pie!
Share the post "How To Group Rows In JEasyUI DataGrid"
tags: datagrid, group, jeasyui, row
No Comments
How To Add Delete Functionality In JEasyUI DataGrid
Posted by blogmeister on
January 30, 2013
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function deleteRow(index) { if (confirm('Are you sure you want to delete this entry?')) { $('#tt').datagrid('loading'); $.ajax({ type: 'POST', url: 'delete.php', data: '', success: function (msg) { $('#tt').datagrid('loaded'); $('#tt').datagrid('deleteRow', index); }, error: function (msg) { $('#tt').datagrid('loaded'); } }); } } |
Share the post "How To Add Delete Functionality In JEasyUI DataGrid"
Place A Delete Action Link In A Table Row In JEasyUI DataGrid
Posted by blogmeister on
January 21, 2013
To add an action similar to the image (edit, delete, save, cancel) above, add this table header tag within the table row tag.
|
1 |
<th width="100">Action</th> |
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.
|
1 2 3 |
function formatAction(value, row, index){ return '<a href="//" onclick="deleteRow(' + index + ')>Delete</a>'; } |
Lastly, you create another custom made function so that when the delete hyperlink is clicked, that function is called.
|
1 2 3 |
function deleteRow(index) { alert('Row ' + index + ' was clicked'); } |
Share the post "Place A Delete Action Link In A Table Row In JEasyUI DataGrid"
