smart_grid_lib.js

Here is the DHTML tree example with full source code

					// find row with the same position as current in second grid
					if (this.frozen_grid) {
						var reverse = false;
					} else {
						var reverse = true;
					}
					var row_sorted2 = this.get_frozen_row_analog(rows_sorted[i], reverse);
					var row2 = this.get_frozen_row_analog(rows[i], reverse);

					row2.parentNode.insertBefore(row_sorted2, row2);
				}

				// move row on the right position
				rows[i].parentNode.insertBefore(rows_sorted[i], rows[i]);

			}
		}

		this.last_sorted = cell_index;

	};


	// moves sort image in cell cell_obj
	// returns current sort order
	this.move_sort_image = function(cell_obj) {

		this.sort_img.style.display = '';

		// move image in the upper right corner of the appropriate cell
		var cell_pos = get_obj_pos(cell_obj, this.header_div);

		this.sort_img.style.left = cell_pos[0] + cell_obj.offsetWidth - 10 + 'px';
		this.sort_img.style.top = cell_pos[1] + 2 + 'px';

	};


	var header_row = this.header_table.insertRow(0);


	// outer header table
	this.outer_header_table = document.createElement('TABLE');
	this.outer_header_table.border = 0;
	this.outer_header_table.cellSpacing = 0;
	this.outer_header_table.cellPadding = 0;

	var outer_header_row = this.outer_header_table.insertRow(0);
	var outer_header_cell = outer_header_row.insertCell(0);
	var outer_header_cell2 = outer_header_row.insertCell(1);
	outer_header_cell2.innerHTML = '      ';
	outer_header_cell2.className = 'sg_header_right_cell';


	outer_header_cell.appendChild(this.header_table);
	this.header_div.appendChild(this.outer_header_table);
	main_header_cell.appendChild(this.header_div);


	// content div
	this.content_div = document.createElement("DIV");
	this.content_div.style.width = "100%";
//	this.content_div.style.height = this.obj.style.height;
	this.content_div.style.overflow = "auto";
	this.content_div.style.position = "relative"; //!!!!
	this.content_div.className = "sg_content_div";

	var onscroll = function(e){
		var content_div = e.target?e.target:window.event.srcElement;
		var grid = content_div.grid;

		// IE fix: sometimes horizontal scrollbar is shown when not necessary
		if (content_div.offsetWidth == content_div.scrollWidth) {
			content_div.scrollLeft = 0;
		}
		grid.header_div.scrollLeft = content_div.scrollLeft;

		// scroll frozen grid if any
		if (grid.frozen_grid) {
			grid.frozen_grid.content_div.scrollTop = grid.content_div.scrollTop;
		}

		// load new data
		if (grid.dynamic_loading) {
			if (grid.dl_timer) window.clearTimeout(grid.dl_timer);
			grid.dl_timer = window.setTimeout(function(){grid.dl_load_data()}, 500);
		}

	};
	sc_attach_event(this.content_div, 'scroll', onscroll);


	// content table
	this.content_table = document.createElement('TABLE');
	this.content_table.width = '100%';
//this.content_table.border = 1;
	this.content_table.cellSpacing = 0;
	this.content_table.cellPadding = 0;
	this.content_table.className = "sg_content_table";
	this.content_table.style.overflow = "hidden";
	this.content_table.style.tableLayout = "fixed";
//	this.content_table.style.position = "relative"; //!!!!

	this.content_table.onclick = new Function("e","this.grid.row_clicked(e||window.event)");

	this.row_clicked = function(e){
		var src_obj = e.target?e.target:window.event.srcElement;
		var row_obj = get_previous_object(src_obj, 'TR');
		if (!row_obj) return;

		var row_id = row_obj.getAttribute('id');
		if (!row_id || this.is_row_new(row_id)) return;

		var mode = 0;
		if (e.ctrlKey) {
			mode = 1;
		}
		if (e.shiftKey) {
			mode = 2;
		}

		this.parse_row_clicked(row_id, mode);

		if (this.frozen_grid) {
			this.frozen_grid.parse_row_clicked(this.get_frozen_id_attribute(row_id), mode);
		}

		if (this.common_grid) {
			this.common_grid.parse_row_clicked(this.remove_frozen_prefix(row_id), mode);
		}
	};
//	sc_attach_event(this.content_table, 'click', onclick);


	this.content_div.appendChild(this.content_table);
	main_content_cell.appendChild(this.content_div);


	this.obj.appendChild(this.main_table);


	// store grid object in sub objects
	this.obj.grid = this;
	this.main_table.grid = this;
	this.header_div.grid = this;
	this.header_table.grid = this;
	this.content_div.grid = this;
	this.content_table.grid = this;


	// functions
	this.add_column = function(col_params, cell) {
		var index = this.columns.length;

		this.columns[index] = new Array();
		this.columns[index]['col_name'] = col_params['name'];
		this.columns[index]['col_width'] = col_params['width'];
		this.columns[index]['cell'] = cell;
	}


	// show grid content
	this.show = function() {
		var i;

		// add headers
		var table_width = 0;
		var col_len = this.columns.length;
		for (i=0; i<col_len; i++) {
			// do not add frozen columns to common grid
			if (this.frozen_col_num && i < this.frozen_col_num) continue;

			var new_cell = header_row.insertCell(i-this.frozen_col_num);
			new_cell.innerHTML = this.columns[i]['col_name'];
			new_cell.style.width = this.columns[i]['col_width']+'px';

			// remember cell index
			new_cell.cell_index = i - this.frozen_col_num;

			table_width += Number(this.columns[i]['col_width']);

		}


//		this.header_table.style.width = table_width+'px';


		// add content cells
		var data_len = this.data.length;
		for (i=0; i<data_len; i++) {
			var data_row = this.data[i]['data'];
			var db_row_id = this.data[i]['id'];

			this.add_row(db_row_id, data_row);
		}

		this.content_table.style.width = table_width+'px';



		// fix height of header row (must do this after all objects are appended!
//alert(this.obj.style.height + ' => ' + this.header_table.offsetHeight);
		this.content_div.style.height = parseInt(this.obj.style.height) - this.header_table.offsetHeight + 'px';
//	this.content_div.style.top = this.header_table.offsetHeight - this.header_div.offsetHeight + 'px';


		if (this.page_mode) {
			this.show_paging();
		}

		// show add and delete buttons
		if (this.show_actions) {
			this.show_actions();
		}

		if (this.data_url) {
			this.load_xml(this.data_url);
		}

	}


	// add new row
	// add after row prev_row if specified
	this.add_row = function(db_row_id, data_row, prev_row) {

		if ((this.dynamic_loading ||
		this.common_grid && this.common_grid.dynamic_loading) && prev_row) {
			var data_tr = document.createElement('TR');
			prev_row.parentNode.insertBefore(data_tr, prev_row.nextSibling);
		} else {
			if (document.all) {
				var data_tr = this.content_table.insertRow(this.content_table.rows.length);
			} else {
				var data_tr = document.createElement('TR');
				this.content_table.appendChild(data_tr);
			}
		}


//		var row_id = 'sg_row'+db_row_id;
		// frozen grid
		var row_id = this.get_id_attribute(db_row_id);

		// determine height of common grid cells so that frozen ones have the
		// same, as depending on cell types in the grids heights may differ
		if (this.common_grid) {
			var rows = this.common_grid.get_rows();
			var cell_height = rows[0].cells[0].offsetHeight + 'px';
		} else {
			var cell_height = 0;
		}

		data_tr.setAttribute('id', row_id);
		data_tr.grid = this;

		var table_width = 0;
		var col_len = this.columns.length;
		var j;
//alert(col_len + ' => ' + this.columns[0]['cell'].type);
		for (j=0; j<col_len; j++) {
			if (this.frozen_col_num && j < this.frozen_col_num) continue;

			var new_cell = data_tr.insertCell(j-this.frozen_col_num);

			if (cell_height) {
				// fix cell height
				new_cell.style.height = cell_height;
			}

			// make row cell smart
			this.do_smart_cell(new_cell, row_id, j, data_row?data_row[j]:null);
			table_width += Number(this.columns[j]['col_width']);
		}


		// add row to frozen grid
		if (this.frozen_grid) {
			var frozen_prev_row = this.get_frozen_row_analog(prev_row);

if (frozen_prev_row) {
//	show_val('PREV = ' + prev_row.id);
//	show_val('FROZEN PREV = ' + frozen_prev_row.id);
}
			this.frozen_grid.add_row(db_row_id, data_row, frozen_prev_row);
		}

/*
		var rows = this.get_rows();
		var rows_len = rows.length;
		var i;
		var last_spacer = null;
		var spacer_name = this.dl_spacer_id_prefix();
		for (i=0; i<rows_len; i++) {
			var row = rows[i];
			if (row.getAttribute('name') == spacer_name) {
show_val((this.common_grid?'Frozen ':'')+'Spacer = ' + row.id);
			}
		}
*/

		// set tab order for the row smart cells
//		if (!this.common_grid) {
			this.set_smart_row_tab_order(data_tr);
//		}

/*
		// set tab order for the row smart cells
		for (j=0; j<col_len; j++) {
			var cell_obj = data_tr.cells[j];
			var sc = SmartCells.get_cell(cell_obj);

			sc.set_tab_next_cell(data_tr.cells[(j+1)%col_len].getAttribute('id'));
		}
*/

		if (!document.all) {
//			this.content_table.appendChild(data_tr);
		}

		this.content_table.style.width = table_width+'px';

		this.header_div.scrollLeft = this.content_div.scrollLeft;

		return data_tr;
	}


	// returns value of id attribute for db row with ID = id
	this.get_id_attribute = function(db_row_id) {
		return this.get_row_id_prefix() + db_row_id;
	}


	// returns value of id attribute prefix for db row with ID = id
	this.get_row_id_prefix = function() {
		return this.obj.getAttribute('id')+'_sg_row';
	}


	// change row id (need this after a new row added to DB)
	this.change_row_id = function(row_id, new_db_row_id) {
		var i;
		var row_obj = document.getElementById(row_id);
		var new_row_id = this.get_id_attribute(new_db_row_id);

		row_obj.setAttribute('id', new_row_id);

		var row_len = row_obj.cells.length;

		for (i=0; i<row_len; i++) {
			var cell_obj = row_obj.cells[i];
			var sc = SmartCells.get_cell(cell_obj);
			sc.params['row_id'] = new_row_id;
		}

		// change selection entry corresponding to the row
		if (this.selected_rows[row_id]) {
			this.selected_rows[row_id] = false;
			this.selected_rows[new_row_id] = true;
		}


		return new_row_id;
	}

	// add data row
	this.add_data_row = function(id, row, index) {
		if (typeof(index) == 'undefined') {
			var index = this.data.length;
		}
		this.data[index] = new Array();
		this.data[index]['id'] = id;
		this.data[index]['data'] = row;
	}


	// add data rows
	this.add_data_rows = function(rows) {
		var i;
		for (i in rows) {
			this.add_data_row(i, rows[i]);
		}
	}

	// parse row click to change row selection
	this.parse_row_clicked = function(row_id, mode) {

		switch (mode) {
			// simple click
			case 0:
				this.unselect_rows();

				// select if data of this row is loaded yet
				if (!this.is_smart_row(row_id)) break;

				this.select_row(row_id);
				this.last_selected_row_id = row_id;
				break;
			// Ctrl+click
			case 1:
				// select if data of this row is loaded yet
				if (!this.is_smart_row(row_id)) break;

				if (this.selected_rows[row_id]) {
					this.unselect_row(row_id);
				} else {
					this.select_row(row_id);
				}
				this.last_selected_row_id = row_id;
				break;
			// Shft+click
			case 2:
				var src_index = this.get_row_index(this.last_selected_row_id);
				var dest_index = this.get_row_index(row_id);

				if (src_index >= 0) {
					// unselect_rows() erase this.last_selcted_row_id
					var last_selected = this.last_selected_row_id;
					this.unselect_rows();
					this.select_row(last_selected);
					this.last_selected_row_id = last_selected;
				}

				// just leave this one row selected
				if (src_index < 0 || src_index == dest_index) {
					// select if data of this row is loaded yet
					if (this.is_smart_row(row_id)) {
						this.select_row(row_id);

						// no row is selected yet
						if (src_index < 0) {
							this.last_selected_row_id = row_id;
						}
					}

				} else {

					if (src_index < dest_index) {
						var start_index = src_index;
						var end_index = dest_index;
					} else {
						var start_index = dest_index;
						var end_index = src_index;
					}

/*
					var rows = this.content_table.rows;
					var rows_len = rows.length;
*/

					var rows = this.get_rows();
					var rows_len = rows.length;
    
					var i;
					for (i=start_index; i<=end_index; i++) {
						var cur_row_id = rows[i].getAttribute('id');
						// select if data of this row is loaded yet
						if (this.is_smart_row(cur_row_id)) {
							this.select_row(cur_row_id);
						}