Editable Grid
To make a grid editable you need to enable the editable
property and configure the ezEditTable configuration object (ezEditTable_config).
This demo shows how to :
- configure the cell editors
- configure the server-side actions for insert, update and delete operations
- plug a third-party date picker component and use the editor's delegates
- use custom cell data validators
Please note that is a live demo and your tests will be recorded in a database!
Id | Name | Start Date | Salary | Active | |
---|---|---|---|---|---|
35886 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35885 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35884 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35883 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35882 | dfdfhfgh | employee@email.com | 2011-01-01 | 0.00 | |
35881 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35879 | dokter afadf dfa | dokter_dark@email.com | 2011-01-01 | 1000.00 | |
35878 | 1212121 | employee@email.com | 2011-01-01 | 0.00 | |
35877 | é&21 | employee@email.com | 2011-01-01 | 0.00 | |
35875 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35874 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35873 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35872 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35871 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35870 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35869 | employee@email.com | 2012-01-01 | 12.36 | ||
35865 | titi | employee@email.fr | 2011-01-01 | 10.00 | |
35864 | employee@email.com | 2011-01-01 | 0.00 | ||
35860 | employee@email.com | 2011-01-01 | 2.33 | ||
35859 | employee@email.com | 2011-01-01 | 25.55 | ||
35851 | free@email.com | 2011-01-01 | 0.00 | ||
35848 | asd | employee@email.com | 2011-01-01 | 0.00 | |
35847 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35846 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35845 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35844 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35843 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35842 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35841 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35840 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35839 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35838 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35837 | asdfasdf | employee@email.com | 2011-01-01 | 0.00 | |
35836 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35835 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35834 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35833 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35832 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35831 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35830 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35829 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35828 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35827 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35826 | asdfasdf | employee@email.com | 2011-01-01 | 0.00 | |
35825 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35824 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35823 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35822 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35821 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35820 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35819 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35818 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35817 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35816 | asdfasdf | employee@email.com | 2011-01-01 | 0.00 | |
35815 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35814 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35813 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35812 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35811 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35810 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35809 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35808 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35807 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35806 | asdfasdf | employee@email.com | 2011-01-01 | 0.00 | |
35805 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35804 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35802 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35801 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35800 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35799 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35798 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35797 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35796 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35795 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35794 | asdfasdf | employee@email.com | 2011-01-01 | 0.00 | |
35793 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35792 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35791 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35790 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35789 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35788 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35787 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35784 | employee@emil.com | 2011-01-01 | 0.00 | ||
35783 | kajal | employee56@email.com | 2011-01-01 | 0.00 | |
35782 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35781 | sfgsdf | employee@email.com | 2011-01-01 | 0.00 | |
35780 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35779 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35778 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35777 | Test grid | employee@email.com | 2011-01-01 | 1000.00 | |
35776 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35775 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35774 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35773 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35772 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35771 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
35768 | sadfsdf | employee@email.coms | 2011-01-01 | 0.00 | |
35765 | Employee name... | memi@email.com | 2011-01-01 | 10.20 | |
35764 | aeerkffkr | employee@email.com | 2011-01-01 | 0.00 | |
35760 | azaz | employee@email.com | 2011-01-01 | 0.00 |
//Validation functions function et_ValidateEmail(email){ var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; return reg.test(email); } function et_IsNumber(val){ var isNumber = /^\d+\.\d{2}$/; return isNumber.test(val); } var tfConfig = { btn_reset: true, alternate_rows: true, col_0: 'none', col_5: 'none', rows_counter: true, col_width:['50px', '280px', '220px', '100px', '100px', '70px'], col_date_type: [null,null,null,'ymd',null,null], sort_config: { sort_types: ['number','string','string','ymd','number','none'] }, grid_layout: true, grid_width: '860px', grid_height: '300px', selectable: true, editable: true, ezEditTable_config: { loadStylesheet: true, default_selection: 'both', editor_model: 'cell', form_submit_interval: 999, cell_editors:[ { type: 'none' }, { type: 'input', attributes:[['title', 'First name and last name']] }, { type: 'input', attributes:[['title', 'email address']] }, { type: 'custom', target: 'dateEditor' }, { type: 'input', attributes:[['maxLength', 10], ['title', '10 digits max.\n numbers with 2 decimal places only']], css:'alignRight' }, { type: 'boolean' } ], actions:{ 'update': { uri: 'php/employeeUpdate.php', submit_method: 'form', form_method: 'POST', param_names: ['id','name','email','startdate','salary','active'] }, 'insert': { uri: 'php/employeeInsert.php', submit_method: 'form', form_method: 'POST', param_names: ['id','name','email','startdate','salary','active'], default_record: ['', 'Employee name...', 'employee@email.com', '2011-01-01','0.00', ''] }, 'delete': { uri: 'php/script.deleteEmployee.php', submit_method: 'script', bulk_delete: false, param_names: ['id'] } }, //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){ cell.appendChild(editor); editor.style.display = ''; }, close_custom_editor: function(o, cell, editor){ editor.style.display = 'none'; document.body.appendChild(editor); var d = o.Get('daySlc'), m = o.Get('monthSlc'), y = o.Get('yearSlc'); d.value = ''; m.value = ''; y.value = ''; }, get_custom_editor_value: function(o, editor, colIndex){ var strDate; var d = o.Get('daySlc'), m = o.Get('monthSlc'), y = o.Get('yearSlc'); strDate = y.value+'-'+m.value+'-'+d.value; return strDate; }, set_custom_editor_value: function(o, editor, colIndex, val){ o.config.SetDateEditorValue(o, val, 'YMD'); }, //Custom date editor function, does not belong to ezEditTable script SetDateEditorValue: function(o, val, dateType){ var date = tf_FormatDate(val, dateType); var d = o.Get('daySlc'), m = o.Get('monthSlc'), y = o.Get('yearSlc'); var day = date.getDate(), month = date.getMonth()+1, year = date.getFullYear(); d.value = day.toString().length==1 ? '0'+day.toString() : day; m.value = month.toString().length==1 ? '0'+month.toString() : month; y.value = year; } } };
Below the server-side PHP codes for DB operations used in this demo:
Insert:
<?php 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']; if($active == 'true') $active = 1; else $active = 0; connect_db(); $query = "INSERT INTO ".TBL_DEMO_EMPLOYEE." ". " VALUES('0','$name','$email','$startdate','$salary',". "'$ip', null, null, NOW(), null, null, $active, 0)"; mysql_query($query); close_db(); } ?>
Update:
<?php 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']; 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); close_db(); } ?>
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(); } ?>