zpgrid-toolbar.js

zapatec suite 最新版 20070204,非常棒的ajax widgets 工具包

 * @return Float number
 * @type number
 */
Zapatec.GridToolbar.rangeConverterFloat = function(dNumber) {
	// Set precision
	return Zapatec.Utils.setPrecision(dNumber, 2);
};

/**
 * Used to find range converter function by column data type.
 * @private
 */
Zapatec.GridToolbar.rangeConverters = {
	'date': Zapatec.GridToolbar.rangeConverterDate,
	'float': Zapatec.GridToolbar.rangeConverterFloat
};

/**
 * Shows Range or Filter Out dialog.
 *
 * @param {string} sId Id of ul element to determine dialog type
 * @param {number} iCol Zero-based column number
 */
Zapatec.GridToolbar.prototype.showDialog = function(sId, iCol) {
	// Get dialog depending on its type
	var oDialog;
	if (sId == this.config.menuRangeUl) {
		oDialog = this.dialogsRange[iCol];
	} else if (sId == this.config.menuFilterOutUl) {
		oDialog = this.dialogsFilterOut[iCol];
	}
	if (!oDialog) {
		return;
	}
	// Show dialog
	oDialog.show();
	// Initialize Slider if this is Range dialog
	if (sId == this.config.menuRangeUl) {
		// Get range
		var oRange = this.getColumnRange({column: iCol});
		if (oRange) {
			if (!this.sliders) {
				// Holds Slider objects
				this.sliders = [];
			}
			if (this.sliders[iCol]) {
				// Update Slider
				this.sliders[iCol].reset(oRange.min, oRange.max);
			} else {
				// Initialize Slider
				this.sliders[iCol] = new Zapatec.GridToolbarSlider({
					div: this.config.dialogRange + iCol + 'Slider', 
					length: 200,
					dual: true, 
					orientation: 'H',
					step: (oRange.max - oRange.min) / 200,
					range: [oRange.min, oRange.max],
					// Bind slider to the grid column
					grid: this,
					gridColumn: iCol,
					// Bind range container div to the slider
					rangeContainer: this.config.dialogRange + iCol + 'Range',
					// Bind range conversion callback to the slider
					rangeConverter: Zapatec.GridToolbar.rangeConverters[
					 this.getFieldType(this.getFieldById(iCol))],
					// Add some event listeners
					eventListeners: {
						'onChange': Zapatec.GridToolbarSlider.onChange,
						'newPosition': Zapatec.GridToolbarSlider.newPosition
					}
				});
			}
		}
	}
};

/**
 * Sorts the grid by several columns.
 */
Zapatec.GridToolbar.prototype.multiSort = function() {
	// Hide dialog window
	this.hideDialogSort();
	// Sorted flag
	var bSorted = false;
	// Form argument for sort
	var aArg = [];
	for (var iSel = 1; iSel <= 3; iSel++) {
		var oSelect = document.getElementById(this.config.dialogSort + 'Column' +
		 iSel);
		if (!oSelect) {
			continue;
		}
		var iCol = oSelect[oSelect.selectedIndex].value;
		if (iCol >= 0) {
			var oDesc = document.getElementById(this.config.dialogSort + 'Column' +
			 iSel + 'Desc');
			if (!oDesc) {
				continue;
			}
			aArg.push({
				column: iCol,
				desc: oDesc.checked
			});
		}
	}
	// Sort and refresh grid
	if (aArg.length) {
		this.sort(aArg);
		this.refresh();
	}
};

/**
 * Goes to the first row.
 */
Zapatec.GridToolbar.prototype.goToFirstRow = function() {
	Zapatec.Grid.firstPage(this.getId());
};

/**
 * Goes to the last row.
 */
Zapatec.GridToolbar.prototype.goToLastRow = function() {
	Zapatec.Grid.lastPage(this.getId());
};

/**
 * Goes to the specified row.
 *
 * @param {number} iRow Row number (starting from 1)
 */
Zapatec.GridToolbar.prototype.goToRowNumber = function(iRow) {
	// Check row number
	iRow *= 1;
	if (isNaN(iRow)) {
		alert(this.getMessage('errorInvalidInput'));
		return;
	}
	// Hide dialog window
	this.hideDialogGoToRow();
	// Grid counts rows starting from 0
	iRow--;
	// Get total row number
	var iTotalRows = this.recordsDisplayed();
	// Get total page number
	var iTotalPages = this.totalPages();
	// Calculate page number
	var iPage;
	if (iRow >= iTotalRows) {
		iPage = iTotalPages - 1;
	} else {
		iPage = Math.floor(iRow / this.config.rowsPerPage);
	}
	// Go to the page
	this.gotoPage(iPage);
};

/**
 * Searches grid.
 *
 * @param {string} sPattern Search pattern
 * @param {boolean} bRegExp Use regular expression
 */
Zapatec.GridToolbar.prototype.searchColumns = function(sPattern, bRegExp) {
	// Hide dialog window
	this.hideDialogSearch();
	// Check state of each checkbox
	var iCheckbox = 0;
	var oCheckbox;
	var aChecked = [];
	while (oCheckbox = document.getElementById(this.config.dialogSearch +
	 'Checkboxes' + iCheckbox)) {
		if (oCheckbox.checked) {
			aChecked.push(iCheckbox);
		}
		iCheckbox++;
	}
	// Clear previous search
	this.setFilter({
		regexp: '',
		text: ''
	});
	// Search grid
	if (bRegExp) {
		this.setFilter({
			regexp: sPattern,
			columns: aChecked
		});
	} else {
		this.setFilter({
			text: sPattern,
			columns: aChecked
		});
	}
};

/**
 * Shows or hides grid columns.
 */
Zapatec.GridToolbar.prototype.showHideColumns = function() {
	// Hide dialog window
	this.hideDialogShow();
	// Check state of each checkbox
	var iCheckbox = 0;
	var oCheckbox;
	while (oCheckbox = document.getElementById(this.config.dialogShow +
	 'Checkboxes' + iCheckbox)) {
		if (oCheckbox.checked) {
			// Show column
			this.showColumns({
				// Columns to show
				columns: [iCheckbox],
				// Do not show changes immediatly
				noRefresh: true
			});
		} else {
			// Hide column
			this.hideColumns({
				// Columns to hide
				columns: [iCheckbox],
				// Do not show changes immediatly
				noRefresh: true
			});
		}
		iCheckbox++;
	}
	// Show changes
	this.refresh();
};

/**
 * Removes all filters from the grid.
 */
Zapatec.GridToolbar.prototype.resetControls = function() {
	// Unhide all columns
	var iCols = this.getFields().length;
	var aCols = [];
	for (var iCol = 0; iCol < iCols; iCol++) {
		aCols.push(iCol);
	}
	this.showColumns({
		columns: aCols,
		noRefresh: true
	});
	// Reset all sliders
	for (var iWidget = 0; iWidget < Zapatec.Widget.all.length; iWidget++) {
		var oWidget = Zapatec.Widget.all[iWidget];
		if (oWidget.constructor == Zapatec.Slider) {
			oWidget.setPos(oWidget.config.range[0], oWidget.config.range[1]);
		}
	}
	// Reset all filters
	this.resetFilters();
};

/**
 * Checks or unchecks checkbox set.
 *
 * @private
 * @param {string} sId Common part of id for all checkboxes
 * @param {boolean} bChecked Check all if true, uncheck otherwise
 */
Zapatec.GridToolbar.checkAll = function(sId, bChecked) {
	var iCheckbox = 0;
	var oCheckbox;
	while (oCheckbox = document.getElementById(sId + iCheckbox)) {
		oCheckbox.checked = bChecked;
		iCheckbox++;
	}
};

/**
 * Checks or unchecks "All" checkbox.
 *
 * @private
 * @param {string} sId Common part of id for all checkboxes
 * @param {boolean} bChecked Check all if true, uncheck otherwise
 */
Zapatec.GridToolbar.setAllCheckbox = function(sId, bChecked) {
	document.getElementById(sId + 'All').checked = bChecked;
};

/**
 * Customized Menu for Grid Toolbar.
 *
 * <pre>
 * <strong>Adds following config options:</strong>
 *
 * <b>grid</b> [object] Reference to the Grid object.
 * </pre>
 *
 * @constructor
 * @extends Zapatec.Menu
 * @param {object} oArg User configuration
 */
Zapatec.GridToolbarMenu = function(oArg) {
	// Call constructor of superclass
	Zapatec.GridToolbarMenu.SUPERconstructor.call(this, oArg);
};

// Inherit Menu
Zapatec.inherit(Zapatec.GridToolbarMenu, Zapatec.Menu, {keepPath: true});

/**
 * Configures the widget. Gets called from init and reconfigure methods of
 * superclass.
 *
 * @private
 * @param {object} oArg User configuration
 */
Zapatec.GridToolbarMenu.prototype.configure = function(oArg) {
	// Define new config options
	this.defineConfigOption('grid');
	// Call parent method
	Zapatec.GridToolbarMenu.SUPERclass.configure.call(this, oArg);
};

/**
 * Sets initial position of dialog windows after menu is shown.
 *
 * @private
 * @param {number} iLeft Optional. Left position of trigger menu
 * @param {number} iTop Optional. Top position of trigger menu
 */
Zapatec.GridToolbarMenu.prototype.showMenu = function() {
	// Call parent init
	Zapatec.GridToolbarMenu.SUPERclass.showMenu.apply(this, arguments);
	// Resize menu
	this.fitIntoContainer();
	// Check configuration
	if (!this.config.grid) {
		return;
	}
	// Get top menu element
	var oMenuTop = this.top_parent;
	// Calculate menu border height
	var iBorderHeight = oMenuTop.offsetHeight - oMenuTop.clientHeight;
	// Get menu container absolute position and dimensions
	var oMenuOffset = Zapatec.Utils.getElementOffset(oMenuTop);
	// Calculate left position
	var iLeft = oMenuOffset.left;
	// Calculate top position
	var iTop = oMenuOffset.top + oMenuTop.offsetHeight + iBorderHeight;
	// List of dialogs to modify
	var aDialogs = [
		this.config.grid.dialogSort,
		this.config.grid.dialogGoToRow,
		this.config.grid.dialogSearch,
		this.config.grid.dialogShow
	];
	// Append range dialogs
	aDialogs = aDialogs.concat(this.config.grid.dialogsRange);
	// Append filter out dialogs
	aDialogs = aDialogs.concat(this.config.grid.dialogsFilterOut);
	// Pass additional options to each window object
	for (var iDialog = 0; iDialog < aDialogs.length; iDialog++) {
		if (aDialogs[iDialog]) {
			aDialogs[iDialog].setState({
				// Window left position
				x: iLeft,
				// Window top position
				y: iTop,
				// Prevent appearing of dialog under the menu (menu still can appear
				// above the window when it is mouseovered)
				zIndex: 20
			});
		}
	}
};

/**
 * Fits menu into its container to synchronize it with grid.
 * @private
 */
Zapatec.GridToolbarMenu.prototype.fitIntoContainer = function() {
	// Get top menu element
	var oMenuTop = this.top_parent;
	if (!oMenuTop) {
		// Menu is not ready yet
		return;
	}
	// Get menu container element
	var oMenuContainer = oMenuTop.parentNode;
	if (!oMenuContainer) {
		// Menu is not ready yet
		return;
	}
	oMenuContainer = oMenuContainer.parentNode;
	if (!oMenuContainer || !oMenuContainer.clientWidth) {
		// Something wrong
		return;
	}
	// Reset menu width
	oMenuTop.style.width = '';
	// Calculate menu border width
	var iBorderWidth = oMenuTop.offsetWidth - oMenuTop.clientWidth;
	// Calculate new width of menu
	oMenuTop.style.width = (oMenuContainer.clientWidth - iBorderWidth) + 'px';
	// Check width
	if (oMenuContainer.clientWidth != oMenuTop.offsetWidth) {
		// May be in IE in non standards-compliant mode
		oMenuTop.style.width = oMenuContainer.clientWidth + 'px';
	}
	// Correct top menu style
	oMenuTop.style.background = '#e7e7d6';
};

/**
 * Customized Slider for Grid Toolbar.
 *
 * <pre>
 * <strong>Adds following config options:</strong>
 *
 * <b>grid</b> [object] Reference to the Grid object.
 *
 * <b>gridColumn</b> [number] Grid column number.
 *
 * <b>rangeContainer</b> [string] Id of the element where to put range text.
 *
 * <b>rangeConverter</b> [function] Optional. Callback function to convert range
 * when it is displayed.
 * </pre>
 *
 * @constructor
 * @extends Zapatec.Slider
 * @param {object} oArg User configuration
 */
Zapatec.GridToolbarSlider = function(oArg) {
	// Call constructor of superclass
	Zapatec.GridToolbarSlider.SUPERconstructor.call(this, oArg);
};

// Inherit Menu
Zapatec.inherit(Zapatec.GridToolbarSlider, Zapatec.Slider, {keepPath: true});

/**
 * Configures the widget. Gets called from init and reconfigure methods of
 * superclass.
 *
 * @private
 * @param {object} oArg User configuration
 */
Zapatec.GridToolbarSlider.prototype.configure = function(oArg) {
	// Define new config options
	this.defineConfigOption('grid');
	this.defineConfigOption('gridColumn');
	this.defineConfigOption('rangeContainer');
	this.defineConfigOption('rangeConverter');
	// Call parent method
	Zapatec.GridToolbarSlider.SUPERclass.configure.call(this, oArg);
};

/**
 * Slider "onChange" event listener. Gets called when slider position is changed
 * programmatically. Gets called in scope of the Slider object.
 *
 * @private
 * @param {number} iMinValue Min value in the range
 * @param {number} iMaxValue Max value in the range
 */
Zapatec.GridToolbarSlider.onChange = function(iMinValue, iMaxValue) {
	if (typeof this.config.rangeConverter == 'function') {
		iMinValue = this.config.rangeConverter(iMinValue);
		iMaxValue = this.config.rangeConverter(iMaxValue);
	} else {
		iMinValue = Math.round(iMinValue);
		iMaxValue = Math.round(iMaxValue);
	}
	// Display scale
	var oContainer = document.getElementById(this.config.rangeContainer);
	if (oContainer) {
		oContainer.innerHTML = iMinValue + ' - ' + iMaxValue;
	}
};

/**
 * Slider "newPosition" event listener. Gets called when slider is
 * drag-n-dropped. Gets called in scope of the Slider object.
 *
 * @private
 * @param {number} iMinValue Min value in the range
 * @param {number} iMaxValue Max value in the range
 */
Zapatec.GridToolbarSlider.newPosition = function(iMinValue, iMaxValue) {
	// Update range container
	Zapatec.GridToolbarSlider.onChange.call(this, iMinValue, iMaxValue);
	// Limit range of items
	if (this.config.grid) {
		this.config.grid.limitRange({
			column: this.config.gridColumn,
			min: iMinValue,
			max: iMaxValue
		});
	}
};