gridrenderer.js

javascript 很酷的类库

        // NOTE: _lastDrawnRow/Col are the last row/col to
        // be drawn, logic below renders up to but not including endCol/endRow
        startRow = this._firstDrawnRow;
        endRow = this._lastDrawnRow + 1;

    
    } else {
        var viewportTop = drawRect[0],
            viewportEnd = drawRect[1] +1;
    
        //>Animation
        // We don't know what the fragment is used for, so we can't skip returning rows in
        // most cases. 
        // If we are writing out content for an animation row (content will be shrunk or 
        // grown to indicate an animated add/remove of rows), and all the rows are 
        // (and will be) out of the viewport we can just write out a big spacer.
        // Otherwise we have to return HTML for the full set of rows (no spacers even for rows
        // that will end up offscreen) since we may be sliding them into view in which case 
        // they will all scroll past the user. We can't check this._rowAnimationInfo._slideIn
        // here as it won't have been set up yet.
        if (this._writingAnimatedShowRows) {
            // All off the bottom or the top - just draw a big spacer so the scrollbar adjusts
            if (viewportTop > endRow || viewportEnd < startRow) {
                startRow = endRow;
            }
        }
        //<Animation
        
    }

    // colNum can be passed to render one column only - used for auto-sizing
    // or if passed an array can specify a specific set of columns - used for 
    // rendering an entire row (without spacers), for (EG) showing row HTML as a drag-tracker
    var startCol, endCol;
    if (colNum != null) {
        if (isc.isAn.Array(colNum)) {
            startCol = colNum[0];
            endCol = colNum[1] + 1;
         } else {
            startCol = colNum;
            endCol = colNum +1;
        }
    } else {
        startCol = this._firstDrawnCol;
        endCol = this._lastDrawnCol + 1;
    }

    // total columns we'll be drawing, for colSpans
    var numCols = endCol - startCol;

    // if "colNum" has been passed such that we are returning the HTML for just one column, we
    // are essentially in showAllColumns mode in the sense that we don't want to adding
    // padding/margins to compensate for unrendered columns
    var showAllColumns = (this.showAllColumns || colNum != null);

	// Draw
	// ---------------------------------------------------------------------------------------

	var output = isc.StringBuffer.create(),
        fields = this.fields, 
		sizes = this._fieldWidths;

    // remember the specified width of the first column when we draw.  This helps us prevent
    // unnecessary redraw on resize; see setColumnWidths()
    this._colWidthAtDraw = startCol != 0 ? null : this._fieldWidths[0];

    var leftColPad, rightColPad, totalHorizontalWidth, padType;
    if (!showAllColumns) {
        // figure out size of columns to left and right of visible area
        leftColPad = this._fieldWidths.slice(0, startCol).sum(),
        rightColPad = this._fieldWidths.slice(endCol, this._fieldWidths.length).sum(),
        totalHorizontalWidth = this._fieldWidths.sum()
        
        //this.logWarn("column pads: " + [leftColPad, rightColPad] + " type:" + padType);
        padType = (this.cacheDOM || isc.Browser.isIE || isc.Browser.isSafari ? "margin" : "padding");
    }

    // total size of the table we're drawing (NOTE: may be larger or smaller than the body
    // Canvas, since the body Canvas is a viewport on to this table)
    var tableWidth = this._fieldWidths.slice(startCol, endCol).sum(),
        autoFit = this.autoFit;

    var widthHTML = "";
    if (colNum != null) {
        if (!autoFit && this.fixedColumnWidths) {
            // if rendering just one column, size it to 100% of it's containing Canvas, since
            // the Canvas will be sized to the column width
            widthHTML = " WIDTH=100%";
        }
    } else if (isc.Browser.isMoz || isc.Browser.isSafari && !autoFit) {
        
        widthHTML = " WIDTH=" + tableWidth;
    }
    
    // output a blank spacer in a DIV that is as tall as all the records before the table.
    // This causes the scrollable area to be as large as if we were drawing all records,
    // so the thumb is the correct size and scrolling works as expected.
    
    // In some cases we explicitly specify additional space to show above / below the
    // rows in a GridRenderer (this.startSpace / endSpace)
    // If this.startSpace is non null, add it to the calculated height of the undrawn 
    // start rows.
    // Note that in this case the range of rows is shifted down - already handled by
    // _getViewportFillRows
    var startSpacerHeight = this.startSpace || 0;
    if (startRow != rangeStart) {
        var undrawnRowHeight = ((startRow - rangeStart) * this.avgRowHeight);
        this._startRowSpacerHeight = undrawnRowHeight;
        startSpacerHeight += undrawnRowHeight;
    } else {
        this._startRowSpacerHeight = 0;
    }
    
    if (!this.cacheDOM) {
        // If the space is zero sized, we still want to write out the spacer div so we can handle
        // setStartSpace() etc without a redraw
        // In IE specifying the height as zero px won't work, so set display none instead to ensure
        // the spacer takes up no space
        // Give the spacer DIV an ID so we can look at it's height, etc. later.
        // When we resize this on the fly (in setStartSpace()) we'll set display back to the default
        // (inline) if necessary.
        output.append("<DIV style='height:", startSpacerHeight, "px;overflow:hidden;",
                        (startSpacerHeight == 0 ? "display:none;" : null), "' ",
                        (fragment ? ">" : " ID="+ this.getID()+ "_topSpacer>"),
                        isc.Canvas.spacerHTML(1, startSpacerHeight), 
                      "</DIV>")
    } 
    
	//
	//	output the start table tag
	//
	// XXX: If height of the list is screwy in IE5 until the cursor passes over it, 
	//			we should set the height of the table explicitly
	output.append(
        
		"<TABLE BORDER=0", widthHTML, 
 		(!fragment ? " ID=" + this.getTableElementId() : null),
		(this.tableStyle && isc.Browser.isDOM ? 
         " CLASS='" + this.tableStyle + this._$singleQuote : isc._emptyString),
		" CELLSPACING=" , this.cellSpacing,	
		" CELLPADDING=" , this.cellPadding,
        " STYLE='",
        
		(isc.Browser.isDOM && !autoFit && this.fixedColumnWidths ? 
         "table-layout:fixed;overflow:hidden;wrap:false;" : ""),
        
        (!showAllColumns ? 
            padType + (this.isRTL() ? "-right: " : "-left:") + leftColPad + "px;" + 
    		padType + (this.isRTL() ? "-left:" : "-right:") + rightColPad + "px;"
		: ""),

        
        (this.cacheDOM && this._startRowSpacerHeight > 0
            ? "margin-top:" + this._startRowSpacerHeight + "px;" : ""),
        
        // if we plan to scroll immediately after draw, draw the table as hidden, so we don't
        // momentarily see it in the wrong scroll position
        (this._targetRow != null && !(isc.Browser.isIE && this._avoidRedrawFlash) ? 
         "visibility:hidden;" : ""),
        "'>",
        
        (isc.Browser.isMoz ? "<TBODY>" : "")
	);

    var vPad = 0, hPad = 0,
        // get style we'll use on the first record, used for sizing calculations
        firstRecordStyle = this._getFirstRecordStyle();

    if ((isc.Browser.isSafari || isc.Browser.isIE) && isc.Browser.isStrict) {
        
        hPad = this._getCellHBorderPad();
        
        
        vPad = (this.fixedRowHeights ? 0 : this.cellPadding * 2);
        vPad += (this.fixedRowHeights ? isc.Element._getVBorderSize(firstRecordStyle) 
                                      : isc.Element._getVBorderPad(firstRecordStyle));
    }
    // store pad amounts since they are needed on cell refresh
    this._vPad = vPad;
    this._hPad = hPad;

    
	if (!autoFit && isc.Browser.isDOM) {
		for (colNum = startCol; colNum < endCol; colNum++) {
            output.append("<COL WIDTH=" , (sizes[colNum] - hPad), ">");
		}
	}

    
    output.append("<TBODY>");

    
	var cellHeight = this.cellHeight,
        cellWrapHTML = (this.wrapCells ? "" : "<NOBR>"),
        cellWrapHTMLClose = (this.wrapCells ? "" : "</NOBR>")
	;

    var singleCells = 0;

	// Draw rows
	// --------------------------------------------------------------------------------------------
	if (isc.Browser.isDOM) {
        // Do we need to write a DIV into the cell (See comments in _writeDiv())
        var writeDiv = this._writeDiv(cellHeight);
        
        
        
        

        // template of cell HTML
        var cellHTML = [];
        cellHTML[0] = "<TD";
        // [1] height attribute, if set (per row)
        // [2] height value, if set (per row)
        cellHTML[3] = " ALIGN=";
        // [4] align (per col) and rowSpan (per cell) if necessary
        // [5] valign attribbute, if set (per cell)
        // [6] valign value, if set (per cell)
        // [7] width (per col) OR colspan when drawing a one-cell row (per row).
        //     Ends with an open STYLE='
        //cellHTML[9] = ";filter:Alpha(opacity=100);";
        // [gap]
        // [10] min-height css text - used for rows with shouldFixRowHeight() == false where
        //     this.fixedRowHeights as a whole is true
        // [11] cssText range start (per cell)
        // [gap]
        // [17] fastCellUpdates: close STYLE attribute; no CLASS attribute will be written
        // [17] normal: close STYLE attribute, start CLASS attribute
        cellHTML[17] = this.fastCellUpdates ? "' " : "' CLASS=";
        // [18] cell style (when not using fastCellUpdates)
        if (!fragment && this.getCellElementId) cellHTML[19] = " ID=";
        // [20] cellID (per cell, optional)
        // [21] DIV start to force correct cellHeight, if necessary (per table)
        // [22] rest of DIV to force column width if writeDiv (per column)
        cellHTML[23] = ">" + cellWrapHTML; // ">" + wrap (per table)
        // [24] value range start (per cell)
        // [gap]
        cellHTML[30] = cellWrapHTMLClose + (writeDiv ? "</DIV></TD>" : "</TD>");

        var heightAttrSlot = 1, heightSlot = 2, alignSlot = 4, valignAttrSlot = 5, 
            valignSlot = 6, widthSlot = 7, minHeightCSS = 10, cssStart = 11, styleSlot = 18, 
            cellID = 20, divStart = 21, cellValue = 24;

        var rowStart = "<TR>",
            rowEnd = "</TR>",
            heightAttr = " HEIGHT=",
            valignAttr = " VALIGN=";

        // make row elements programmatically focuseable
        if (isc.screenReader) rowStart = "<TR tabIndex=-1>";

        // these are used only when cells have rowSpans (only possible if getRowSpan() has been
        // defined)
    
        // colNum -> number of remaining cells to skip (for columns where a cell spans into the
        // current row)
        var cellSkips = [],
            // number of cells that will be skipped in this row.  Increased when spans start,
            // decreased when they end
            skipCount = 0, 
            // colNum -> start row of rowSpanning cell (for columns where a cell spans into the
            // current row)
            cellSkipSourceRows = [];


        // for single-cell records - ends in an open style tag.
        var colspanHTML = " COLSPAN=" + numCols + " STYLE='" + 
                           (this.fixedRowHeights ? "padding-top:0px;padding-bottom:0px;" : "");

        this._cacheColumnHTML(startCol, endCol, autoFit, hPad, writeDiv);

		// output each record in turn
		for (var rowNum = startRow; rowNum < endRow; rowNum++) {
            //>Animation
            
            var isAnimationRow = (!fragment && this._animatedShowStartRow == rowNum);
            //<Animation

			// get a pointer to the record for this row.
            // NOTE: record can be null.  The various routines below (eg getCellValue) are
            // expected to handle this.
			var record = this.getCellRecord(rowNum);
	
			// If this row is a separator or is not loaded yet, we draw a single cell with
            // COLSPAN set to extend across the entire table.
			var drawRecordAsSingleCell = //>Animation
                                         isAnimationRow ||   //<Animation
                                         this._drawRecordAsSingleCell(rowNum, record);
    
			// start the table row
            if (!fragment && this.getRowElementId) {
                output.append("<TR", (isc.screenReader ? " tabIndex=-1" : null), 
                              " ID=", this.getRowElementId(rowNum, rowNum-startRow), ">");
            } else {
    			output.append(rowStart);
            }

            // set per-row pieces of cell HTML

            // if we have fixed record heights (cell contents should be clipped vertically) set
            // a height for every cell in this row.
            if (this.fixedRowHeights || writeDiv) {
                // use the getRowHeight function if it's defined, otherwise use the cellHeight
                // property
                var rowHeight = //>Animation
                                isAnimationRow ? this._animatedShowRowHeight :
                                //<Animation
                                (this.getRowHeight != null ? 
                                 this.getRowHeight(record, rowNum) : 
                                 cellHeight),
                    // If this widget has a 'shouldFixRowHeight()' method, check whether that returns
                    // false (enables override of 'fixedRowHeights' on a per-row basis - currently
                    // only used internally, for row-level editing of ListGrids)
                    fixedRowHeight = //>Animation
                                        isAnimationRow ||   //<Animation
                                        (this.shouldFixRowHeight == null || 
                                         this.shouldFixRowHeight(record, rowNum) != false); 
                                                 
                //this.logWarn("rowNum: " + rowNum + 
                //             ", rowHeight: " + rowHeight + 
                //             ", cell height: " + (rowHeight - vPad));

                // If this row is of fixed height, write the height out into the TD
                if (fixedRowHeight) {
                    // write a height attribute to enforce height
                    cellHTML[heightAttrSlot] = heightAttr;
                    cellHTML[heightSlot] = rowHeight - vPad;
                    
                    cellHTML[minHeightCSS] = null;

                // If the row can expand with content, avoid writing a height into the TD -
                // use the min-height CSSText instead
                } else {
                    // don't write a height attribute at all
                    cellHTML[heightAttrSlot] = null;
                    cellHTML[heightSlot] = null;
                    
                    // Apply min css height to per-cell css... 
                    cellHTML[minHeightCSS] = this._getMinH