phpGrid supports custom event handlers using the add_event() method. The event handlers are essentially JavaScript functions or they can be enclosed with PHP heredoc.
Events used in examples
- jqGridSelectRow
- jqGridrowattr
- jqGridAddEditBeforeSubmit
- jqGridAddEditAfterSubmit
1 2 3 4 5 6 7 8 9 10 11 12 13 | // Always include namespace and conf.php on TOP of the script. use phpCtrl\C_DataGrid; require_once("/path/to/conf.php"); $dg = new C_DataGrid("SELECT * FROM orders", "orderNumber", "orders"); $dg->add_event("jqGridSelectRow", 'onSelectRow'); $dg->add_event("jqGridrowattr", 'onRowAttr'); $dg->add_event("jqGridAddEditBeforeSubmit", 'beforeSubmit'); $dg->add_event("jqGridAddEditAfterSubmit", 'afterSubmit'); $dg->enable_edit('FORM'); $dg -> display(); |
In this particular demo, using “jqGridAddEditAfterSubmit” event handler, you will also be able to obtain the auto-generated ID value during insert/add from the “status” parameter in the Javascript callback function.
Here’s the JSON value returned from “status” where its “responseText” contains the newly auto-generated ID value.
1 2 3 4 5 6 7 8 | { readytate:4, responseText:{ id:8 }, status:200, statusText:OK } |
Event Handlers in JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <script> function onSelectRow(status, rowid) { alert('event 1'); console.log(rowid); console.log(status); // ******* Example to redirect a new URL when select a row ******* // orderNumber = $('#orders').jqGrid('getCell',rowid,'orderNumber'); // customerNumber = $('#orders').jqGrid('getCell',rowid,'customerNumber'); // window.location = encodeURI("http://example.com/" + "?" + "orderNumber=" + orderNumber + "&customerNumber="+customerNumber); } function onSelectRow2(status, rowid) { alert('event 2'); console.log("here"); } function onRowAttr(rowData, inputRowData) { return rowData.status === "OnHold" ? {style: "background-color:blue"} : {}; } // post data another page after submit function beforeSubmit(event, postData) { console.log(event); console.log(postData); alert('beforeSubmit: post customerNumber ' + postData.customerNumber + ' to another page through AJAX call'); $.ajax({ url: 'test.php', data: {custNum: postData.customerNumber}, // replace customerNumber with your own type: 'post', success: function(output) { alert(output); } }); } // post data another page after submit function afterSubmitFunc(event, status, postData) { $.ajax({ url: '/my/site', data: {custNum: postData.customerNumber}, // replace customerNumber with your own field name type: 'post', success: function(output) { alert(output); } }); } </script> |
See Live Example! (click on any row to trigger event)
Also see Cell Select Custom Event Examples and entire custom events examples on KB.