You can drag and drop rows between two or more grids using a mouse.
In the demo, we have both orders and employees datagrids on the same page.
1 2 3 | $dg = new C_DataGrid("select * from employees", "employeeNumber", "employees"); $dg->enable_edit("FORM", "CRUD"); $dg->display(); |
We add the following Javascript to enable drag and drop between the two php grids.
The Ondrop event posts the row data to another url “save_dropped_row.php”. You must implement this server side script to handle how you would like the row data to be saved.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <script> $(function(){ jQuery("#orders").jqGrid("sortableRows", {}); jQuery("#employees").jqGrid("sortableRows", {}); jQuery("#orders").jqGrid('gridDnD',{ connectWith:'#employees', drop_opts:{ hoverClass: "ui-state-active", }, ondrop: function(evt, obj, data){ $.ajax({ method: "POST", url: "save_dropped_row.php", data: data, }).done(function( msg ) { console.log( "Data Saved: " + msg ); }) }, }); }) </script> |
Complete Drag and drog API documentation can be found on jQuery UI draggable and droppable widgets.