Demos

SIMPLE

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! By default data changes are saved whenever a new row is selected.
Instructions: double-click on a cell to open the editor.

Configuration object:

	//ezEditTable configuration object			
	var demo1Config = {
		editable: true,
		default_selection: 'both',
		editor_model: 'cell',
		form_submit_interval: 999, //interval separating data submissions to prevent server`s overload security policy
		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/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', '']
			},
			'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){
			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);
			}
		},
		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;
		},
		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()) });
			}
		}
	};
	
	//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 isPrice = /^\d+\.\d{2}$/;
		return isPrice.test(val);
	} 
	
		

Below the command buttons code:

<div class="ezCommandEditor">
	<div class="floatLeft">
		<button onclick="et1.Editable.Edit();">
			<img src="ezEditTable/themes/icn_edit.gif" alt="Edit"/> </button>
			
		<button onclick="et1.Editable.AddNewRow();">
			<img src="ezEditTable/themes/icn_add.gif" alt="Add"/> </button>
			
		<button onclick="et1.Editable.SubmitDeletedRows();">
			<img src="ezEditTable/themes/icn_del.gif" alt="Delete"/> </button>
	</div>
	<div class="floatLeft" style="margin:5px 5px 2px 20px; font-size:12px;">
		<input id="chkRowEditor" name="chkRowEditor" type="checkbox" 
			onclick="et1.Editable.CloseRowEditor(); 
				if(this.checked){ et1.editorModel = 'row'; } 
				else { et1.editorModel = 'cell'; }" />
		<label for="chkRowEditor">Row editor</label>
		
		<input id="chkMultipleSlc" name="chkMultipleSlc" type="checkbox" 
			onclick="if(this.checked){ 
				et1.bulkDelete = true; et1.selectionModel = 'multiple'; 
				} else {  
					et1.bulkDelete = false; et1.selectionModel = 'single'; 
				}" />
		<label for="chkMultipleSlc">Multiple selection</label>
	</div>						
	<div class="floatRight" style="margin:5px 5px 2px 0; font-size:12px;">
		<label for="chkAutoSaveModel">Autosave on</label>
		<select id="chkAutoSaveModel" name="chkAutoSaveModel" 
			onchange="et1.autoSaveModel = this.options[this.selectedIndex].value;">
			<option value="row" selected="selected">row</option>
			<option value="cell">cell</option>
		</select>
		selection change
		
		<button title="Save created and modified records"
			onclick="et1.Editable.SubmitAll();">
			<img src="ezEditTable/themes/icn_save.gif" alt=""/> Save</button>
	</div>
	
	<div style="clear:both;"></div>			
</div>			
	

Below the PHP code used for the CRUD operations in this demo:

HTML table generation:

	connect_db();
	
	$query = mysql_query("SELECT ID, NAME, EMAIL, STARTDATE, SALARY, ACTIVE".
		" FROM ".TBL_DEMO_EMPLOYEE." WHERE DELETED = 0".
		" ORDER BY ID DESC LIMIT 0, 100");		
	
	<table id="demoEmployee1" cellspacing="0" width="100%">
			<thead>
				<tr>
					<th width="30">Id</th>
					<th>Name</th>
					<th width="150">Email</th>
					<th width="70">Start Date</th>
					<th width="50" style="text-align:right;">Salary</th>
					<th width="30">Active</th>
					</tr>				
			</thead>				
			<tbody>				
			 <?					
				while($row = mysql_fetch_row($query)){
					$id =  $row[0];
					$name = $row[1];
					$email = $row[2];
					$startdate = $row[3];
					$salary =  $row[4];
					$active =  $row[5];
					$checked = "";
					if($active == 1) $checked = "checked=\"checked\"";
						echo("<tr id=\"tr".$id."\">".
						"<td>".$id."</td>".
						"<td>".$name."</td>".
						"<td>".$email."</td>".
						"<td>".$startdate."</td>".
						"<td align=\"right\">".$salary."</td>".
						"<td><input type=\"checkbox\" ".$checked." /></td>".
						"</tr>" );
				}
			?>
		</tbody>
	</table>
	
	close_db();
	

Insert (employeeInsert.php):

		<?php
			if(isset($_POST["name"]) && isset($_POST["email"]) && isset($_POST["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'];
				$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();
				if($id != ""){
					// set new row element id, temporary id is replaced with new record id 
					echo "<script>";
					echo "var tr = window.parent.document.getElementById('".$rowId ."');";
					echo "if(tr){ tr.setAttribute('id', 'tr".$id."'); }"; 
					echo "</script>";
				}
				close_db();
			}
		?>		
	

Update (employeeUpdate.php):

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

Delete (script.deleteEmployee.php):

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["rowId"])){
				$id = isset($_GET["id"]) ? $_GET["id"] : str_replace("tr", "", $_GET["rowId"]);
				$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);
				echo('//--//');
				close_db();
			}
		?>
	

---

Top of page