Editable Grid with command buttons

To make a grid editable you need to enable the editable property and configure the ezEditTable configuration object (ezEditTable_config) nested in the table filter configuration object. This demo shows how to :

Please note that is a live demo and your tests will be recorded in a database!

Id Name Email Start Date Salary Active Actions
27670kozakoza@email.com2011-01-010.00
27669Employee name...employee@email.com2011-01-010.00
27668Employee name...employee@email.com2011-01-010.00
27667Employee name...employee@email.com2011-01-010.00
27666Employee name...employee@email.com2011-01-010.00
27665Employee name...employee@email.com2011-01-010.00
27664Employee name...employee@email.com2011-01-010.00
27663Employee name...employee@email.com2011-01-010.00
27662Employee name...employee@email.com2011-01-010.00
27661Employee name...employee@email.com2011-01-010.00
27659Employee name...employee@email.com2011-01-010.00
27658Employee name...employee@email.com2011-01-010.00
27657Employee name...employee@email.com2011-01-010.00
27656Employee name...employee@email.com2011-01-010.00
27655Employee name...employee@email.com2011-01-010.00
27654Employee name...employee@email.com2011-01-010.00
27653Employee name...employee@email.com2011-01-010.00
27652ujhemployee@email.com2011-01-010.00
27651ABC alaemployee@email.com2011-01-010.00
27650Employee name...employee@email.com2011-01-010.00
27648Employee name...employee@email1.com2011-01-010.00
27647Employee name...employee@email.com2011-01-010.00
27646Employee name...employee@email.com2011-01-010.00
27645Employee name...employee@email.com2011-01-010.00
27644Employee name...employee@email.com2011-01-010.00
27643Employee name...employee@email.com2011-01-010.00
27642xxxxxxxxxxxxxxxxxemployee@email.com2011-01-010.00
27640Employee name...employee@email.com2011-01-010.00
27639Employee name...employee@email.com2011-01-010.00
27638Employee name...employee@email.com2011-01-010.00
27637Employee name...employee@email.com2011-01-010.00
27636Employee name...employee@email.com2011-01-010.00
27635Employee name...employee@email.com2011-01-010.00
27634kozio?ekemployee@email.com2011-01-010.00
27633ggfggfghgjjgjhemployee@email.com2011-01-010.00
27632Employee name...employee@email.com2011-01-010.00
27631Employee name...employee@email.com2011-01-010.00
27630Employee name...employee@email.com2011-01-010.00
27629Employee name...employee@email.com2011-01-010.00
27628Employee name...employee@email.com2011-01-010.00
27627Employee name...employee@email.com2011-01-010.00
27626Employee name...employee@email.com2011-01-010.00
27625Employee name...employee@email.com2011-01-010.00
27624Employee name...employee@email.com2011-01-010.00
27623Employee name...employ_ee@email.com2011-01-010.00
27622Employee name...employee@email.com2011-01-010.00
27621Employee name...employee@email.com2011-01-010.00
27620Employee name...employee@email.com2011-01-010.00
27619Employee name...employee@email.com2011-01-010.00
27618Employee name...employee@email.com2011-01-010.00
27617Employee name...employee@email.com2011-01-010.00
27616Employee name...employee@email.com2011-01-010.00
27615Employee name...employee@email.com2011-01-010.00
27614Employee name...employee@email.com2011-01-010.00
27613Employee name...employee@email.com2011-01-010.00
27612Employee name...employee@email.com2011-01-010.00
27610Employee name...employee@email.com2011-01-010.00
27609Employee name...employasdasdee@email.com2011-01-010.00
27607Employee name...employee@email.com2011-01-010.00
27605Employee name...employee@email.com2011-01-010.00
27604Employee name...empl@email.com2011-01-010.00
27603kjkjmpemployee@email.com2011-01-010.00
27602essaiemployee@email.com2011-01-010.00
27601Employee name...employee@email.com2011-01-010.00
27599sdfghjkemployee@email.come2011-01-010.00
27598jhgkkl4employettr@email.com2011-01-010.00
27596jhgkkl4employee@email.com2011-01-010.00
27594jhgkkl4employee@email.com2011-01-010.00
27593jhgkkl4employee@email.com2011-01-010.00
27592Employee name...employee@email.com2011-01-010.00
27591jhgkkl4employppppppp@email.com2011-01-010.00
27590jhgkkl4employee@email.com2011-01-010.00
27589jhgkkl4employeemmmm@email.com2011-01-010.00
27588Employee name...employee@email.com2011-01-010.00
27587jhgkkl4employee@email.com2011-01-010.00
27586jhgkkl4employee@email.com2011-01-010.00
27585Employee name...employee@email.com2011-01-010.00
27584jhgkkl4employee@email.com2011-01-010.00
27583Employee name...employee@email.com2011-01-010.00
27582Employee name...employee@email.com2011-01-010.00
27579Employee name...employee@email.com2011-01-010.00
27578Employee name...employee@email.com2011-01-010.00
27577Employee name...employee@email.com2011-01-010.00
27576Employee name...employee@email.com2011-01-010.00
27575ddffddemployee@email.com2011-01-010.00
27573Employee name...employepppppe@email.com2011-01-010.00
27572Employee name...employee@email.com2011-01-010.00
27571Employee name...employee@email.com2011-01-010.00
27570Employee name...employee@email.com2011-01-010.00
27569Employee name...employee@email.com2011-01-010.00
27568Employee name...employee@email.com2011-01-010.00
27567Employee name...employee@email.com2011-01-010.00
27563Employee name...employee@email.com2011-01-010.00
27561Robertoemployee@email.com2011-01-010.00
27560Employee name...employee@email.com2011-01-010.00
27559Robertoemployee@email.com2011-01-010.00
27558Employee name...employee@email.com2011-01-010.00
27555Employee name...employee@email.com2011-01-010.00
27553Employee name...employee@email.com2011-01-010.00
27552Employee name...fgfhfjfjg@ytytt.fr2011-01-010.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 = {
			enable_default_theme: true,
			btn_reset: true,
			alternate_rows: true,
			popup_filters: true,
			col_0: 'none', col_5: 'none', col_6: 'none',
			rows_counter: true,
			paging: true,
			col_width:['50px', '240px', '200px', '100px', '100px', '70px', '130px'],
			col_date_type: [null,null,null,'ymd',null,null],
			sort_config: { sort_types: ['number','string','string','ymd','number','none', 'none'] },
			grid_layout: true, grid_width: '930px', grid_height: '300px', grid_enable_cols_resizer: false,

			selectable: true,
			editable: true,
			ezEditTable_config: {
				loadStylesheet: true,
				auto_save: false,
				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' },
					{ type: 'command',
						buttons:{
							enable: ['update', 'insert', 'delete', 'submit', 'cancel'],
							'update': { title:'Edit row' },
							'insert': { title:'Add row'  },
							'delete': { title:'Delete row' },
							'submit': { text:'Save', title:'Save'  },
							'cancel': { text:'Close', title:'Close' }
						}
					}
				],
				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', '', ''],
						on_after_submit: function(o, modRows){ setTimeout(function(){ location.reload(); }, 15); }
					},
					'delete': {
						uri: 'php/script.deleteEmployee.php', submit_method: 'script', bulk_delete: false,
						param_names: ['id'],
						on_after_submit: function(o, modRows){ setTimeout(function(){ location.reload(); }, 15); }
					}
				},

				//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');
				},

				//Server activity callback events
				on_server_activity_start: function(o, row){ setTimeout(function(){ o.Get('divLoader').style.display = 'block';}, 1); },
				on_server_activity_stop: function(o, row){ setTimeout(function(){ o.Get('divLoader').style.display = 'none';}, 1); },

				//Messages
				msg_submit_ok: 'Data processed successfully!',
				msg_confirm_delete_selected_rows: 'Are you sure you want to delete the selected record?',
				msg_error_occured: 'Error!',
				msg_submit_unsuccessful: 'Data could not be saved correctly!',

				//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();
}
?>
		

E.n.j.o.y.  ads-free content!