smart_cells_lib.js

Here is the DHTML tree example with full source code

/*==============================================================================

                                 Smart Cells 1.3
                                 ===============
                       Copyright (c) 2007 Vyacheslav Smolin


Author:
-------
Vyacheslav Smolin (http://www.richarea.com, http://html2xhtml.richarea.com,
[e-mail])

About the script:
-----------------
Smart Cells is 100% JavaScript Ajax-based library that allow to make any part
or web page (eg table cells) editable. The Smart Cells API allows to edit
information of various types and store it on server.
The cell types supported include: text, time, textarea, list box, checkbox,
and extending...

Requirements:
-------------
Smart Cells works in IE, Mozilla-based browsers such as Firefox, Opera 9+,
and Safari 3.0.

Usage:
------
Please see example.html.

Demo:
-----
http://www.richarea.com/demo/smart_grid/

License:
--------
Free for non-commercial using. Copyright information must stay intact.
Please contact author for permission to use it in commercial projects.


==============================================================================*/

var is_safari = navigator.userAgent.indexOf('Safari')!=-1?true:false;
var is_opera = navigator.userAgent.indexOf('Opera')!=-1?true:false;

var SmartCells = {

	// array of cells
	cells : new Array(),

	// a cell currently being edited
	active_cell : null,

	// add a new cell of type cell_type
	add_cell : function(obj, cell_type) {
		var cell = eval('new SmartCell_' + cell_type + '(obj)');
		// set event handlers for the cell
		cell.set_handlers();

		this.cells[obj.id] = cell;
	},

	// add a new smart cell
	add_smart_cell : function(cell) {
		cell.set_handlers();

		this.cells[cell.obj.id] = cell;
	},

	// delete an existing smart cell
	delete_smart_cell : function(cell) {
		if (!this.cells[cell.obj.id]) return;

		cell.unset_handlers();

		this.cells[cell.obj.id] = null;
	},

	// return array of cells
	get_cells : function() {

		// some of cells could be deleted ie set to null - do not take them
//		return this.cells;

		var i;
		var cells = new Array();

		for (i in this.cells) {
			if (this.cells[i]) cells[i] = this.cells[i];
		}
		return cells;
	},

	// return cell of object obj
	get_cell : function(obj) {
		if (!obj) return null;
//alert(obj.id + ' => ' + this.cells[obj.id].obj.id);
		return this.cells[obj.id];
	},

	// return cell of object obj with id obj_id
	get_cell_by_obj_id : function(obj_id) {
		return this.cells[obj_id];
	},

	// set all handlers necessary for the editable cells functionality
	set_handlers : function() {

		var onclick = function(e){

//var asdf = document.getElementById('asdf');
//asdf.value = asdf.value + '\n' + SmartCells.active_cell;
//alert(SmartCells.active_cell);
			// no cell is in edit mode
			if (!SmartCells.active_cell) return;

			SmartCells.active_cell.save();

		};

		sc_attach_event(document, 'click', onclick);


		var onkeypress = function(e){
			if (!SmartCells.active_cell) return;

			var event = e||window.event;
			var next_cell = SmartCells.get_cell_by_obj_id(SmartCells.active_cell.tab_next_cell_obj_id);

			if (event.keyCode == 9) {

				if (next_cell) {
					var active_cell = SmartCells.active_cell;

					if (active_cell.save_on_tab) {
						// store value of currently modified cell
	    				active_cell.save();
					}
	
					// set current active cell
    				SmartCells.active_cell = next_cell;


					// must be below SmartCells.active_cell = next_cell
					// as setting new value for active cell is not allowed!
					if (!active_cell.save_on_tab) {
						// just update cell value not saving it
						active_cell.set_value(active_cell.get_current_value());
						active_cell.show_value();

						// removes all objects created outside the cell
						active_cell.remove_external_objects();
					}


					// here "this" is not a SmartCell object but a DOM object
    				SmartCells.active_cell.edit();
	
					if (!document.all) {
						event.preventDefault();
						event.stopPropagation();
					}
				}

				return false;

			}

			if (event.keyCode == 13) {
				// store value of currently modified cell
				SmartCells.active_cell.save();

				if (!document.all) {
					event.preventDefault();
					event.stopPropagation();
				}

				return false;
			}

			// ESC
			if (event.keyCode == 27) {
				// escape edit mode
   				SmartCells.active_cell.cancel_edit();

				if (!document.all) {
					event.preventDefault();
					event.stopPropagation();
				}

				return false;
			}

//			event.cancelBubble = true;

		};

		if (document.all) {
			sc_attach_event(document, 'keydown', onkeypress);
		} else {
			sc_attach_event(document, 'keypress', onkeypress);
		}

	},


	// sets keyboard events handler for element el
	set_keyboard_handler : function(el) {
		var onkeypress = function(e){
			if (!SmartCells.active_cell) return;

			var event = e||window.event;
			var next_cell = SmartCells.get_cell_by_obj_id(SmartCells.active_cell.tab_next_cell_obj_id);

			// TAB
			if (event.keyCode == 9) {


				if (next_cell) {
					var active_cell = SmartCells.active_cell;

					if (active_cell.save_on_tab) {
						// store value of currently modified cell
	    				active_cell.save();
					}
	
					// set current active cell
    				SmartCells.active_cell = next_cell;


					// must be below SmartCells.active_cell = next_cell
					// as setting new value for active cell is not allowed!
					if (!active_cell.save_on_tab) {
						// just update cell value not saving it
						active_cell.set_value(active_cell.get_current_value());
						active_cell.show_value();

						// removes all objects created outside the cell
						active_cell.remove_external_objects();
					}


					// here "this" is not a SmartCell object but a DOM object
    				SmartCells.active_cell.edit();
	
					if (!document.all) {
						event.preventDefault();
						event.stopPropagation();
					}
				}

				event.cancelBubble = true;
				return false;

			}

			// ESC
			if (event.keyCode == 27) {
				// escape edit mode
   				SmartCells.active_cell.cancel_edit();

				if (!document.all) {
					event.preventDefault();
					event.stopPropagation();
				}

				return false;
			}

		};

		if (document.all) {
			sc_attach_event(el, 'keydown', onkeypress);
		} else {
			sc_attach_event(el, 'keypress', onkeypress);
		}
	}

};

// smart cell object
function SmartCell(obj) {

	// parent object of the cell
	this.obj = obj;

	// cell value
	this.value = '';

	// default value
	this.default_value = '';

	// parameters to send to server via ajax
	this.query_params = {};

	// cell parameters (additional values)
	this.params = {};

	// cell parameters defaults (additional values)
	this.default_params = {};

	// url to post ajax query
	this.query_url = '';

	// obj id of a cell that got active on Tab key pressed
	this.tab_next_cell_obj_id = null;

	// user defined save function
	this.user_save = null;

	// cell type
	this.type = '';

	// value type used for sorting
	this.sort_type = 'string';

	// current language
	this.language = 'en';

	// use default langauge if lang data not found for the language specified
	this.default_language = 'en';

	// readonly mode
	this.readonly = false;

	// save cell value on tab key pressed (when move to next cell)
	this.save_on_tab = true;

	// cell alignment
	this.align = 'left';

	// event handlers
	this.ondblclick = null;
	this.onclick = null;

	// set all handlers necessary for the object
	this.set_handlers = function() {

		this.ondblclick = function(e){

			var obj = e.target?e.target:window.event.srcElement;
			var this_cell = SmartCells.get_cell(obj);


			if (!this_cell) {
				obj = get_previous_object(obj, 'TD');
				this_cell = SmartCells.get_cell(obj);
			}

			// this is not a cell object
			if (!this_cell) {
				return true;
			}

			// cannot change the cell
			if (this_cell.readonly) {
				return true;
			}

			// we edit this cell yet
			if (SmartCells.active_cell != this_cell) {

				// store value of currently modified cell
				if (SmartCells.active_cell) SmartCells.active_cell.save();

				// set current active cell
				SmartCells.active_cell = this_cell;

				// here "this" is not a SmartCell object but a DOM object
				SmartCells.active_cell.edit();

			} else {

			}

			var event = e||window.event;
			event.cancelBubble = true;
			return true;
		};

		sc_attach_event(this.obj, 'dblclick', this.ondblclick);
//		this.obj.ondblClick = ondblclick;

		this.onclick = function(e){

//return false;
			var obj = e.target?e.target:window.event.srcElement;
			var row = obj.parentNode;

			// need this trick to prevent context menu in Opera(sucs browser)
//			if (SmartCells.active_cell == this_cell) {
			if (row) {
				row.className = row.className.replace(/ smart_cell_temp_text/g, '');
				row.className += ' smart_cell_temp_text';
			}
//			}

			var event = e||window.event;
//			event.cancelBubble = true;


			// save current active cell if clicked somewhere outside it
//			var obj = e.target?e.target:window.event.srcElement;
    		var this_cell = SmartCells.get_cell(obj);

			if (!this_cell) return;

			// stop parsing onclick even further if cell is in edit mode
			if (SmartCells.active_cell == this_cell) {
				event.cancelBubble = true;
			}

			if (SmartCells.active_cell != this_cell) {
				if (SmartCells.active_cell) SmartCells.active_cell.save();
			}

		};

		sc_attach_event(this.obj, 'click', this.onclick);

/*
		var onselectstart = function(e){
			(e||window.event).cancelBubble = true;
			return true;
		};
		sc_attach_event(this.obj, 'selectstart', onselectstart);
*/
//this.obj.onselectstart = onselectstart;


	}


	// unset all handlers necessary for the object
	this.unset_handlers = function() {

		sc_attach_event(this.obj, 'dblclick', this.ondblclick);
		sc_attach_event(this.obj, 'click', this.onclick);