Skip to content

CELL edit with add and delete buttons

← Datagrid Edit
For add and delete, here the required the javascript to handle both in CELL edit mode.

Replace "orders" with your own table name. Be sure that edit.php is the correct path relative to your environment.


<?php
$dg = new C_DataGrid("SELECT * FROM orders", "orderNumber", "orders");
$dg->enable_edit('CELL');
$dg -> display();
?>

<script type="text/javascript">
$(function() {
   
    $('#addNew').on('click', function(){
        $("#orders").jqGrid('editGridRow', "new", {url:'/phpGrid/edit.php?dt=json&gn=orders&oper=add'} );
    });

    $('#delRow').on('click', function(){
        var selRowId = $("#orders").jqGrid('getGridParam', 'selrow');
        $.ajax({
                url: '/phpGrid/edit.php?dt=json&gn=orders',
                data: {'id': selRowId, 'oper': 'del'},
                type: 'POST',
                dataType: 'JSON',
                success: function(){
                        console.log('1')
                        setTimeout(function(){// wait for 5 secs(2)
                          location.reload(); // then reload the page.(3)
                      }, 1000);
                    }
        });
        $('#orders').trigger( 'reloadGrid' );
    });
})
</script>

<button id="addNew">Add New</button>
<button id="delRow">Delete Selected</button>

Feedback and Knowledge Base

(thinking…)