zpgrid-output.js

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

/**
 * @fileoverview Plugin for Zapatec Grid to display grid.
 *
 * <pre>
 * Copyright (c) 2004-2007 by Zapatec, Inc.
 * http://www.zapatec.com
 * 1700 MLK Way, Berkeley, California,
 * 94709, U.S.A.
 * All rights reserved.
 * </pre>
 */

/* $Id: zpgrid-output.js 7653 2007-08-03 18:30:37Z alex $ */

/**
 * If there are several containers, synchronizes their width.
 * @private
 */
Zapatec.Grid.prototype.syncContainers = function() {
	// At least 2 containers must be defined
	if (!this.container || (!this.headerContainer && !this.totalsContainer &&
	 !this.paginationContainers.length)) {
		return;
	}
	// Get container dimensions
	var iW = this.container.clientWidth;
	var iH = this.container.clientHeight;
	var oD = this.getGridDimensions();
	if (oD.height && (!iH || !this.container.style.height || oD.height < iH)) {
		iH = oD.height;
	}
	if (iW) {
		// If there is separate container for header
		if (this.headerContainer) {
			this.headerContainer.style.width = iW + 'px';
		}
		// If there is separate container for totals
		if (this.totalsContainer && !this.config.horizontal) {
			this.totalsContainer.style.width = iW + 'px';
		}
		// If there are separate containers for pagination
		if (oD.width && oD.width < iW) {
			iW = oD.width;
		}
		for (var iEl = 0; iEl < this.paginationContainers.length; iEl++) {
			this.paginationContainers[iEl].style.width = iW + 'px';
		}
	}
	if (iH) {
		// If there is separate container for totals
		if (this.totalsContainer && this.config.horizontal) {
			if (this.headerContainer) {
				iH += this.headerContainer.offsetHeight;
			}
			this.totalsContainer.style.height = iH + 'px';
		}
	}
};

/**
 * Returns real width and height of the grid after it has been drawn.
 *
 * <pre>
 * Format of returned object:
 * {
 *   width: [number] width of the grid in pixels,
 *   height: [number] height of the grid in pixels
 * }
 * </pre>
 *
 * @return Object containing width and height of the grid
 * @type object
 */
Zapatec.Grid.prototype.getGridDimensions = function() {
	var oDims = {
		width: 0,
		height: 0
	};
	var oTable = document.getElementById('zpGrid' + this.id + 'DataTableTable');
	if (oTable) {
		oDims.width = oTable.offsetWidth;
		oDims.height = oTable.offsetHeight;
	}
	return oDims;
};

/**
 * Synchronizes scrolling.
 * @private
 */
Zapatec.Grid.prototype.syncScroll = function() {
	// Align columns
	if (!this.config.horizontal && typeof this.outAlignCols == 'function') {
		this.outAlignCols();
	}
	// Synchronize fixed and scrollable row heights
	this.syncRowHeights();
	// Synchronize scrolling
	if (this.headerContainer) {
		this.createProperty(this.container, 'zpGridHeader', this.headerContainer);
	}
	if (this.totalsContainer) {
		this.createProperty(this.container, 'zpGridTotals', this.totalsContainer);
	}
	if (this.config.fixedLeft > 0 || this.config.horizontal) {
		this.createProperty(this.container, 'zpGridFixedLeft',
		 document.getElementById('zpGrid' + this.id + 'FixedLeft'));
		if (this.headerContainer) {
			this.createProperty(this.container, 'zpGridDataFixedLeft',
			 document.getElementById('zpGrid' + this.id + 'DataFixedLeft'));
		}
		if (this.totalsContainer) {
			this.createProperty(this.container, 'zpGridTotalsFixedLeft',
			 document.getElementById('zpGrid' + this.id + 'TotalsFixedLeft'));
		}
	}
	if (this.container.zpGridHeader || this.container.zpGridTotals ||
	 this.container.zpGridFixedLeft) {
		// Synchronize header
		if (this.container.zpGridHeader) {
			this.container.zpGridHeader.scrollLeft = this.container.scrollLeft;
		}
		// Synchronize totals
		if (this.container.zpGridTotals) {
			this.container.zpGridTotals.scrollLeft = this.container.scrollLeft;
		}
		// Set up syncronizing on scroll
		if (this.config.horizontal) {
			this.createProperty(this.container, 'onscroll', function() {
				// Synchronize fixed columns
				if (this.zpGridFixedLeft) {
					this.zpGridFixedLeft.style.left = this.scrollLeft + 'px';
				}
				if (this.zpGridDataFixedLeft) {
					this.zpGridDataFixedLeft.style.left = this.scrollLeft + 'px';
				}
				if (this.zpGridTotalsFixedLeft) {
					this.zpGridTotalsFixedLeft.style.top = this.scrollTop + 'px';
				}
				// Synchronize header
				if (this.zpGridHeader) {
					this.zpGridHeader.scrollLeft = this.scrollLeft;
				}
				// Synchronize totals
				if (this.zpGridTotals) {
					this.zpGridTotals.scrollTop = this.scrollTop;
				}
			});
		} else {
			this.createProperty(this.container, 'onscroll', function() {
				// Synchronize fixed columns
				if (this.zpGridFixedLeft) {
					this.zpGridFixedLeft.style.left = this.scrollLeft + 'px';
				}
				if (this.zpGridDataFixedLeft) {
					this.zpGridDataFixedLeft.style.left = this.scrollLeft + 'px';
				}
				if (this.zpGridTotalsFixedLeft) {
					this.zpGridTotalsFixedLeft.style.left = this.scrollLeft + 'px';
				}
				// Synchronize header
				if (this.zpGridHeader) {
					this.zpGridHeader.scrollLeft = this.scrollLeft;
				}
				// Synchronize totals
				if (this.zpGridTotals) {
					this.zpGridTotals.scrollLeft = this.scrollLeft;
				}
			});
		}
	}
};

/**
 * Aligns columns to the width of respective fields and fields to the maximum
 * height. Destroyed once the style sheet is applied.
 * @private
 */
Zapatec.Grid.prototype.outAlignCols = function() {
	// Get stylesheet
	if (!Zapatec.StyleSheet) {
		return;
	}
	var oStyle = new Zapatec.StyleSheet();
	var iGridId = this.id;
	// Get max height
	var iMaxH = 0;
	var iMaxSpannedH = 0;
	var iSpan = 0;
	var iSpanH = 0;
	var aFields = this.fields;
	var iFields = aFields.length;
	var bAutoWidth = (this.config.columnWidth == 'auto');
	var iField, iCol, oField, iFieldId, oSpan, oDiv;
	for (iField = 0, iCol = 0; iField < iFields; iField++) {
		oField = aFields[iField];
		if (!oField || oField.hidden) {
			continue;
		}
		iFieldId = oField.i;
		oSpan = document.getElementById('zpGrid' + iGridId + 'Span' + iFieldId);
		if (oSpan) {
			iSpan = oSpan.getAttribute('colspan') * 1;
			iSpanH = oSpan.offsetHeight;
		}
		oDiv = document.getElementById('zpGrid' + iGridId + 'Col' + iFieldId + 'Title');
		if (oDiv) {
			// Set column width if fixed width is not defined for this column
			if (bAutoWidth && !oField.columnWidth) {
				this.outSetColWidth(iFieldId, oDiv.offsetWidth);
			}
			// Get cell height
			var iH = oDiv.offsetHeight;
			if (iSpan) {
				// Add span height
				iH += iSpanH;
				if (iMaxSpannedH < iH) {
					iMaxSpannedH = iH;
				}
			} else {
				if (iMaxH < iH) {
					iMaxH = iH;
				}
			}
		}
		if (iSpan) {
			iSpan--;
		}
		iCol++;
	}
	// Set heights to max
	if (iMaxH) {
		oStyle.addRule('#zpGrid' + iGridId +
		 'Container .zpGridTable .zpGridField .zpGridDiv',
		 'height:' + iMaxH + 'px');
	}
	if (iMaxSpannedH) {
		oStyle.addRule('#zpGrid' + iGridId +
		 'Container .zpGridTable .zpGridField .zpGridSpannedDiv',
		 'height:' + iMaxSpannedH + 'px');
	}
	// We don't need to do this again
	this.outAlignCols = null;
};

/**
 * Synchronizes fixed and scrollable row heights.
 * @private
 */
Zapatec.Grid.prototype.syncRowHeights = function() {
	var oConfig = this.config;
	var iGridId = this.id;
	var sGridId = 'zpGrid' + iGridId;
	// Synchronize fixed and scrollable row heights
	if (oConfig.horizontal) {
		var aFields = this.fields;
		var iFields = aFields.length;
		// Rows
		var sFieldId = sGridId + 'Field';
		var sTotal0CellId = sGridId + 'Total0Cell';
		var sSpanId = sGridId + 'Span';
		var iField, oField, iFieldId, oCellHidden, oCell;
		for (iField = 0; iField < iFields; iField++) {
			oField = aFields[iField];
			if (!oField) {
				continue;
			}
			iFieldId = oField.i;
			// Field
			oCellHidden = document.getElementById(sFieldId + iFieldId + 'Hidden');
			if (oCellHidden) {
				oCell = document.getElementById(sFieldId + iFieldId);
				if (oCell) {
					this.syncRowHeight(oCellHidden, oCell);
					this.syncColumnWidth(oCellHidden, oCell);
				}
				// Total
				oCell = document.getElementById(sTotal0CellId + iFieldId + 'Hidden');
				if (oCell) {
					this.syncRowHeight(oCellHidden, oCell);
				}
				oCell = document.getElementById(sTotal0CellId + iFieldId);
				if (oCell) {
					this.syncRowHeight(oCellHidden, oCell);
				}
			}
			// Span
			oCellHidden = document.getElementById(sSpanId + iFieldId + 'Hidden');
			if (oCellHidden) {
				oCell = document.getElementById(sSpanId + iFieldId);
				if (oCell) {
					this.syncColumnWidth(oCellHidden, oCell);
				}
			}
		}
		// Totals
		var sTotalId = sGridId + 'Total';
		var iRow;
		for (iField = 0; iField < iFields; iField++) {
			var oField = aFields[iField];
			if (!oField) {
				continue;
			}
			iFieldId = oField.i;
			for (iRow = 0; true; iRow++) {
				oCellHidden = document.getElementById(sTotalId + iRow + 'Cell' +
				 iFieldId + 'Hidden');
				if (!oCellHidden) {
					break;
				}
				oCell = document.getElementById(sTotalId + iRow + 'Cell' + iFieldId);
				if (!oCell) {
					break;
				}
				this.syncColumnWidth(oCellHidden, oCell);
			}
		}
	} else if (oConfig.fixedLeft > 0) {
		// Rows
		var aRows = this.applyPaging();
		var iRows = aRows.length;
		var sRowId = sGridId + 'Row';
		var iRow, oRow, iRowId, oCellHidden, oCell;
		for (iRow = 0; iRow < iRows; iRow++) {
			oRow = aRows[iRow];
			if (oRow) {
				iRowId = oRow.i;
				oCellHidden = document.getElementById(sRowId + iRowId + 'Cell0Hidden');
				if (oCellHidden) {
					oCell = document.getElementById(sRowId + iRowId + 'Cell0');
					if (oCell) {
						this.syncRowHeight(oCellHidden, oCell);
					}
				}
			}
		}
		// Totals
		var sTotalId = sGridId + 'Total';
		for (iRow = 0; true; iRow++) {
			oCellHidden = document.getElementById(sTotalId + iRow + 'Cell0Hidden');
			if (!oCellHidden) {
				break;
			}
			oCell = document.getElementById(sTotalId + iRow + 'Cell0');
			if (!oCell) {
				break;
			}
			this.syncRowHeight(oCellHidden, oCell);
		}
	}
};

/**
 * Synchronizes fixed and scrollable row heights.
 *
 * @private
 * @param {object} oCellHidden First cell object of scrollable row
 * @param {object} oCell First cell object of fixed row
 */
Zapatec.Grid.prototype.syncRowHeight = function(oCellHidden, oCell) {
	// Get difference of heights
	var oRow = oCellHidden.parentNode;
	if (!oRow) {
		return;
	}
	var iHeight = 0;
	var aCells = oRow.getElementsByTagName('td');
	var iCells = aCells.length;
	var iCell, iCellH;
	for (iCell = 0; iCell < iCells; iCell++) {
		if (aCells[iCell].getAttribute('rowspan') > 1) {
			continue;
		}
		iCellH = aCells[iCell].offsetHeight;
		if (iHeight < iCellH) {
			iHeight = iCellH;
		}
	}
	var oRowFixed = oCell.parentNode;
	if (!oRowFixed) {
		return;
	}
	var iHeightFixed = 0;
	var aCellsFixed = oRowFixed.getElementsByTagName('td');
	var iCellsFixed = aCellsFixed.length;
	for (iCell = 0; iCell < iCellsFixed; iCell++) {
		if (aCellsFixed[iCell].getAttribute('rowspan') > 1) {
			continue;
		}
		iCellH = aCellsFixed[iCell].offsetHeight;
		if (iHeightFixed < iCellH) {
			iHeightFixed = iCellH;
		}
	}
	var iDiff = iHeight - iHeightFixed;
	// If there is difference
	if (iDiff) {
		// Height will be applied to div because it doesn't work correctly for td
		var oDiv = oCell.getElementsByTagName('div');
		if (!oDiv) {
			return;
		}
		oDiv = oDiv[0];
		if (!oDiv) {
			return;
		}
		// Set row height
		oDiv.style.height = iHeight + 'px';
		// Adjust height in IE where border and padding are part of height
		iHeight = 0;
		for (iCell = 0; iCell < iCells; iCell++) {
			if (aCells[iCell].getAttribute('rowspan') > 1) {
				continue;
			}
			iCellH = aCells[iCell].offsetHeight;
			if (iHeight < iCellH) {
				iHeight = iCellH;
			}
		}
		iHeightFixed = 0;
		for (iCell = 0; iCell < iCellsFixed; iCell++) {
			if (aCellsFixed[iCell].getAttribute('rowspan') > 1) {
				continue;
			}
			iCellH = aCellsFixed[iCell].offsetHeight;
			if (iHeightFixed < iCellH) {
				iHeightFixed = iCellH;
			}
		}
		iDiff = iHeight - iHeightFixed;
		// If there is still difference
		if (iDiff) {
			// Set row height
			oDiv.style.height = (iHeight + iDiff) + 'px';
		}
	}
};

/**
 * Synchronizes fixed and scrollable column width.
 *
 * @private
 * @param {object} oCellHidden First cell object of scrollable row
 * @param {object} oCell First cell object of fixed row
 */
Zapatec.Grid.prototype.syncColumnWidth = function(oCellHidden, oCell) {
	// Width will be applied to div because it doesn't work correctly for td
	var oDiv = oCell.getElementsByTagName('div');
	if (!oDiv) {
		return;
	}
	oDiv = oDiv[0];
	if (!oDiv) {
		return;
	}
	// Get difference of widths
	var iDiff = oCellHidden.offsetWidth - oCell.offsetWidth;
	// If there is difference
	if (iDiff) {
		// Calculate new cell width
		var iWidth = oDiv.offsetWidth + iDiff;
		// Set width of td element
		oDiv.style.width = iWidth + 'px';