zpgrid-editable.js

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

 * @param {number} iCellId Cell id
 */
Zapatec.EditableGrid.prototype.inputBlur = function(iRowId, iCellId) {
	// Get cell object
	var oCell = this.getCellById(iRowId, iCellId);
	if (!oCell) {
		return;
	}
	// Make it read-only
	this.readOnlyCell(oCell);
};

/**
 * Esc key handler in editable mode.
 *
 * @private
 * @param {object} oCell Cell object
 * @param {object} oEvent Event object
 * @param {object} oElement Target element
 */
Zapatec.EditableGrid.prototype.inputButtonEsc = function(oCell, oEvent, oElement) {
	// Restore original value
	if (oElement.nodeName.toLowerCase() == 'input') {
		// Checkbox
		oElement.checked = this.getCellValueCompare(oCell) ? true : false;
	} else {
		// Selectbox or textarea
		oElement.value = this.getCellValueOriginal(oCell);
	}
	// Make cell read only
	this.readOnlyCell(oCell);
	// Stop event
	return Zapatec.Utils.stopEvent(oEvent);
};

/**
 * Enter key handler in editable mode.
 *
 * @private
 * @param {object} oCell Cell object
 * @param {object} oEvent Event object
 * @param {object} oElement Target element
 */
Zapatec.EditableGrid.prototype.inputButtonEnter = function(oCell, oEvent, oElement) {
	// Make cell read only
	this.readOnlyCell(oCell);
	// Stop event
	return Zapatec.Utils.stopEvent(oEvent);
};

/**
 * Tab key handler in editable mode.
 *
 * @private
 * @param {object} oCell Cell object
 * @param {object} oEvent Event object
 * @param {object} oElement Target element
 */
Zapatec.EditableGrid.prototype.inputButtonTab = function(oCell, oEvent, oElement) {
	// Save reference to current cell
	var oPrevCell = oCell;
	// Go to previous/next cell skipping not editable cells
	do {
		var oNextCell = null;
		if (oEvent.shiftKey) {
			// Get previous cell
			if (oCell.i == 0) {
				// Get visible rows
				var aRows = this.applyPaging();
				// Get previous row
				for (var iRow = 0; iRow < aRows.length; iRow++) {
					var oCurrRow = aRows[iRow];
					if (oCurrRow && oCell.r == oCurrRow.i) {
						if (iRow > 0) {
							// Go to last cell of previous row
							var oPrevRow = aRows[iRow - 1];
							if (oPrevRow && oPrevRow.cells instanceof Array) {
								oNextCell = oPrevRow.cells[oPrevRow.cells.length - 1];
							}
						} else if (this.currentPage > 0) {
							// Visual improvement: unselect row and cell before switching page
							this.unselectRow(this.getRowByCell(oPrevCell));
							this.unselectCell(oPrevCell);
							// Go to previous page
							this.gotoPage(this.currentPage - 1);
							// Get visible rows
							aRows = this.applyPaging();
							// Go to last cell
							var oLastRow = aRows[aRows.length - 1];
							if (oLastRow && oLastRow.cells instanceof Array) {
								oNextCell = oLastRow.cells[oLastRow.cells.length - 1];
							}
						}
						break;
					}
				}
			} else {
				// Go to previous cell
				var oRow = this.getRowByCell(oCell);
				if (oRow && oRow.cells instanceof Array) {
					oNextCell = oRow.cells[oCell.i - 1];
				}
			}
		} else {
			// Get next cell
			var oRow = this.getRowByCell(oCell);
			if (oRow && oRow.cells instanceof Array) {
				if (oCell.i == oRow.cells.length - 1) {
					// Get visible rows
					var aRows = this.applyPaging();
					// Get next row
					for (var iRow = 0; iRow < aRows.length; iRow++) {
						var oCurrRow = aRows[iRow];
						if (oCurrRow && oRow.i == oCurrRow.i) {
							if (iRow < aRows.length - 1) {
								// Go to first cell of next row
								var oNextRow = aRows[iRow + 1];
								if (oNextRow && oNextRow.cells instanceof Array) {
									oNextCell = oNextRow.cells[0];
								}
							} else if (this.currentPage < this.totalPages() - 1) {
								// Visual improvement: unselect row and cell before switching
								// page
								this.unselectRow(this.getRowByCell(oPrevCell));
								this.unselectCell(oPrevCell);
								// Go to next page
								this.gotoPage(this.currentPage + 1);
								// Get visible rows
								aRows = this.applyPaging();
								// Go to first cell
								var oFirstRow = aRows[0];
								if (oFirstRow && oFirstRow.cells instanceof Array) {
									oNextCell = oFirstRow.cells[0];
								}
							}
							break;
						}
					}
				} else {
					// Go to next cell
					oNextCell = oRow.cells[oCell.i + 1];
				}
			}
		}
		// Go to previous/next cell
		oCell = oNextCell;
	} while (oCell &&
	 (this.fields[oCell.i].noedit || this.fields[oCell.i].hidden));
	// Do nothing if this is first or last cell in the grid
	if (oCell) {
		// Wait until grid is refreshed
		var oGrid = this;
		setTimeout(function() {
			// Unselect previous cell and turn it into read only state
			oGrid.unselectCell(oPrevCell);
			// Unselect previous row
			oGrid.unselectRow(oGrid.getRowByCell(oPrevCell));
			// Select row
			oGrid.selectRow(oGrid.getRowByCell(oCell));
			// Select cell
			oGrid.selectCell(oCell);
			// Turn cell into editable mode
			oGrid.editCell(oCell);
		}, 0);
	}
	// Stop event
	return Zapatec.Utils.stopEvent(oEvent);
};

/**
 * Turns cell into editable state.
 *
 * <pre>
 * Calls callbackCellEdit function before grid cell is turned into editable
 * state. Callback receives Zapatec.EditableGrid and cell object. If callback
 * returns false, standard grid editor is not used.
 *
 * Fires gridCellEdit event before grid cell is turned into editable state and
 * after calling of callbackCellEdit. Event listener receives cell object that
 * is being modified.
 * </pre>
 *
 * @private
 * @param {object} oCell Cell object
 */
Zapatec.EditableGrid.prototype.editCell = function(oCell) {
	// Check arguments
	if (!oCell || oCell.editing) {
		return;
	}
	// Check if editing of this column is allowed
	var oField = this.getFieldByCell(oCell);
	if (!oField || oField.noedit) {
		return;
	}
	// Edit callback
	var bVisualize;
	if (typeof this.config.callbackCellEdit == 'function') {
		bVisualize = this.config.callbackCellEdit(this, oCell);
	}
	// Fire event
	this.fireEvent('gridCellEdit', oCell);
	// Mark cell as editable
	oCell.editing = true;
	// Save reference
	this.editingCell = oCell;
	// Get cell id
	var iCellId = this.getCellId(oCell);
	// Check external editors
	if (this.config.externalEditors && this.config.externalEditors.length) {
		for (var iEE = 0; iEE < this.config.externalEditors.length; iEE++) {
			var oEE = this.config.externalEditors[iEE];
			if (typeof oEE.column == 'undefined' || oEE.column == iCellId) {
				if (typeof oEE.callback == 'function') {
					// Callback
					oEE.callback(this.getCellValueOriginal(oCell));
				} else if (oEE.widget && typeof oEE.widget.receiveData == 'function') {
					// Widget
					oEE.widget.receiveData({
						data: this.getCellValueOriginal(oCell)
					});
				}
				return;
			}
		}
	}
	// Check if we are responsible for visualisation
	if (!(this.visualize && (bVisualize || typeof bVisualize == 'undefined'))) {
		return;
	}
	// Display input field
	var aCl;
	var sGridId = this.id.toString();
	var iRowId = this.getCellRowId(oCell);
	// Get table row element
	var oTr = document.getElementById('zpGrid' + sGridId + 'Row' + iRowId);
	if (oTr) {
		// Vertical grid
		// Update className
		aCl = [];
		aCl.push(' zpGridRowEditable zpGridRowEditable');
		aCl.push(iRowId);
		aCl.push(' zpGridRowEditable');
		aCl.push(oTr.className.indexOf('zpGridRowOdd') >= 0 ? 'Odd' : 'Even');
		if (oTr.className.indexOf('zpGridRowLast') >= 0) {
			// Last row
			aCl.push(' zpGridRowEditableLast');
		}
		var sClass = aCl.join('');
		oTr.className += sClass;
		// Get fixed part of the row
		oTr = document.getElementById('zpGrid' + sGridId + 'Row' + iRowId + 'Fixed');
		if (oTr) {
			oTr.className += sClass;
		}
	} else {
		oTr = document.getElementById('zpGrid' + sGridId + 'Col' + iCellId);
		if (oTr) {
			// Horizontal grid
			// Update className
			aCl = [];
			aCl.push(' zpGridColEditable zpGridColEditable');
			aCl.push(iCellId);
			aCl.push(' zpGridColEditable');
			aCl.push(oTr.className.indexOf('zpGridColOdd') >= 0 ? 'Odd' : 'Even');
			if (oTr.className.indexOf('zpGridColLast') >= 0) {
				// Last row
				aCl.push(' zpGridColEditableLast');
			}
			oTr.className += aCl.join('');
		}
	}
	// Get table cell element
	var oTd = document.getElementById('zpGrid' + sGridId + 'Row' + iRowId +
	 'Cell' + iCellId);
	// Can be on different page
	if (oTd && oTd.firstChild) {
		// Get number of visible columns
		var iCols = this.fields.length;
		for (var iFld = 0; iFld < this.fields.length; iFld++) {
			var oFld = this.fields[iFld];
			if (!oFld || oFld.hidden) {
				iCols--;
			}
		}
		// Update className
		aCl = [];
		aCl.push(' zpGridCellEditable zpGridCellEditable');
		aCl.push(iCellId);
		aCl.push(' zpGridCellEditable');
		aCl.push(iCellId % 2 == 1 ? 'Odd' : 'Even');
		if (iCellId == iCols - 1) {
			// Last cell
			aCl.push(' zpGridCellEditableLast');
		}
		oTd.className += aCl.join('');
		// Display form element depending from cell data type to edit cell value
		var sDataType = this.getCellDataType(oCell);
		if (sDataType && sDataType.indexOf('boolean') == 0) {
			// Checkbox
			var aHtml = [];
			aHtml.push('<div style="position:relative;height:0px"><div style="position:absolute;top:0px;left:0px;width:');
			aHtml.push(oTd.firstChild.offsetWidth);
			aHtml.push('px;height:');
			aHtml.push(oTd.firstChild.offsetHeight);
			aHtml.push('px;text-align:center"><input type="checkbox" class="zpGridInput" onkeydown="Zapatec.Widget.callMethod(');
			aHtml.push(sGridId);
			aHtml.push(",'inputKeyDown',");
			aHtml.push(iRowId);
			aHtml.push(',');
			aHtml.push(iCellId);
			aHtml.push(')" ');
			if (this.getCellValueCompare(oCell)) {
				aHtml.push('checked="checked" ');
			}
			aHtml.push('onblur="Zapatec.Widget.callMethod(');
			aHtml.push(sGridId);
			aHtml.push(",'inputBlur',");
			aHtml.push(iRowId);
			aHtml.push(',');
			aHtml.push(iCellId);
			aHtml.push(')"/></div></div>');
			// Original content is needed to keep cell size and position form
			// element correctly
			aHtml.push('<div style="overflow:hidden;visibility:hidden">');
			aHtml.push(oTd.firstChild.innerHTML);
			aHtml.push('</div>');
			oTd.innerHTML = aHtml.join('');
		} else if (oField.list) {
			// Selectbox
			var iWidth = oTd.firstChild.offsetWidth;
			var aHtml = [];
			aHtml.push('<div style="position:relative;height:0px"><div style="position:absolute;top:0px;left:0px">')
			aHtml.push(oCell.innerHTML);
			aHtml.push('</div></div>');
			// Original content is needed to keep cell size and position form element
			// correctly
			aHtml.push('<div style="overflow:hidden;visibility:hidden">');
			aHtml.push(oTd.firstChild.innerHTML);
			aHtml.push('</div>');
			oTd.innerHTML = aHtml.join('');
			// Set attributes
			var oSelect = oTd.firstChild.firstChild.firstChild;
			if (oSelect.className) {
				oSelect.className += ' zpGridSelect';
			} else {
				oSelect.className = 'zpGridSelect';
			}
			oSelect.onkeydown = new Function('Zapatec.Widget.callMethod(' + sGridId +
			 ",'inputKeyDown'," + iRowId + ',' + iCellId + ')');
			oSelect.onblur = new Function('Zapatec.Widget.callMethod(' + sGridId +
			 ",'inputBlur'," + iRowId + ',' + iCellId + ')');
			oSelect.style.width = iWidth + 'px';
			// Go to previously selected value
			if (typeof oCell.selectedIndex != 'undefined') {
				oSelect.selectedIndex = oCell.selectedIndex;
			}
		} else {
			// Textarea
			var aHtml = [];
			aHtml.push('<div style="position:relative;height:0px"><div style="position:absolute;top:0px;left:0px"><textarea class="zpGridTextarea" onkeydown="Zapatec.Widget.callMethod(');
			aHtml.push(sGridId);
			aHtml.push(",'inputKeyDown',");
			aHtml.push(iRowId);
			aHtml.push(',');
			aHtml.push(iCellId);
			aHtml.push(')" onkeyup="this.style.height=this.scrollHeight+\'px\';this.style.width=this.scrollWidth+\'px\'" onblur="Zapatec.Widget.callMethod(');
			aHtml.push(sGridId);
			aHtml.push(",'inputBlur',");
			aHtml.push(iRowId);
			aHtml.push(',');
			aHtml.push(iCellId);
			aHtml.push(')" style="width:');
			aHtml.push(oTd.firstChild.offsetWidth);
			aHtml.push('px;height:');
			aHtml.push(oTd.firstChild.offsetHeight);
			aHtml.push('px"></textarea></div></div>');
			// Original content is needed to keep cell size and position form
			// element correctly
			this.outputCellValue(aHtml, this.getFieldByCell(oCell), oCell, true);
			oTd.innerHTML = aHtml.join('');
			// Edit original value
			oTd.firstChild.firstChild.firstChild.innerHTML =
			 this.getCellValueOriginal(oCell);
		}