smart_grid_lib.js

Here is the DHTML tree example with full source code

		}

		// scroll to the very bottom of the grid
		this.content_div.scrollTop = this.content_div.scrollHeight;
		if (this.frozen_grid) {
			this.frozen_grid.content_div.scrollTop = this.content_div.scrollTop;
		}

		// switch first cell in edit mode
		var cell_obj = new_row.cells[0];
		if (!cell_obj) return;
		var sc = SmartCells.get_cell(cell_obj);

		if (SmartCells.active_cell) SmartCells.active_cell.save();
		// set current active cell
		SmartCells.active_cell = sc;
		sc.edit();

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

		event.cancelBubble = true;

		return false;
	}

	// delete selected rows (from db and grid)
	this.actions_delete_selected_rows = function() {

		if (!this.actions_url) return;

		// do not permit to add if no permission to update
		var can_delete = this.delete_allowed;

		if (!can_delete) return;

		var row_id;
		var row_id_list = '';
		for (row_id in this.selected_rows) {
			if (row_id_list != '') row_id_list += '|';
			var row_tr = document.getElementById(row_id);
			if (row_tr) row_id_list += String(row_id).replace(this.get_row_id_prefix(), '');

			// switch current cell in default mode if it is in edit one 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();
			}

		}

		// no rows selected
		if (row_id_list == '') return;

		var grid = this;

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

		// code executed automatically on loading completed
		req.onreadystatechange = function() {

			if (req.readyState == 4) {
				if (req.responseJS) {
					var status = req.responseJS.status;

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

						grid.delete_selected_rows();

						// redraw current page
						if (smart_grid.page_mode && grid.page_size > 0) {
							grid.change_page(grid.current_page);
						}

					}

				}

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

		var query_params = {};

		// submit cell params
		for (i=0; i<this.columns.length; i++) {
			var column = this.columns[i]['cell'];

			if (column.type == 'image') {
				query_params['folder'+i] = column.folder;
			}

		}

		// Enable caching
		req.caching = false;
		// Prepare object
		req.open('POST', this.actions_url+'?action=delete&row_id_list='+row_id_list, true);
		// Send query data
		req.send(query_params);
	}

	// called on save cell event and saves cell's row
	// called as method of a Smart Cell!
	this.on_save_cell = function() {

		var sc_obj = this;
		var grid = this.obj.grid;
		if (grid.common_grid) grid = grid.common_grid;

		if (!grid.actions_url) return;

		// do not permit to add if no permission to update
		var can_update = grid.update_allowed;

		if (!can_update) {
			this.cancel_edit();
			return;
		}


		var row_id = this.params['row_id'];
		if (grid.remove_frozen_prefix) row_id = grid.remove_frozen_prefix(row_id);

		if (!grid.is_row_new(row_id)) {
			var action = '';
		} else {
			var action = '?action=add';
		}


		var old_value = this.value;
		var new_value = sc_obj.get_current_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
						// non db field cells update data with some delay
						// (eg after uploading => they must call this function
						// themselves when finish uploading
						if (sc_obj.params['db_field'] == '') {
							sc_obj.post_modify_func = new Function();
						} else {
							sc_obj.post_modify_func();
						}

						var new_db_row_id = req.responseJS.new_row_id;
						// just added a new row successfully => set valid row id
						if (new_db_row_id) {
							var new_row_id = grid.change_row_id(row_id, new_db_row_id);

							// update id of the appropriate frozen row
							if (smart_grid.frozen_grid) {
								var frozen_row_id = grid.get_frozen_id_attribute(row_id);
								var frozen_new_row_id = grid.frozen_grid.change_row_id(frozen_row_id, new_db_row_id);
							}

							if (grid.page_mode && grid.page_size > 0) {
								// redraw current page instantly for db field cells
								// only, non db field cells will redraw it themselves
								// after uploading is finished
								if (sc_obj.params['db_field'] == '') {
									// Ajax.js trows an exception in Firefox if run
									// change_page without a delay
									sc_obj.post_modify_func = function(){setTimeout(function(){grid.change_page(grid.current_page);}, 10);};
//									sc_obj.post_modify_func = function(){setTimeout('document.getElementById("'+sc_obj.obj.id+'").grid.change_page(document.getElementById("'+sc_obj.obj.id+'").grid.current_page);', 10);};
//							sc_obj.post_modify_func = function(){smart_grid.change_page(smart_grid.current_page);};
									} else {
										grid.change_page(grid.current_page);
										return;
									}
//							smart_grid.change_page(smart_grid.current_page);
							} else {

								// some values could be set by default by DB =>
								// update all row cells if page is not redrawn
								var row_obj = document.getElementById(new_row_id);
								var row_cells = row_obj.cells;
								if (grid.frozen_grid) {
									var frozen_row_obj = document.getElementById(frozen_new_row_id);
									var frozen_row_cells = frozen_row_obj.cells;
								}
								var i;
								for (i=0; i<grid.columns.length; i++) {
									if (grid.frozen_grid &&
											i < grid.frozen_col_num) {
    
										var cur_row_cells = frozen_row_cells;
										var decr = 0;
									} else {
										var cur_row_cells = row_cells;
										var decr = grid.frozen_col_num;
									}

									var sc = SmartCells.get_cell(cur_row_cells[i-decr]);

									if (sc.obj.id == sc_obj.id ||
										sc.params['db_field'] == '') {
    
										continue;
									}

//alert(eval('req.responseJS.cell_value'+i));
									var cell_index = i;
									sc.set_value(eval('req.responseJS.cell_value'+cell_index));
									sc.show_value();
								}
    
							}

						} else {
							// some values could be changed by DB, eg dates
							if (sc_obj.params['db_field'] != '') {
								value = eval('req.responseJS.cell_value'+(sc_obj.obj.cell_index+sc_obj.obj.grid.frozen_col_num));
							}
						}

//alert(eval('req.responseJS.cell_value'+sc_obj.obj.cell_index));
						// for cells that do not correspond to db table fields
						// (eg images) run _save method anyway
						if (sc_obj.params['db_field'] == '') {
							if (new_db_row_id) {
								value = new_db_row_id;
								sc_obj.set_value(value);
							}
							sc_obj._save();
						}
    
					}
    
				}

				// update cell content
				if (sc_obj.params['db_field'] != '') {
					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];
		}


		var row_obj = document.getElementById(row_id);
		var row_cells = row_obj.cells;

		if (grid.frozen_grid) {
			var frozen_row_id = grid.get_frozen_id_attribute(row_id);
			var frozen_row_obj = document.getElementById(frozen_row_id);
			var frozen_row_cells = frozen_row_obj.cells;
		}

		for (i=0; i<grid.columns.length; i++) {
			if (grid.frozen_grid &&
				i < grid.frozen_col_num) {
    
				var cur_row_cells = frozen_row_cells;
				var decr = 0;
			} else {
				var cur_row_cells = row_cells;
				var decr = grid.frozen_col_num;
			}
			var cell_obj = cur_row_cells[i-decr];
			var sc = SmartCells.get_cell(cell_obj);
//alert(sc.get_current_value());
			query_params[sc.params['db_field']] = sc.get_current_value();
//alert(sc.params['db_field']);
		}

		var row_tr = document.getElementById(row_id);
		query_params['row_id'] = String(row_id).replace(row_tr.grid.get_row_id_prefix(), '');

		// Enable caching
		req.caching = false;
		// Prepare object
		req.open('POST', grid.actions_url+action, true);
//alert(grid.actions_url+action);
		// Send query data
		req.send(query_params);

	}


	// returns prefix used for new row id
	this.get_new_row_id_prefix = function() {
		return 'sg_new_row';
	}


	// return true if row is new (not saved yet)
	this.is_row_new = function(row_id) {
		var re = new RegExp(this.get_new_row_id_prefix(), '');
		return re.test(row_id);
	}


	// make a cell Smart
	this.do_smart_cell = function(cell_obj, row_id, col_num, cell_data) {

		// make frozen row id differ from the appropriate row of the common grid
		if (this.common_grid) {
			var cell_row_id = this.get_frozen_id_attribute(row_id);
		} else {
			var cell_row_id = row_id;
		}

		cell_obj.setAttribute('id', 'sg_cell'+cell_row_id+'_'+col_num);
		cell_obj.style.width = this.columns[col_num]['col_width']+'px';
		cell_obj.cell_index = col_num - this.frozen_col_num;
		cell_obj.grid = this;


		var sc = this.columns[col_num]['cell'].clone();


		sc.obj = cell_obj;
		if (cell_data) {
			sc.set_value(cell_data);
		} else {
			sc.set_value(sc.default_value);
		}

		// always store id of common grid row
		sc.params['row_id'] = row_id;

		if (this.common_grid) {
			sc.user_save = this.common_grid.on_save_cell;
		} else {
			sc.user_save = this.on_save_cell;
		}

		// do not save anything on Tab key pressed to allow to modify all
		// cells before saving the whole row
		sc.save_on_tab = false;

		// for image cells set initial max size
		if (sc.type == 'image') {
			sc.default_max_size[0] = this.columns[col_num]['col_width'];
			if (this.row_height) sc.default_max_size[1] = this.row_height;
		}

		sc.show_value();
		SmartCells.add_smart_cell(sc);

	}


	// set tab order for the row smart cells
	this.set_smart_row_tab_order = function(data_tr) {
		var j;
		var col_len = data_tr.cells.length;

		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'));
		}

		// change tab order for last cells in common and frozen grids
		// so that the both of the grids are connected
		if (this.frozen_grid) {
			var frozen_data_tr = this.get_frozen_row_analog(data_tr);
//clear();
//show_val('frozen_data_tr' + frozen_data_tr);
			var frozen_col_len = frozen_data_tr.cells.length;

			var first_cell = data_tr.cells[0];
			var frozen_first_cell = frozen_data_tr.cells[0];
			var last_cell = data_tr.cells[col_len-1];
			var frozen_last_cell = frozen_data_tr.cells[frozen_col_len-1];

			var sc = SmartCells.get_cell(last_cell);
			sc.set_tab_next_cell(frozen_first_cell.getAttribute('id'));
			var sc = SmartCells.get_cell(frozen_last_cell);
			sc.set_tab_next_cell(first_cell.getAttribute('id'));
		}
	}

	// check if row is smart one (not a not-saved new row or a spacer)
	this.is_smart_row = function(row_id) {
		var re = new RegExp(this.get_row_id_prefix(), '');
		return re.test(row_id);
	}

}

// clone object obj
function clone(obj) {
	if (typeof(obj) != 'object') {
		return obj;
	}

	if(obj == null) return obj;

	if (obj instanceof Array) {
		var new_obj = new Array();
	} else {
		var new_obj = new Object();
	}

	for (var i in obj) {
//alert(i + ' => ' + typeof(obj[i]));
		new_obj[i] = clone(obj[i]);
	}

	return new_obj;
}

// Smart Grid lang data

var sg_lang_data = new Array();

	sg_lang_data['en'] = {
'page' : 'Page',
'rows_per_page' : 'Rows per page',
'all_rows' : 'All rows',
'dynamic_loading' : 'Cannot sort if dynamic loading on!',
'add_new_row' : 'add new row',
'delete_selected_rows' : 'delete selected rows'
	};

	sg_lang_data['ru'] = {
'page' : '羊疣龛鲟',
'rows_per_page' : '羊痤