smart_cells_lib.js

Here is the DHTML tree example with full source code

//		this.obj.removeAttribute('align');
		this.obj.removeAttribute('title');
	}


	// send cell value
	this.send = function(new_value) {

		// current active cell becomes inactive
//		SmartCells.active_cell = null;


		// restore value of class attribute that it was before editing
//		var row = this.obj.parentNode;
//		row.className = row.className.replace(/ smart_cell_temp_text/g, '');

		var sc_obj = this;
		var old_value = this.value;


		// create a new object JSHttpRequest.
		var req = new JsHttpRequest();

		// code executed automatically on loading completed
		req.onreadystatechange = function() {
			var value = old_value;
			if (req.readyState == 4) {
				if (req.responseJS) {
					var status = req.responseJS.status;

					if (status != 'ok') {
						// restore old value
						alert(status);
					} else {

						var value = new_value;

						// function called if modification was successfull
						sc_obj.post_modify_func();

					}

				}

				sc_obj.set_value(value);
				sc_obj.show_value();

			// Debug info
//			document.getElementById('debug').innerHTML = req.responseText;
			}
		}

		var query_params = this.query_params;
//		query_params.value = new_value;


		// add cell params
		var i;
		for (i in this.params) {
			query_params[i] = this.params[i];
		}

		// Enable caching
		req.caching = false;
		// Prepare object
		req.open('POST', this.query_url, true);
		// Send query data
		req.send(query_params);

	}


	// set cell value
	this.set_value = function(value) {
		this.value = value;

		// change cell hint
		this.change_title();
	};

	// set default cell value
	this.set_default_value = function(value) {
		this.default_value = value;
	};

	// show cell value in its object
	this.show_value = function() {
		// dont try to set value for active cell!!!
		if (this.is_active()) return;
/*
		if (SmartCells.active_cell &&
			SmartCells.active_cell == SmartCells.get_cell(this.obj)) {
			return;
		}
*/

		this.obj.align = this.align;

//		this.obj.innerHTML = this.value==''?' ':this.value;
		this.obj.innerHTML = this.value==''?'&nbsp;':'<nobr>'+this.value+'</nobr>';
	};

	// turn object into edit mode
	this.edit = function() {
	};

	// turn object into default mode and save current value
	this.save = function() {

		// check if value specified is valid
		if (!this.readonly && !this.is_valid()) return;

		// restore value of class attribute that it was before editing
		var row = this.obj.parentNode;
		if (row) {
			row.className = row.className.replace(/ smart_cell_temp_text/g, '');
		}


		// current active cell becomes inactive
		SmartCells.active_cell = null;


		// non-editable cell
		if (this.readonly) {
			return;
		}


		if (this.user_save) {
			this.user_save();
		} else {
			this._save();
		}

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

	};

	// turn object into default mode without saving current value
	this.cancel_edit = function() {

		// restore value of class attribute that it was before editing
		var row = this.obj.parentNode;
		if (row) {
			row.className = row.className.replace(/ smart_cell_temp_text/g, '');
		}


		// current active cell becomes inactive
		SmartCells.active_cell = null;

		this.show_value();

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

	};

	// native save function
	this._save = function() {
	};

	// check if value typed is allowed
	this.is_valid = function() {
		return true;
	};

	// function called after changes saved
	this.post_modify_func = new Function();

	// set obj id of a cell that got active on tab key pressed
	this.set_tab_next_cell = function(obj_id) {
		this.tab_next_cell_obj_id = obj_id;
	};

	// returns current value, edit mode value has a priority
	this.get_current_value = function() {

	};

	// returns current value prepared for sorting
	this.get_sort_value = function() {
		return this.get_current_value();
	};

	// removes all objects created outside the cell
	this.remove_external_objects = function() {

	};

	// return clone of itself
	this.clone = function() {
		if (typeof(clone) == 'function') {
			return clone(this);
		}
	};

	// returns lang data in the language specified
	this.get_lang_data = function(lang) {

		var cell_lang_data = this.get_lang_array();

		if (!lang) lang = this.language;
		if (!cell_lang_data[lang]) lang = this.default_language;

		return cell_lang_data[lang];
	};


	// returns array of lang data
	this.get_lang_array = function() {

		return new Array();

	};

	// change cell hint
	this.change_title = function() {
		if (this.obj) {
			this.obj.setAttribute('title', this.value);
		}
	};

	// return true if the cell in edit mode
	this.is_active = function() {
		if (SmartCells.active_cell &&
			SmartCells.active_cell == SmartCells.get_cell(this.obj)) {
			return true;
		}
		return false;
	};

	// make the cell visible in grid if it is scrolled behind its borders
	this.make_visible_in_grid = function() {
		// make the cell visible in grid if necessary
		var grid = this.obj.grid;
		if (!grid) return;

		var grid_offset = grid.content_div.scrollLeft;

		var cell_pos = get_obj_pos(this.obj, grid.content_div);
//alert('Cell offset = ' + cell_pos[0] + ' => ' + cell_offset);
		var cell_offset = cell_pos[0];

		// cell is not visible completely (behind left border of the grid)
		if (grid_offset > cell_offset) {
			grid.header_div.scrollLeft = grid.content_div.scrollLeft = cell_offset;
		} else {
			// cell is not visible completely (behind right border of the grid)
			var next_cell_offset = cell_offset +
				Number(grid.columns[this.obj.cell_index + grid.frozen_col_num]['col_width']);
//alert('Cell offset = ' + cell_offset + ' => ' + Number(grid.columns[this.obj.cell_index + grid.frozen_col_num]['col_width']));
//alert('Next offset = ' + next_cell_offset + ' Cur offset ' + (grid_offset + grid.content_div.offsetWidth));
			var offset_diff = next_cell_offset - (grid_offset + grid.content_div.offsetWidth);
//alert('Diff = ' + offset_diff);
			if (offset_diff > 0) {
				grid.header_div.scrollLeft = grid.content_div.scrollLeft =
										Math.max(0, grid_offset+offset_diff);
//alert('Old offset = ' + grid_offset + ' New offset = ' + Math.max(0, grid_offset+offset_diff));
			}
		}
//alert('Grid: ' + grid_offset + ' => ' + cell_offset);

	};

}


// text cell
function SmartCell_text(obj) {

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

	// cell type
	this.type = 'text';

	// turn object into edit mode
	this.edit = function() {

		// make cell visible in grid if it is behind its borders
		this.make_visible_in_grid();

//alert('Parent');
		// cannot change the cell
		if (this.readonly) {
			return true;
		}

		// switch object into edit mode
		if (is_safari) {
			var text_obj = document.createElement('INPUT');
		} else {
			var text_obj = document.createElement('TEXTAREA');
		}
		text_obj.setAttribute('id', this.get_text_field_id());
		text_obj.style.width = (this.obj.offsetWidth - 2) + 'px';
		text_obj.style.height = (this.obj.offsetHeight - 4) + 'px';
		text_obj.style.border = '0px';
		text_obj.wrap = 'soft';
		text_obj.style.overflow = 'hidden';
		text_obj.value = this.value;

//		this.obj.wrap = 'soft';
		this.obj.innerHTML = '';
		if (is_safari) var old_height = this.obj.offsetHeight;
		this.obj.appendChild(text_obj);
		if (is_safari) this.obj.style.height = (old_height-2)+'px';


		var onclick = function(e){
			(e||window.event).cancelBubble = true;
			return true;
		};
		sc_attach_event(text_obj, 'click', onclick);


		// move cursor to the very beginning of the text
		if (text_obj.createTextRange) {
			var range = text_obj.createTextRange();
			range.collapse(true);
			range.select();
		} else {
			if (text_obj.setSelectionRange) {
//				text_obj.focus();
				text_obj.setSelectionRange(0, 0);
			}
		}

		text_obj.focus();

	};

	// turn object into default mode and save current value
	this._save = function() {

		var sc_obj = this;
		var old_value = this.value;
		var new_value = document.getElementById(this.get_text_field_id()).value;
		// remove new line chars
		new_value = String(new_value).replace(/[\r\n]+/g, '');

//		SmartCells.active_cell = null;

		// restore value of class attribute that it was before editing
//		var row = this.obj.parentNode;
//		row.className = row.className.replace(/ smart_cell_temp_text/g, '');

		this.send(new_value);

	};


	// returns current value, edit mode value has a priority
	this.get_current_value = function() {
		var text_field = document.getElementById(this.get_text_field_id());

		if (text_field) {
			return text_field.value;
		}

		return this.value;
	};


/*
	// show cell value in its object
	this.show_value = function() {

		// dont try to set value for active cell!!!
		if (SmartCells.active_cell &&
			SmartCells.active_cell == SmartCells.get_cell(this.obj)) {
			return;
		}

		this.obj.innerHTML = this.value==''?'&nbsp;':this.value;
	};
*/


	// text cell specific functions

	// return id of text field for edit mode
	this.get_text_field_id = function() {
		return this.obj.id + '_text';
	}

}

SmartCell_text.prototype = new SmartCell;


// time cell
function SmartCell_time(obj) {

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

	// cell type
	this.type = 'time';

	// sorting type
	this.sort_type = 'time';


	// check if value typed is allowed
	this.is_valid = function() {
		var text_obj = document.getElementById(this.get_text_field_id());
		var new_value = text_obj.value;

		// valid is an empty string or string in format NN:NN
		var valid = new_value.match(/^[\s]*$/) || new_value.match(/^[\s]*[0-9]+:[0-9]{2}[\s]*$/);

		if (!valid) {
			var lang_data = this.get_lang_data();

			alert(lang_data['wrong_format']);
			text_obj.focus();
		}

		return valid;
	};


	// returns array of lang data
	this.get_lang_array = function() {

		var cell_lang_data = new Array();

		cell_lang_data['en'] = {
'wrong_format' : 'The time value should be in NN:NN format!'
		};

		cell_lang_data['ru'] = {
'wrong_format' : '吗屐