smart_grid_lib.js

Here is the DHTML tree example with full source code

					}

				}

				break;
			default:
				break;
		}

	}

	// unselect all rows selected
	this.unselect_rows = function() {

		var row_id;
		for (row_id in this.selected_rows) {
			this.unselect_row(row_id);
		}

		// clear array of selected rows
		this.selected_rows = new Array();

		this.last_selected_row_id = null;
	}

	// select row with id row_id
	this.select_row = function(row_id) {

		if (this.selected_rows[row_id]) return;

		var row_obj = document.getElementById(row_id);
		row_obj.className += ' sg_row_selected';

		// remember that the row is selected
		this.selected_rows[row_id] = true;

	}

	// unselect row with id row_id
	this.unselect_row = function(row_id) {

		if (!this.selected_rows[row_id]) return;

		var row_obj = document.getElementById(row_id);
		row_obj.className = row_obj.className.replace(/[ ]?sg_row_selected/g,'');

		// clear up the selection flag
		this.selected_rows[row_id] = false;

	}

	// return index of row with id row_id in table
	this.get_row_index = function(row_id) {
	    var i;

		var rows = this.get_rows();
		var rows_len = rows.length;

		for (i=0; i<rows_len; i++) {
			if (rows[i].getAttribute('id') == row_id) return i;
		}

		// not found
		return -1;
	}

	// return data rows
	this.get_rows = function() {
		var rows = this.content_table.rows;

		if (rows.length == 0) return this.content_table.childNodes;
		return rows;
	}

	// delete selected row
	this.delete_selected_rows = function() {

		var row_id;
		for (row_id in this.selected_rows) {
			// switch current cell in default mode if it is in edit on and
			// belongs to the row to be deleted
			if (SmartCells.active_cell &&
				SmartCells.active_cell.params['row_id'] == row_id) {
				SmartCells.active_cell.cancel_edit();
			}

			var row_obj = document.getElementById(row_id);

			if (this.frozen_grid) {
				var frozen_row_obj = this.get_frozen_row_analog(row_obj);
			}


			if (!this.common_grid &&
				(!this.dynamic_loading ||
				this.dl_is_row_smart(this.dl_get_row_index(row_id))) ) {

				// delete Smart cells of the row (from frozen grid also)
				var col_len = this.columns.length;
				var j;
				for (j=0; j<col_len; j++) {
					// these columns are frozen
					if (this.frozen_col_num && j < this.frozen_col_num) {
						var cur_cell = frozen_row_obj.cells[j];
					} else {
						var cur_cell = row_obj.cells[j-this.frozen_col_num];
					}

					var sc = SmartCells.get_cell(cur_cell);
					SmartCells.delete_smart_cell(sc);
				}

			}

			// will work for common grid only as frozen is non dynamic anyway
			if (this.dynamic_loading) {
				var row_index = this.dl_get_row_index(row_id);

				// delete the appropriate element from this.rows
				var i;
				var new_rows = new Array();
				for (i in this.rows) {
					if (i == row_index) continue;

					if (parseInt(i) > parseInt(row_index)) {
						new_rows[i-1] = this.rows[i];
					} else {
						new_rows[i] = this.rows[i];
					}
				}

				this.rows = new_rows;
				// page size changed also
				this.real_page_size--;
			}

			row_obj.parentNode.removeChild(row_obj);
		}

		// clear array of selected rows
		this.selected_rows = new Array();

		this.last_selected_row_id = null;

		// after we deleted rows selected some spacers follow one after other
		// so, join such spacers
		if (this.dynamic_loading ||
				this.common_grid && this.common_grid.dynamic_loading) {
			this.dl_join_spacers();
		}

		// delete selected rows from frozen grid
		if (this.frozen_grid) {
			this.frozen_grid.delete_selected_rows();
		}
	}

	// add rows from an xml document
	this.add_xml_rows = function(xml_data, dl_start_with) {
//clear();
//show_val('Old height: ' + this.content_div.scrollHeight);
/*
if (this.frozen_grid) {
show_val('Frozen Old height: ' + this.frozen_grid.content_div.scrollHeight);
}
*/
		if (this.dl_adding_rows) return;
		this.dl_adding_rows = true;


		var prev_row; // row added last time

		if (typeof(dl_start_with) == 'undefined') {
			dl_start_with = 0;
		}

		if (this.dynamic_loading && this.rows.length == 0) {
			var first_load = true;
		} else {
			var first_load = false;
		}

		try {
			var dom_parser = new DOMParser();
			var xml_doc = dom_parser.parseFromString(xml_data, "text/xml");
			var root_node = xml_doc.documentElement;
//			alert(root_node.tagName);
		} catch(e) {

			var xml_doc = new ActiveXObject("Microsoft.XMLDOM");
			xml_doc.async = false;
			xml_doc.loadXML(xml_data);

			if (xml_doc.parseError.errorCode) {
				alert(xml_doc.parseError.reason);
			} else {
				var root_node = xml_doc.childNodes[0].tagName?xml_doc.childNodes[0]:xml_doc.childNodes[1];
//				alert(root_node.tagName);
			}

		}

		// dl specific vars
		// index of the first row not created yet
		var start_with = -1;
		// number of rows to create
		var rows_num = 0;
		// flag to know that we found all rows to create
		var stop_row_search = false;


		// prepare an array for add_data_rows
		var children = root_node.childNodes;
		var child_len = children.length;

		// rows
		var i;
		// number of actually loaded rows
		var rows_loaded = 0;
		for (i=0; i<child_len; i++) {

			if (children[i].nodeType != 1) continue;

			// cells
			var cells = children[i].childNodes;
			var cells_len = cells.length;

			var j;
			var row_data = new Array();
			var k = 0;
			for (j=0; j<cells_len; j++) {
				if (cells[j].nodeType != 1) continue;

				row_data[k] = cells[j].firstChild?cells[j].firstChild.data:'';
				k++;
			}

			var id = Number(children[i].getAttribute('id'));

			if (!this.dynamic_loading) {
				this.add_row(id, row_data);
			} else {
				// number of the current row in grid
				var row_index = parseInt(dl_start_with)+rows_loaded;

				// row is loaded yet
				if (this.rows[row_index]) {
					continue;
				}

				// store row data in cache
				this.rows[row_index] = new Array();
				this.rows[row_index]['id'] = id;
				this.rows[row_index]['data'] = row_data;


				var row_exists = this.dl_is_row_exists(row_index);
				if (start_with < 0 && !row_exists) {
					start_with = row_index;
				}

				if (start_with >= 0 && !stop_row_search) {
					if (!row_exists) rows_num++;
						else stop_row_search = true;
				}

			}

			rows_loaded++;
		}


		// add spacer / change existing spacer
		if (this.dynamic_loading && rows_loaded) {

			var real_page_size = root_node.getAttribute('realpagesize');
			if (real_page_size) {
				if (!this.real_page_size) {
					this.real_page_size = real_page_size;
				}
			} else {
				this.real_page_size = this.page_size;
			}


			// store current scroll pos to restore it later
			var scroll_pos = this.content_div.scrollTop;

			// get index of the nearest prev data row
			var prev_row_index = this.dl_get_prev_row_index(start_with);
			var next_row_index = this.dl_get_next_row_index(start_with);

			// there are some rows loaded yet above
			if (prev_row_index >= 0) {
				var prev_row_obj = this.dl_is_row_exists(prev_row_index);

//var rows = this.get_rows();
//var rows_len = rows.length;
//for (var t=0; t<rows_len; t++) alert(t + ' => ' + rows[t].getAttribute('id'));
//alert(rows[rows_len-2].getAttribute('id') + ' |=> ' + rows[rows_len-2].nextSibling.getAttribute('id'));
				// as we insert rows after then next row is a spacer
//alert(prev_row_obj + ' => ' + prev_row_obj.getAttribute('id'));
				var spacer_obj = prev_row_obj.nextSibling;

//alert(spacer_obj + ' => ' + spacer_obj.getAttribute('id'));
//alert('Start = ' + start_with + ' | Prev = ' + prev_row_index);
//show_val('Start = ' + start_with + ' | Prev = ' + prev_row_index);
				var spacer_rows_num = start_with - prev_row_index - 1;

				// get frozen row and spacer
				if (this.frozen_grid) {
					var frozen_prev_row_obj = this.get_frozen_row_analog(prev_row_obj);
					var frozen_spacer_obj = frozen_prev_row_obj.nextSibling;
				}

//show_val('Rows above: ' + spacer_rows_num);
				if (spacer_rows_num > 0) {
					this.dl_change_spacer(spacer_obj, spacer_rows_num);
					prev_row = spacer_obj;

					// change frozen spacer
					if (this.frozen_grid) {
						this.frozen_grid.dl_change_spacer(frozen_spacer_obj, spacer_rows_num);
					}

//show_val('Add after spacer');
				} else {
					spacer_obj.parentNode.removeChild(spacer_obj);
					prev_row = prev_row_obj;

					// remove frozen spacer
					if (this.frozen_grid) {
						frozen_spacer_obj.parentNode.removeChild(frozen_spacer_obj);
					}
				}
			}

			// create rows
			for (i=start_with; i<start_with+rows_num; i++) {

if (prev_row && this.frozen_grid) {
//show_val('Add after new row: ' + prev_row.id + ' => ' + this.get_frozen_row_analog(prev_row).id);
//show_val('Row_id_index = ' + this.get_row_index(prev_row.id));
//show_val('Frozen_row_id_index = ' + this.frozen_grid.get_row_index(this.get_frozen_row_analog(prev_row).id));
}
				prev_row = this.add_row(this.rows[i]['id'],
										this.rows[i]['data'], prev_row);

			}


			// get lastly added frozen row
			if (this.frozen_grid) {
				var frozen_prev_row = this.get_frozen_row_analog(prev_row);
			}


			// there are some rows loaded yet below
			if (next_row_index >= 0) {
				var spacer_rows_num = next_row_index - start_with - rows_loaded;
			} else {
				// add a spacer if there are some rows not loaded below
				var spacer_rows_num = this.real_page_size - start_with - rows_loaded;
			}

			if (spacer_rows_num > 0) {
				var new_spacer = this.dl_add_spacer(prev_row, spacer_rows_num);

				if (this.frozen_grid) {
					this.frozen_grid.dl_add_spacer(frozen_prev_row,
						spacer_rows_num,
						this.get_frozen_prefix()+new_spacer.getAttribute('id'));
				}
			}

/*
			// there are some rows loaded yet below
			if (next_row_index >= 0) {
				var spacer_rows_num = next_row_index - start_with - rows_loaded;
//alert('Rows below: ' + spacer_rows_num);
//show_val('Rows below: ' + spacer_rows_num);
				if (spacer_rows_num > 0) {
					this.dl_add_spacer(prev_row, spacer_rows_num);

					if (this.frozen_grid) {
						this.frozen_grid.dl_add_spacer(frozen_prev_row, spacer_rows_num);
					}
				}
			} else {
				// add a spacer if there are some rows not loaded below
				var spacer_rows_num = this.real_page_size - start_with - rows_loaded;
//alert('!!!!Rows below: ' + spacer_rows_num);
//show_val('!!!!Rows below: ' + spacer_rows_num);
				if (spacer_rows_num) {
					this.dl_add_spacer(prev_row, spacer_rows_num);

					if (this.frozen_grid) {
						this.frozen_grid.dl_add_spacer(frozen_prev_row, spacer_rows_num);
					}
				}
			}
*/

//show_val('New height: ' + this.content_div.scrollHeight);
/*
if (this.frozen_grid) {
show_val('Frozen New height: ' + this.frozen_grid.content_div.scrollHeight);
}
*/

			this.content_div.scrollTop = scroll_pos;

			if (this.frozen_grid) {
				this.frozen_grid.content_div.scrollTop = scroll_pos;
			}

			// first load => need only one spacer after rows created
			// if part of them loaded only
			if (first_load && this.real_page_size > rows_loaded && prev_row) {
//				this.dl_add_spacer(prev_row, this.real_page_size - rows_loaded);
			}

			// make visible rows smart and invisible - common ones
			this.dl_resmart_rows();
		}


		this.dl_adding_rows = false;


		if (!this.dynamic_loading || first_load) {

			// Opera spoils cell widths when change pages - sucs browser!!!
			// switching a cell to edit mode and back fixes this - ugly solution!
			if (this.page_mode && navigator.userAgent.indexOf('Opera') >= 0) {
				var rows = this.get_rows();
				var sc = SmartCells.get_cell(rows[0].cells[0]);
				sc.edit();
				sc.cancel_edit();
//			sc.save();

				// do the same for frozen grid
				if (this.frozen_grid) {
					var sc = SmartCells.get_cell(this.get_frozen_row_analog(rows[0]).cells[0]);
					sc.edit();
					sc.cancel_edit();
				}
			}

		}


		// update paging div if page mode on
		if (this.page_mode) {
			var current_page = root_node.getAttribute('page');
			var page_size = root_node.getAttribute('pagesize');
			var total_pages = root_node.getAttribute('totalpages');

			this.update_paging(current_page, page_size, total_pages);
		}