TableEditor

Flexible in place editing of TableSorter

FULL EXAMPLE

« Back to main page

A full featured real life example of how to use this plugin. It uses the PRE_EDIT function to change a field to a predefined selection. Client side validation is then injected on input during POST_EDIT -- watch that invalid email! Input is further sanitized (stripped of non alpha-numeric characters and trimmed to no more than 10 characters) during PRE_SAVE. Finally, the datasource is updated via an AJAX request in FUNC_UPDATE. If the AJAX request fails, the row is returned to its original values.

SOURCE

<script type="text/javascript">
$().ready(function() {	
	$("#editableTable").tableSorter({
		sortColumn: 'First Name',			// Integer or String of the name of the column to sort by.  
		sortClassAsc: 'headerSortUp', 		// class name for ascending sorting action to header
		sortClassDesc: 'headerSortDown',	// class name for descending sorting action to header
		headerClass: 'header', 				// class name for headers (th's)
		disableHeader: 'ID' 	// DISABLE Sorting on ID
	}).tableEditor({
		EDIT_HTML: 'edit',
		SAVE_HTML: 'save',
		EVENT_LINK_SELECTOR: 'button.eventLink',
		FUNC_PRE_EDIT: 'preEdit',
		FUNC_POST_EDIT: 'postEdit',
		FUNC_PRE_SAVE: 'preSave',
		FUNC_UPDATE: 'updateTable'
	});
});

// convert city to a predefined select box
function preEdit(o) { 
	// get the fourth column (city)
	var col = o.row[3];
	
	// get the existing value
	var val = o.row[3].innerHTML;
	
	var html = "BalbecBudapestCape TownChicagoChonquingHoustonLondonMilwaukeeMunchenWashington D.C.";
	
	$(col).html(html).find('select option').each(function() {
		if ($(this).html() == val)
			$(this).attr("selected", true);
	});
}

// inject client side validation
function postEdit(o) {
	PommoValidate.reset();
	
	// add validation & non empty validator to row cells
	o.row.find("select, input").addClass('validate pvEmpty').end();
	
	// add email validator to email cell
	// TODO -- better way to access 4th element?
	$(o.row.get(4)).find("input").addClass('pvEmail').end;
	
	// initialize validation
	//var saveButton = $('../../td button.eventLink', o.row);
	PommoValidate.init('input.validate, select.validate','../td button.eventLink', true, o.row);
}

// remove alphanumeric characters, shorten all strings to < 10 chars
function preSave(o) {
	o.row.find("input, select").each(function() {
		var val = common.sanitize($(this).val());
		$(this).val(val);
	}).end();
}

function updateTable(o) {
	// make AJAX call to update the datasource.
	// NOT YET show for demonstration.
	return true;
}
</script>