Demos
Custom actions
This demo shows how to
- implement custom actions for insert and update operations by using the
on_insert_submit
andon_update_submit
delegates - configure the cell editors
- plug a third-party date picker component and use the editor's delegates
- use custom cell data validators
Please note that the AJAX requests featured in this demo are performed with the Prototype javascript framework (v.1.6.0). This example focusses on how to implement a custom logic to submit data to the server and it uses Prototype for AJAX calls as an example. You may decide to use another client-side framework to communicate ajaxly with the server.
Also note that is a live demo and your tests will be recorded in a database!
Id | Name | Start Date | Salary | Active | |
---|---|---|---|---|---|
52964 | the highest Date is in 2019... | employee@email.com | 2019-12-01 | 0.00 | |
52961 | asdfsdaf | employee@email.com | 2011-01-01 | 10.10 | |
52960 | dokter dark | dokter_dark@email.com | 2011-01-01 | 0.00 | |
52958 | test | test@email.com | 2011-01-01 | 0.00 | |
52957 | dfddsfg | employee@email.com | 2011-01-01 | 0.00 | |
52956 | nombre | employee@email.com | 2011-01-01 | 0.00 | |
52955 | Employee name... | employee@email.com | 2011-01-06 | 0.00 | |
52952 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52951 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52950 | test | employee@email.com | 2011-04-02 | 0.00 | |
52940 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52939 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52938 | erg4g24tgh42t | employee@email.com | 2011-01-01 | 0.00 | |
52937 | ze name... | employee@email.com | 2011-01-01 | 0.00 | |
52936 | Employee name... | employee@email.com | 2011-03-12 | 0.00 | |
52935 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52934 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52931 | siano na sniadanie dla koziolkadfs | koziolek@email.com | 0000-00-00 | 0.00 | |
52922 | tsting | employee@email.com | 2011-01-05 | 0.00 | |
52921 | Test Me NOW | employee1@email.com | 2011-01-01 | 0.00 | |
52905 | oöoiöoiöoiöioöoiö | employee@email.com | 2011-01-01 | 0.00 | |
52904 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52901 | rrrrr | employee@email.com | 2011-01-01 | 0.00 | |
52900 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52899 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52898 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52897 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52895 | i7i7l78l789 | employee@email.com | 2011-01-01 | 0.00 | |
52894 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52893 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52892 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52891 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52888 | employee@email.com | 2011-01-01 | 0.00 | ||
52887 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52886 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52885 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52884 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52883 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52882 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52881 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52880 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52879 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52878 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52877 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52876 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52875 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52874 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52873 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52872 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52871 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52870 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52869 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52868 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52867 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52866 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52865 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52864 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52863 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52862 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52861 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52860 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52859 | employee@email.com | 2011-01-01 | 0.00 | ||
52857 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52852 | rachunek | employee@email.com | 2011-01-01 | 0.00 | |
52851 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52850 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52849 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52848 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52847 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52846 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52845 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52844 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52843 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52842 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52841 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52840 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52839 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52838 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52837 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52836 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52835 | Employee name... | 1employee@email.com | 2011-01-01 | 0.00 | |
52834 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52832 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52827 | tata | employee@email.com | 2011-01-13 | 0.00 | |
52824 | fggtr | employee@email.com | 2011-01-01 | 0.00 | |
52822 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52821 | yyyy rghfg | employee@email.com | 2011-01-01 | 0.00 | |
52820 | saya juga bisa | employee@email.com | 2011-01-01 | 0.00 | |
52819 | dfsdfsdfsdfsdfsdf | das@ggg.com | 2011-01-01 | 0.00 | |
52817 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52816 | ABC | employee@email.com | 2011-01-15 | 0.00 | |
52815 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52814 | gdfgfdgdgdgfdg | employee@email.com | 2011-01-01 | 0.00 | |
52813 | Rrr | employee@email.com | 2011-01-01 | 0.00 | |
52811 | Tyyy | employee@email.com | 2011-01-01 | 0.00 | |
52810 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52809 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52808 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52807 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
52806 | Test | employee@email.com | 2011-01-01 | 0.00 |
Configuration object:
//ezEditTable configuration object var ezConfig = { editable: true, auto_save: true, default_selection: 'both', editor_model: 'cell', cell_editors:[ { type: 'none' }, { type: 'input', attributes:[['title', 'First name and last name']] }, { type: 'input', attributes:[['title', 'email address']] }, { type: 'custom', target: 'datePick' }, { type: 'input', attributes:[['maxLength', 10], ['title', '10 digits max.\n numbers with 2 decimal places only']], css:'alignRight' }, { type: 'boolean' } ], actions:{ 'update': { uri: 'php/employeeUpdateXhr.php', form_method: 'POST', on_update_submit: function(o, rows){ o.config.exec_requests(o, rows, 'update'); }, param_names: ['id','name','email','startdate','salary','active'], //additional custom properties for ajax_request ajaxContId: 'divAjaxOpsCont', ajaxId: 'divAjaxOps' }, 'insert': { uri: 'php/employeeInsertXhr.php', form_method: 'POST', on_insert_submit: function(o, rows){ o.config.exec_requests(o, rows, 'insert'); }, param_names: ['id','name','email','startdate','salary','active'], default_record: ['', 'Employee name...', 'employee@email.com', '2011-01-01','0', '<input type="checkbox" checked>'], //additional custom properties for ajax_request ajaxContId: 'divAjaxOpsCont', ajaxId: 'divAjaxOps' }, 'delete': { uri: 'php/script.deleteEmployee.php', submit_method: 'script', bulk_delete: false, param_names: ['id'] } }, /************************************************************ CUSTOM DELEGATE METHOD FOR INSERT AND UPDATE OPERATIONS *************************************************************/ exec_requests: function(o, rows, dbAction){ var action = o.config.actions[dbAction]; //config object: actions.insert or actions.update var cont = o.Get(action.ajaxContId); //messages container element for(var i=0; i<rows.length; i++){ var r = rows[i]; var rowIndex = r[0]; var rowObj = r[1]; //ezEditTable row object var rowValues = rowObj.values; //values prop returns array with cell values var params = ''; //url parameters string is constructed below for(var j=0; j<rowValues.length; j++){ params += o[dbAction+'Params'][j] + '=' + encodeURIComponent(rowValues[j]) + '&'; } params += 'rIndex=' + rowIndex; var div = o.CreateElm('div', ['id', 'div_r'+rowIndex]); cont.appendChild(div); o.Get(action.ajaxId).style.display = 'block'; var c = 0; //successful requests counter //Prototype Ajax Request var ajaxReq = new Ajax.Updater( div.id, action.uri, { method: action.form_method, parameters: params, onSuccess: function(transport){ var rIndex = transport.request.parameters.rIndex; //rowIndex is retrieved from response object if(rIndex){ //Modified cell mark is removed o.Editable.RemoveModifiedCellMark(rIndex); c++; } if(c==rows.length){ //action requests completed, ezEditTable array re-initialized if(dbAction=='update') o.Editable.modifiedRows = []; if(dbAction=='insert'){ o.Editable.newRows = []; o.Editable.addedRows = []; } } }, onException: function(obj, ex){ cont.innerHTML = 'Ouups an error occured! Data could not be updated!
'+ex.message; } } ); } }, /************************************************************/ //Data validation delegate, the script does not provide data validation tools validate_modified_value: function(o, colIndex, oldVal, newVal, cell, editor){ if(colIndex==2 && oldVal != newVal){ if(!et_ValidateEmail(newVal)){ alert('Please insert a valid email!'); return false; } else return true; } else if(colIndex == 4 && oldVal != newVal){ if(!et_IsNumber(newVal)){ alert('Please insert a valid number with 2 decimal places!'); return false; } else return true; } else return true; }, //Custom editor functions open_custom_editor: function(o, cell, editor){ if(cell.cellIndex == 3){ if(editor.innerHTML == '') setPickerDate(); //properties added for date picker onselected delegate (setOnSelectedDelegate) datePicker.eg_obj = o; datePicker.eg_cell = cell; datePicker.eg_editor = editor; } else cell.innerHTML = ''; cell.appendChild(editor); editor.style.display = ''; }, close_custom_editor: function(o, cell, editor){ if(cell.cellIndex == 3){ editor.style.display = 'none'; document.body.appendChild(editor); } }, //We define here how to retrieve the custom editor value get_custom_editor_value: function(o, editor, colIndex){ var strDate; if(colIndex == 3){//Date picker var obj = datePicker.getSelectedDay(); var m = (obj.month.toString().length==1 ? '0' + obj.month : obj.month); var d = (obj.day.toString().length==1 ? '0' + obj.day : obj.day); strDate = obj.year+'-'+m+'-'+d; } return strDate; }, //We define here how to set the custom editor value set_custom_editor_value: function(o, editor, colIndex, val){ if(colIndex == 3){ var date = et_FormatDate(val, 'YMD'); datePicker.setSelectedDay({ year:parseInt(date.getFullYear()), month:parseInt(date.getMonth()+1), day:parseInt(date.getDate()) }); } } }
Below the server-side PHP codes for DB operations used in this demo:
Insert:
<?php header("content-type: text/html"); header("Cache-Control: no-cache"); require( "../config/config.inc.php" ); require_once( "../".DIR_INC.PHP_FNS ); if(isset($_POST["id"]) && isset($_POST["name"]) && isset($_POST["email"])){ $id = $_POST["id"]; $name = echappement(utf8_urldecode($_POST["name"])); $email = echappement(utf8_urldecode($_POST["email"])); $startdate = $_POST["startdate"]; $salary = $_POST["salary"]; $active = $_POST["active"]; $ip = isset($_SERVER['HTTP_X_FORWARDED_FOR']) ? $_SERVER['HTTP_X_FORWARDED_FOR'] : $_SERVER['REMOTE_ADDR']; $rowId = $_POST["rowId"]; // rowId param is appended to all insert calls if($active == 'true') $active = 1; else $active = 0; connect_db(); $query = "INSERT INTO ".TBL_DEMO_EMPLOYEE." ". " VALUES('0','$name','$email','$startdate','$salary',null, null,". "'$ip', null, null, NOW(), null, null, $active, 0)"; mysql_query($query); //last inserted record id $id = mysql_insert_id(); echo "[New row ".$id."] <b>".$name."</b>'s data successfully inserted!"; close_db(); } else { echo "Data could not be saved! Expected params not found!"; } ?>
Update:
<?php header("content-type: text/html"); header("Cache-Control: no-cache"); require( "../config/config.inc.php" ); require_once( "../".DIR_INC.PHP_FNS ); if(isset($_POST["rowId"]) && isset($_POST["name"]) && isset($_POST["email"])){ $id = $_POST["id"]; $rowId = $_POST["rowId"]; if($id == ""){ //if id empty then id is retrieved from rowId $id = str_replace("tr", "", $rowId); } $name = echappement(utf8_urldecode($_POST["name"])); $email = echappement(utf8_urldecode($_POST["email"])); $startdate = $_POST["startdate"]; $salary = $_POST["salary"]; $active = $_POST["active"]; $ip = isset($_SERVER['HTTP_X_FORWARDED_FOR']) ? $_SERVER['HTTP_X_FORWARDED_FOR'] : $_SERVER['REMOTE_ADDR']; if($active == 'true') $active = 1; else $active = 0; connect_db(); $query = "UPDATE ".TBL_DEMO_EMPLOYEE." SET ". "NAME='$name',EMAIL='$email',STARTDATE='$startdate',SALARY='$salary'". ",MODIP='$ip',MODDATE=NOW(),ACTIVE=$active ". "WHERE ID='$id'"; mysql_query($query); echo "[RowId ".$id."] ".$name."'s data successfully updated!"; close_db(); } else { echo "Data could not be saved! Expected params not found!"; } ?>
Delete:
Records deleting is performed in this case via <script> tag inclusion method, ... submit_method: 'script', ...
(GET http request), therefore do not forget to specify the javascript content-type in your server-side code:
<?php header("content-type: application/x-javascript"); if(isset($_GET["id"])){ $id = $_GET["id"]; $ip = isset($_SERVER['HTTP_X_FORWARDED_FOR']) ? $_SERVER['HTTP_X_FORWARDED_FOR'] : $_SERVER['REMOTE_ADDR']; connect_db(); $query = "UPDATE ".TBL_DEMO_EMPLOYEE." SET ". "DELIP='$ip',DELDATE=NOW(),DELETED=1 ". "WHERE ID='$id'"; mysql_query($query); close_db(); } ?>
Top of page