phpGrid supports custom event handlers using the add_event() method. The event handlers are essentially JavaScript functions and they must be enclosed with PHP heredoc syntax.
Below are the events used in this example:
- jqGridSelectRow
- jqGridrowattr
- jqGridAddEditBeforeSubmit
- jqGridAddEditAfterSubmit
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 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | $dg = new C_DataGrid("SELECT * FROM orders", "orderNumber", "orders"); $onSelectRow1 = <<<ONSELECTROW function(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); } ONSELECTROW; $onSelectRow2 = <<<ONSELECTROW2 function(status, rowid) { alert('event 2'); console.log("here"); } ONSELECTROW2; $rowattr = <<<ROWATTR function (rowData, inputRowData) { return rowData.status === "OnHold" ? {style: "background-color:blue"} : {}; } ROWATTR; // post data another page after submit $beforeSubmit = <<<BEFORESUBMIT function (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); } }); } BEFORESUBMIT; // post data another page after submit $afterSubmit = <<<AFTERSUBMIT function (event, status, postData) { console.log(event); console.log(status); // e.g. {readytate: 4, responseText: {id:8}, status: 200, statusText: OK} console.log(postData); // e.g. {column1: value, column2: value, ...} alert(postData.customerNumber); $.ajax({ url: '/my/site', data: {custNum: postData.customerNumber}, // replace customerNumber with your own field name type: 'post', success: function(output) { alert(output); } }); } AFTERSUBMIT; $dg->add_event("jqGridSelectRow", $onSelectRow1); $dg->add_event("jqGridSelectRow", $onSelectRow2); $dg->add_event("jqGridrowattr", $rowattr); $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 } |
See Live Example! (click on any row to trigger event)
Also see Cell Select Custom Event Examples and entire custom events examples on KB.