CELL edit with Add, Delete and Export buttons

phpGrid has a less known edit feature called “CELL”. It’s similar to INLINE edit, but with only a single editable cell when selected. This is not a fully-fledged feature from jqGrid itself, especially it missed add and delete out of the box. However, we have hacked (but works) Javascript to included the add and delete functions through custom javascript.

Pay close attention to the “url” property. Be sure it points to a valid edit.php address.

1
2
3

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

ADD & DELETE

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$(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'
});
$('#orders').trigger( 'reloadGrid' );
});
})
<button id="addNew">Add New</button>
<button id="delRow">Delete Selected</button>

See Live Example!

EXPORT (new)

To add Export buttons to the bottom toolbar, insert the following BEFORE $dg->$display(); Be sure to replace /phpGrid/ with the actual phpGrid absolute file path on your web server

1
2
3
4
5
6
7
8
9
10
11
12

$exportDropdown =<<< EXPORTDROPDOWN
$('#orders_pager1_left').append (`<div style=padding-right: 16px;>Export:
<select onchange="document.location.href=this.options[this.selectedIndex].value;">
<option>---</option>
<option value='/phpGridx/export.php?gn=orders&export_type=excel'>Excel</option>
<option value='/phpGridx/export.php?gn=orders&export_type=pdf'>PDF</option>
<option value='/phpGridx/export.php?gn=orders&export_type=html'>HTML</option>
<option value='/phpGridx/export.php?gn=orders&export_type=csv'>CSV</option>
<option value='/phpGridx/export.php?gn=orders&export_type=excelxml'>ExcelXML</option>
</select></div>`);
EXPORTDROPDOWN;
$dg->before_script_end = $exportDropdown;