smart_grid_lib.js

Here is the DHTML tree example with full source code

	}


	// load xml data and add rows to grid
	// dl_start_with - number of row to read data with
	// dl_size - numer of rows to read
	this.load_xml = function(url, dl_start_with, dl_size) {

		// store grid object
		var grid_obj = this;

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

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

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

					if (status != 'ok') {
						// restore old value
						alert(status);
					} else {
//alert(req.responseJS.xml_data);
						grid_obj.add_xml_rows(req.responseJS.xml_data,
											dl_start_with);
					}

				}

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

		var query_params = {};


		// send current page number and page size
		if (this.page_mode) {
			query_params.page = this.current_page;
			query_params.page_size = this.page_size;
			query_params.real_page_size = this.real_page_size;
		}


		// dynamic loading mode
		if (this.dynamic_loading) {
			query_params.dl_start_with = parseInt(dl_start_with);

			var size = parseInt(dl_size);
			var dl_size = parseInt(this.page_size)?Math.min(this.page_size, this.dynamic_loading_size):this.dynamic_loading_size;
			query_params.dl_size = size?size:dl_size;
		}


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

	}


	// show paging div
	this.show_paging = function() {
		var i;

		this.paging_div = document.createElement("DIV");
		this.paging_div.style.width = this.obj.style.width;
		this.paging_div.className = "sg_paging_div";

		// paging elements

		// span elements
		this.paging_start_page = document.createElement('A')
		this.paging_start_page.innerHTML = '|<';
		this.paging_start_page.setAttribute('href', '#');
		this.paging_start_page.onclick = new Function("e", "this.grid._change_page(e||window.event, 'first'); return false;");

		this.paging_div.appendChild(this.paging_start_page);

		var space_node = document.createElement('SPAN');
		space_node.innerHTML = ' &nbsp';
		this.paging_div.appendChild(space_node);

		this.paging_prev_page = document.createElement('A')
		this.paging_prev_page.innerHTML = '<<';
		this.paging_prev_page.setAttribute('href', '#');
		this.paging_prev_page.onclick = new Function("e", "this.grid._change_page(e||window.event, 'prev'); return false;");

		this.paging_div.appendChild(this.paging_prev_page);

		var space_node = document.createElement('SPAN');
		space_node.innerHTML = ' &nbsp';
		this.paging_div.appendChild(space_node);

		this.paging_next_page = document.createElement('A')
		this.paging_next_page.innerHTML = '>>';
		this.paging_next_page.setAttribute('href', '#');
		this.paging_next_page.onclick = new Function("e", "this.grid._change_page(e||window.event, 'next'); return false;");

		this.paging_div.appendChild(this.paging_next_page);

		var space_node = document.createElement('SPAN');
		space_node.innerHTML = ' &nbsp';
		this.paging_div.appendChild(space_node);

		this.paging_last_page = document.createElement('A')
		this.paging_last_page.innerHTML = '>|';
		this.paging_last_page.setAttribute('href', '#');
		this.paging_last_page.onclick = new Function("e", "this.grid._change_page(e||window.event, 'last'); return false;");

		this.paging_div.appendChild(this.paging_last_page);

		var space_node = document.createElement('SPAN');
		space_node.innerHTML = ' &nbsp';
		this.paging_div.appendChild(space_node);
		// span elements


		this.paging_current_page = document.createElement('SELECT');
		this.paging_current_page.className = 'sg_paging_current_page';
		this.paging_current_page.onchange = new Function("e", "this.grid._change_page(e||window.event, 'current'); return false;");

/*
		for (i=0; i<this.total_pages; i++){
			var option = document.createElement("option");
			option.value = i;
			option.text = i;

			if (document.all) {
				this.paging_current_page.add(option);
			} else {
				this.paging_current_page.appendChild(option);
			}
		}
		this.paging_current_page.value = this.current_page;
*/

		this.paging_div.appendChild(this.paging_current_page);


		var space_node = document.createElement('SPAN');
		space_node.innerHTML = '&nbsp;&nbsp';
		this.paging_div.appendChild(space_node);


		this.paging_page_size = document.createElement('SELECT');
		this.paging_page_size.className = 'sg_paging_page_size';
		this.paging_page_size.onchange = new Function("e", "this.grid.change_pagesize(e||window.event); return false;");

		for (i in this.page_sizes) {
			var option = document.createElement("option");
			option.value = this.page_sizes[i];
			if (this.page_sizes[i] == 0) {
				option.text = this.get_text_data('all_rows');
			} else {
				option.text = this.get_text_data('rows_per_page') + ' - ' + this.page_sizes[i];
			}

			if (document.all) {
				this.paging_page_size.add(option);
			} else {
				this.paging_page_size.appendChild(option);
			}
		}

		this.paging_div.appendChild(this.paging_page_size);


		// insert paging div
		if (this.obj.nextSibling) {
			this.obj.parentNode.insertBefore(this.paging_div, this.obj.nextSibling);
		} else {
			this.obj.parentNode.appendChild(this.obj.paging_div);
		}


		// store grid object in sub-objects
		this.paging_start_page.grid = this;
		this.paging_prev_page.grid = this;
		this.paging_next_page.grid = this;
		this.paging_last_page.grid = this;
		this.paging_current_page.grid = this;
		this.paging_page_size.grid = this;


	}


	// parse navigation buttons clicks
	this._change_page = function(e, page){

		switch (page) {
			case 'first':
				current_page = 0;
				break;
			case 'prev':
				current_page = this.current_page-1;
				break;
			case 'last':
				current_page = this.total_pages-1;
				break;
			case 'next':
				current_page = parseInt(this.current_page)+1;
				break;
			case 'current':
				var obj = e.target?e.target:window.event.srcElement;
				current_page = obj.options[obj.selectedIndex].value;
				break;
			default:
				current_page = parseInt(page);
				break;
		}

		// invalid page number or this page is shown yet
		if (current_page == this.current_page ||
			current_page < 0 || current_page > this.total_pages-1) {

			return;
		}

		this.change_page(current_page);

	};


	this.change_pagesize = function(e){
		var obj = e.target?e.target:window.event.srcElement;

		this.change_page(this.current_page, obj.options[obj.selectedIndex].value);
	};


	// change page shown in grid
	this.change_page = function(page, page_size) {
		if (!this.page_mode) return;

		// exit edit mode if any cell is active
		if (SmartCells.active_cell) {
			SmartCells.active_cell.cancel_edit();
		}

		if (arguments.length < 2) page_size = this.page_size;

		// unselect selected rows if any
		this.unselect_rows();

		// delete existing rows
		this.delete_rows();

		// clear cache
		this.rows = new Array();

		// clear number of rows to be loaded
		this.real_page_size = 0;

		this.current_page = page;
		this.page_size = page_size;

		// load new page
		this.load_xml(this.data_url);

		// hide sort image and cancel sort settings
		this.sort_img.style.display = 'none';
		this.last_sorted = null;

	};


	// delete all rows from grid
	this.delete_rows = function() {
		var rows = this.get_rows();

		while (rows[0]) {
			rows[0].parentNode.removeChild(rows[0]);
		}

		// delete rows from frozen grid
		if (this.frozen_grid) this.frozen_grid.delete_rows();
	};


	// update paging
	this.update_paging = function(current_page, page_size, total_pages) {
		var i;

		// change current page list
		if (this.total_pages != total_pages) {

			// delete old options
			while(this.paging_current_page.options[0] != null){
				this.paging_current_page.options[0].parentNode.removeChild(this.paging_current_page.options[0]);
			}

			// add new list of pages
			for (i=0; i<total_pages; i++){
				var option = document.createElement("option");
				option.value = i;
				option.text = this.get_text_data('page') + ' - ' + i;

				if (document.all) {
					this.paging_current_page.add(option);
				} else {
					this.paging_current_page.appendChild(option);
				}
			}

		}
		this.paging_current_page.value = current_page;


		// select page size number
		this.paging_page_size.value = page_size;


		// make navigation links active/inactive
		if (current_page == 0)  {
			this.paging_start_page.className = 'sg_inactive';
			this.paging_prev_page.className = 'sg_inactive';
		} else {
			this.paging_start_page.className = '';
			this.paging_prev_page.className = '';
		}

		if (current_page == total_pages-1)  {
			this.paging_last_page.className = 'sg_inactive';
			this.paging_next_page.className = 'sg_inactive';
		} else {
			this.paging_last_page.className = '';
			this.paging_next_page.className = '';
		}


		this.current_page = current_page;
		this.page_size = page_size;
		this.total_pages = total_pages;


	}


	// returns text required in current language
	this.get_text_data = function(text) {
		if (!sg_lang_data[this.language]) {
			var lang = this.default_language;
		} else {
			var lang = this.language;
		}

		if (!sg_lang_data[lang]) return ''; // no data found

		return sg_lang_data[lang][text]?sg_lang_data[lang][text]:'';
	}


	// changes grid layout
	this.change_skin = function(skin) {
		if (skin != '') skin = '_' + skin;

		this.obj.className = 'sg_main_div' + skin;
		if (this.paging_div) {
			this.paging_div.className = 'sg_paging_div' + skin;
		}
		if (this.actions_div) {
			this.actions_div.className = 'sg_actions_div' + skin;
		}

	}


	// show actions div
	this.show_actions = function() {

		if (!this.actions_url) return;

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

		if (!can_add && !can_delete) return;

		this.actions_div = document.createElement("DIV");
		this.actions_div.style.width = this.obj.style.width;
		this.actions_div.className = "sg_actions_div";

		// buttons

		if (can_add) {

			// add button
			this.actions_add_button = document.createElement('INPUT')
			this.actions_add_button.setAttribute('type', 'button');
			this.actions_add_button.value = this.get_text_data('add_new_row');
			this.actions_add_button.onclick = new Function("e", "this.grid.actions_add_new_row(e||window.event); return false;");

			this.actions_div.appendChild(this.actions_add_button);

			var space_node = document.createElement('SPAN');
			space_node.innerHTML = '&nbsp;&nbsp';
			this.actions_div.appendChild(space_node);

		}

		if (can_delete) {

			// delete button
			this.actions_delete_button = document.createElement('INPUT')
			this.actions_delete_button.setAttribute('type', 'button');
			this.actions_delete_button.value = this.get_text_data('delete_selected_rows');
			this.actions_delete_button.onclick = new Function("e", "this.grid.actions_delete_selected_rows(e||window.event); return false;");

			this.actions_div.appendChild(this.actions_delete_button);

		}

		// insert the actions grid after paging one if exist
		var prev_obj = this.paging_div?this.paging_div:this.obj;

		// insert paging div
		if (prev_obj.nextSibling) {
//alert(prev_obj.className);
			prev_obj.parentNode.insertBefore(this.actions_div, prev_obj.nextSibling);
		} else {
//			prev_obj.parentNode.appendChild(this.actions_div);
		}


		// store grid object in sub-objects
		if (this.actions_add_button) this.actions_add_button.grid = this;
		if (this.actions_delete_button) this.actions_delete_button.grid = this;

	}

	// adds a new row (potential new db record)
	this.actions_add_new_row = function(event) {

		if (!this.actions_url) return;

		// do not permit to add if no permission to update
		var can_add = this.add_allowed && this.update_allowed;

		if (!can_add) return;

		// exit edit mode if any cell is active
		if (SmartCells.active_cell) {
			SmartCells.active_cell.cancel_edit();
		}

		var db_row_id = this.get_new_row_id_prefix()+(new Date().getTime());

		var new_row = this.add_row(db_row_id);

		if (smart_grid.frozen_grid) {
			var new_row = this.get_frozen_row_analog(new_row);