zpgrid-editable.js

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

		var oInput = oTd.firstChild.firstChild.firstChild;
		// IE needs small delay
		setTimeout(function() {
			if (oInput.tagName.toLowerCase() == 'textarea') {
				oInput.style.height = oInput.scrollHeight + 'px';
				oInput.style.width = oInput.scrollWidth + 'px';
				// IE needs focus twice for large grids
				oInput.focus();
				oInput.select();
			}
			oInput.focus();
			// Prevent possible memory leak in IE
			oInput = null;
		}, 0);
	}
};

/**
 * Returns currently edited cell object.
 *
 * @return Edited cell object
 * @type object
 */
Zapatec.EditableGrid.prototype.getEditingCell = function() {
	return this.editingCell;
};

/**
 * Receives data back from other widget previosly passed to it using its
 * {@link Zapatec.Widget#receiveData} method.
 *
 * <pre>
 * Arguments object format:
 * {
 *   data: [string] edited original value of the cell
 * }
 * </pre>
 *
 * @param {object} oArg Arguments
 */
Zapatec.EditableGrid.prototype.acceptData = function(oArg) {
	// Call parent method
	Zapatec.EditableGrid.SUPERclass.acceptData.call(this, oArg);
	// Check argument
	if (typeof oArg != 'object') {
		oArg = {};
	}
	// Update edited cell
	this.setCellReadOnly(this.editingCell, oArg.data);
};

/**
 * Deprecated. Use {@link Zapatec.EditableGrid#acceptData} instead.
 */
Zapatec.EditableGrid.prototype.editDataReceive =
 Zapatec.EditableGrid.prototype.acceptData;

/**
 * Turns cell into read-only state and assigns new value.
 *
 * @private
 * @param {object} oCell Cell object
 */
Zapatec.EditableGrid.prototype.readOnlyCell = function(oCell) {
	// Check arguments
	if (!oCell || !oCell.editing) {
		return;
	}
	// Mark cell as read-only
	oCell.editing = false;
	// Remove reference
	this.editingCell = null;
	// Get new value if we are responsible for visualisation
	var val;
	var sVal;
	if (this.visualize) {
		// Get table cell element
		var oTd = document.getElementById('zpGrid' + this.id + 'Row' +
		 this.getRowId(this.getRowByCell(oCell)) + 'Cell' +
		 this.getCellId(oCell));
		// Can be on different page
		if (oTd && oTd.firstChild && oTd.firstChild.firstChild) {
			var oInput = oTd.firstChild.firstChild.firstChild;
			// Check if this is input element
			if (oInput && typeof oInput.value != 'undefined') {
				// Get cell value from input element
				var sDataType = this.getCellDataType(oCell);
				if (sDataType && sDataType.indexOf('boolean') == 0) {
					// Checkbox
					val = oInput.checked;
				} else if (typeof oInput.selectedIndex != 'undefined') {
					// Selectbox
					var iIndex = oInput.selectedIndex;
					if (iIndex != -1) {
						var oOption = oInput.options[iIndex];
						if (oOption) {
							val = oOption.value;
							if (val && val.length) {
								// Check if value attribute is the same as displayed text
								if (val != oOption.innerHTML) {
									sVal = oOption.innerHTML;
								}
							} else {
								val = oOption.innerHTML;
							}
						}
						// Save selected index
						oCell.selectedIndex = oInput.selectedIndex;
					}
				} else {
					// Textarea
					val = oInput.value;
					// Unselect: required for tab navigation in IE
					if (document.selection && document.selection.empty) {
						document.selection.empty();
					}
				}
			}
		}
	}
	// Turn cell into read-only state
	this.setCellReadOnly(oCell, val, sVal);
};

/**
 * Turns cell into read-only state and assigns new value. If new value is
 * undefined, cell value is not changed.
 *
 * <pre>
 * Fires gridCellEdited event before turning cell into read-only state if it was
 * changed. Event listener receives following object:
 * {
 *   cell: [object] edited cell,
 *   previousState: [object] cell before editing
 * }
 *
 * Calls callbackCellReadOnly function when grid cell is turned into read-only
 * state. Callback receives Zapatec.EditableGrid and cell object.
 *
 * Fires gridEdited event when grid cell is turned into read-only state and
 * after calling of callbackCellReadOnly. Event listener receives edited cell
 * object as argument.
 * </pre>
 *
 * @param {object} oCell Cell object
 * @param {any} val Optional. New cell value
 * @param {string} sVal Optional. Value to display unless it is the same as val
 * after conversion according to the data type. Normally this argument should be
 * omitted
 */
Zapatec.EditableGrid.prototype.setCellReadOnly = function(oCell, val, sVal) {
	// Check arguments
	if (!oCell) {
		return;
	}
	// Mark cell as read-only
	oCell.editing = false;
	// Remove reference
	this.editingCell = null;
	// Set new value
	if (typeof val != 'undefined') {
		var sPrevVal = oCell.v;
		this.setCellValue(oCell, val);
		// Modify value to display
		if (typeof sVal != 'undefined') {
			oCell.v = sVal;
		}
		if (sPrevVal != oCell.v) {
			this.fireEvent('gridCellEdited', {
				cell: oCell,
				previousState: oCell.previousState
			});
		}
	}
	// Refresh cell without refreshing whole grid
	this.refreshCell({
		cell: oCell
	});
	// Read-only callback
	if (typeof this.config.callbackCellReadOnly == 'function') {
		this.config.callbackCellReadOnly(this, oCell);
	}
	// Fire event
	this.fireEvent('gridEdited', oCell);
};

/**
 * Refreshes a cell without refreshing whole grid.
 *
 * <pre>
 * Arguments format:
 * {
 *   cell: [object] cell object
 * }
 * </pre>
 *
 * @private
 * @param {object} oArg Arguments
 */
Zapatec.EditableGrid.prototype.refreshCell = function(oArg) {
	// Check arguments
	var oCell = oArg.cell;
	if (!oCell) {
		return;
	}
	// Display updates if we are responsible for visualisation
	if (this.visualizeCellReadOnly && this.visualize) {
		this.visualizeCellReadOnly(oCell);
	}
	// Redraw totals
	if (this.redrawTotals) {
		this.redrawTotals({
			column: this.getCellId(oCell)
		});
	}
	// Redraw filter out forms
	this.displayFilterOut();
};

/**
 * Extends parent method. 
 *
 * @private
 * @param {object} oCell Cell object
 */
Zapatec.EditableGrid.prototype.unselectCell = function(oCell) {
	// Editable cell is always selected as well. When cell is unselected, it must
	// be turned into read-only state.
	this.readOnlyCell(oCell);
	// Call parent method
	Zapatec.EditableGrid.SUPERclass.unselectCell.call(this, oCell);
};

/**
 * Extends parent method.
 * @private
 */
Zapatec.EditableGrid.prototype.refresh = function() {
	// If there is editable cell, its value must be updated. Otherwise changes
	// will be lost.
	this.readOnlyCell(this.editingCell);
	// Call parent method
	Zapatec.EditableGrid.SUPERclass.refresh.call(this);
};

/**
 * Extends parent method.
 *
 * @private
 * @param {number} iRowId Id of row that was clicked
 * @param {number} iCellId Id of cell that was clicked
 */
Zapatec.EditableGrid.prototype.rowOnDblClick = function(iRowId, iCellId) {
	// Call parent method
	Zapatec.EditableGrid.SUPERclass.rowOnDblClick.call(this, iRowId, iCellId);
	// Turn cell that is currently edited into read-only state
	if (this.editingCell) {
		this.readOnlyCell(this.editingCell);
	}
	// Turn cell into editable state
	this.editCell(this.getCellById(iRowId, iCellId));
};

/**
 * Sends contents of a cell to the server. Waits for server response and
 * restores previous cell value if successful response is not received.
 *
 * <pre>
 * Using POST method sends to the server script specified in autoSaveCell config
 * option following arguments:
 *
 * <b>i</b> cell id
 * <b>r</b> row id
 * <b>o</b> input value
 *
 * If callbackAutoSaveCell config option is defined, it is used for checking of
 * server response. Otherwise only HTTP success response is checked.
 * callbackAutoSaveCell must return true is cell was saved successfully.
 *
 * Server script may return any content, which is passed to the gridCellSaved
 * event listeners.
 *
 * Fires following events:
 *
 * <b>gridCellSaved</b> when HTTP success response is received from the server
 * and callbackAutoSaveCell config option is not defined or callback function
 * returns true. Event listener receives following object as argument:
 * {
 *   cell: [object] cell object,
 *   request: [object] XMLHttpRequest object (see
 *    {@link Zapatec.Transport#fetch} for details)
 * }
 *
 * <b>gridCellNotSaved</b> when HTTP error response is received from the server
 * or callbackAutoSaveCell config option is defined and callback function
 * doesn't return true. Event listener receives following object as argument:
 * {
 *   cell: [object] cell object,
 *   error: [object] error object (see {@link Zapatec.Transport#fetch} for
 *    details)
 * }
 *
 * Arguments format:
 * {
 *   cell: [object] cell object
 * }
 * </pre>
 *
 * @private
 * @param {object} oArg Arguments
 */
Zapatec.EditableGrid.prototype.saveCell = function(oArg) {
	// Validate cell
	var oCell = oArg.cell;
	if (!this.validateCell(oCell)) {
		return;
	}
	// Form content
	var sContent = [
		'i=',
		this.getCellId(oCell),
		'&r=',
		this.getCellRowId(oCell),
		'&o=',
		escape(this.getCellValueOriginal(oCell))
	].join('');
	// Send changes to the server
	var oGrid = this;
	Zapatec.Transport.fetch({
		// Server-side script
		url: this.config.autoSaveCell,
		// Use POST method
		method: 'POST',
		// Arguments string
		content: sContent,
		// onLoad handler
		onLoad: function(oRequest) {
			var fCallback = oGrid.config.callbackAutoSaveCell;
			if (typeof fCallback == 'function' && !fCallback({request: oRequest})) {
				// Cancel editing
				oCell = oGrid.revertCell({
					cell: oCell
				});
				// Show previous state
				oGrid.refreshCell({
					cell: oCell
				});
				// Inform listeners about error
				oGrid.fireEvent('gridCellNotSaved', {
					cell: oCell,
					request: oRequest
				});
			} else {
				// Inform listeners about success
				oGrid.fireEvent('gridCellSaved', {
					cell: oCell,
					request: oRequest
				});
			}
		},
		// onError handler
		onError: function(oError) {
			// Cancel editing
			oCell = oGrid.revertCell({
				cell: oCell
			});
			// Show previous state
			oGrid.refreshCell({
				cell: oCell
			});
			// Inform listeners about error
			oGrid.fireEvent('gridCellNotSaved', {
				cell: oCell,
				error: oError
			});
		},
		// Show "Saving" animated GIF
		busyContainer: this.container,
		// Use standard "Saving" animated GIF
		busyImage: 'zpsaving.gif'
	});
};