treegrid.js

javascript 很酷的类库

/*
 * Isomorphic SmartClient
 * Version 6.5 (2008-04-30)
 * Copyright(c) 1998-2007 Isomorphic Software, Inc. All rights reserved.
 * "SmartClient" is a trademark of Isomorphic Software, Inc.
 *
 * [e-mail]
 *
 * http://smartclient.com/license
 */




//>	@class	TreeGrid
//
// The Isomorphic SmartClient system supports hierarchical data (also referred to as tree data
// due to its "branching" organization) with:
// <ul>
//   <li> the +link{class:Tree} class, which manipulates hierarchical data sets
//   <li> the TreeGrid widget class, which extends the ListGrid class to visually
//        present tree data in an expandable/collapsible format.
// </ul>
// For information on DataBinding Trees, see +link{group:treeDataBinding}.
// <p>
// A TreeGrid works just like a +link{ListGrid}, except one column (specified by
// +link{TreeGridField.treeField} shows a heirarchical +link{Tree}.  A TreeGrid is not limited
// to displaying just the +link{Tree} column - you can define additional columns (via
// +link{TreeGrid.fields}) which will render just like the columns of a +link{ListGrid}, and
// support all of the functionality of ListGrid columns, such as
// +link{listGridField.formatCellValue,formatters}.
// <p>
// Except where explicitly overridden, +link{ListGrid} methods, callbacks, and properties
// apply to TreeGrids as well.  The +link{ListGrid} defines some methods as taking/returning
// +link{ListGridField} and +link{ListGridRecord}.  When using those methods in a TreeGrid,
// those types will be +link{TreeGridField} and +link{TreeNode}, respectively.
// 
// @implements DataBoundComponent    
// @treeLocation Client Reference/Grids
// @visibility external
//<

// define us as a subclass of the ListGrid
isc.ClassFactory.defineClass("TreeGrid", "ListGrid");

// Synonym for backCompat.  NOTE: define an alias rather than make a subclass, otherwise,
// attempts to skin the class using the old name would only affect the subclass!
isc.addGlobal("TreeViewer", isc.TreeGrid);

//>	@class	TreeGridBody
//
//  GridRenderer displayed as the body of a TreeGrid. Includes various overrides for
//  specialized event handling and display.
//
//  @treeLocation Client Reference/Grids/TreeGrid/
//  @visibility internal
//<
isc.defineClass("TreeGridBody", isc.GridBody).addProperties({
    // Override the internal _updateCellStyle() method to style the tree-field's internal
    // table (without regening the HTML)
    _$TABLE:"TABLE",
    _$zeroBorderPadding:"padding:0px;border:0px;",
    _updateCellStyle : function (record, rowNum, colNum, cell, className) {
        if (cell == null) cell = this.getTableElement(rowNum, colNum);
        if (cell == null) return; // cell not currently drawn

        if (!this.showHiliteInCells && 
            colNum == this.grid.getLocalFieldNum(this.grid.getTreeFieldNum())) 
        {
            if (record == null) record = this.getCellRecord(rowNum, colNum);
            // determine the CSS style className if not provided
            if (className == null) className = this.getCellStyle(record, rowNum, colNum);
            // There will be a clip-div around the table.
            // In IE the NOBR also counts as a node.
            var table = cell.childNodes[0];
            while (table && table.tagName != this._$TABLE) table = table.childNodes[0];
            if (table) {
                table.className = className;
                if (this.getCellCSSText) {
                    // Use this._getCompleteCellCSSText
                    // This handles the overflow settings for Moz, converting the 
                    // getCellCSSText stringMethod to a method, etc.
                    cell.style.cssText = isc.StringBuffer.concat(
                                            this._getCompleteCellCSSText(record, rowNum, colNum, className),
                                            this._$zeroBorderPadding);
                }
            }
        }
        
        // Actually style the cell itself
        return isc.GridRenderer.getPrototype()._updateCellStyle.apply(
                                        this, [record, rowNum, colNum, cell, className]);
    },

    //>	@method	treeGridBody.click()	(A)
    // Handle a click in the "open" area of a record specially
    //		@group	event handling	
    //
    //		@return	(boolean)	false == cancel further event processing
    //<
    // Note: We override click rather than putting this logic into rowClick / cellClick, as
    // we don't want folder toggling to occur if the user's mouse is hovering over the open
    // area while the user triggers standard record click handling by hitting the Space-bar.
    
    click : function (event, eventInfo) {
    	var tg = this.grid,
            recordNum = tg.getEventRecordNum(),
            node = tg.getRecord(recordNum);
        // if what they clicked on is a folder, toggle it's state.  The 'open' observation
        // will automaticaly redraw for us
        if (tg.data.isFolder(node) && tg.clickInOpenArea(node)) {
            tg.toggleFolder(node);
            
            // clear out the pointer to the last record clicked, and the last row selected
            // by keyboard navigation. (Prevents index-based keyboard navigation from
            // jumping around due to the number of rows changing as folders toggle)
            tg.clearLastHilite();
            tg._lastRecordClicked = null;
    
            // Note: if you click in the open area to toggle a folder, no nodeClick or
            // folderClick events will be fired, since we've already taken action in
            // response to your click by toggling a folder
            // Return EH.STOP_BUBBLING to stop propogation.
            return isc.EH.STOP_BUBBLING;
        }
        return this.Super("click", arguments);
    },    

    // Override mouseDown and mouseUp in the body to avoid selecting when clicking in open
    // area by default.
    
    //>	@method	treeGridBody.mouseDown()	(A)
    // Handle a click in the open area on mouseDown specially
    //		@group	event handling	
    //
    //		@return	(boolean)	false == cancel further event processing
    //<
    mouseDown : function () {
    	// get the item that was clicked on -- bail if not found
        var rowNum = this.getEventRow(),
            node = this.grid.data.get(rowNum);
        if (node != null && this.grid.clickInOpenArea(node)) {
            // if they clicked in the open area of the record, 
            //	just bail because we're supposed to open the folder instead
            // TreeGrid.click() will actually open the folder
            
            return isc.EH.STOP_BUBBLING;
        } else {
            return this.Super("mouseDown", arguments);
        }
    },

    //>	@method	treeGridBody.mouseUp()	(A)
    // Handle a click in the open area on mouseUp specially
    //		@group	event handling	
    //
    //		@return	(boolean)	false == cancel further event processing
    //<
    mouseUp : function () {
    	// get the item that was clicked on -- bail if not found
    	var rowNum = this.getEventRow(),
    		node = this.grid.data.get(rowNum);
    	if (node != null && this.grid.clickInOpenArea(node)) {
            // don't select the row; on click() we'll open the folder
    		return isc.EH.STOP_BUBBLING;
    	} else {
            // proceed to super (select the row)
    		return this.Super("mouseUp", arguments);
    	}
    }
     
});

isc.TreeGrid.addClassProperties({

	//=	@const	TreeGrid.TREE_FIELD		default field to display a tree
	TREE_FIELD : {name:"nodeTitle", width:"*", treeField:true,

    			getCellValue : function (list,record,recordNum,coNum) {
                    return list.getNodeTitle(record,recordNum, this)
                },
                    
                // return the title for the Header Button over the tree column.
                
                getFieldTitle : function (viewer, fieldNum) {
                    var field = viewer.getField(fieldNum);              
                    if (field.name == "nodeTitle") return viewer.treeFieldTitle;
                    
                    // otherwise just return the title of the field, or failing that, the field's name
                    return field.title || field.name;
                }
    }

});


isc.TreeGrid.addProperties({

	//>	@attr	treeGrid.dataSource		(DataSource or ID : null : IRW)
    // @include dataBoundComponent.dataSource
	//<

	//>	@attr	treeGrid.data		(Tree : null : IRW)
	// A +link{class:Tree} object containing of nested +link{object:TreeNode}s to 
    // display as rows in this TreeGrid.  
    // The <code>data</code> property will typically not be explicitly specified for 
    // databound TreeGrids, where the data is returned from the server via databound component
    // methods such as <code>fetchData()</code>
	//      @visibility external
	//		@group	data
	//<

    //> @attr treeGrid.initialData (List of TreeNode : null : IRA)
    //
    // You can specify the initial set of data for a databound TreeGrid using this property.
    // The value of this attribute should be a list of <code>parentId</code> linked
    // +link{TreeNode}s in a format equivalent to that documented on +link{Tree.data}.
    //
    // @see TreeNode
    // @see Tree.data
    // @visibility external
    // @example initialData
    //<
    
    //> @attr   treeGrid.loadDataOnDemand   (boolean : null : IRW)
    // For databound treeGrid instances, should the entire tree of data be loaded on initial 
    // fetch, or should folders load their children as they are opened.<br>
    // If unset the default +link{resultTree.loadDataOnDemand} setting will be used.
    // @group databinding
    // @visibility external
    // @example initialData
    //<
    
    
    //> @attr   treeGrid.fields       (Array of TreeGridField: null : IRW)
    // An array of field objects, specifying the order, layout, dynamic calculation, and
    // sorting behavior of each field in the treeGrid object. In TreeGrids, the fields
    // array specifies columns. Each field in the fields array is TreeGridField object.
    // <p>
    // If +link{TreeGrid.dataSource} is also set, this value acts as a set of overrides as
    // explained in +link{attr:DataBoundComponent.fields}.
    //
    // @group databinding
    // @see TreeGridField
    // @visibility external
    //<

    //> @object TreeGridField
    //
    // An object literal with a particular set of properties used to configure the display of
    // and interaction with the columns of a +link{TreeGrid}.
    // +link{TreeGrid} is a subclass of +link{ListGrid} and as a result, for all fields except
    // the field containing the +link{Tree} itself (specified by
    // +link{treeGridField.treeField}, all properties settable on
    // +link{ListGridField} apply to TreeGridField as well.
    // <p>
    // This class documents just those properties that are specific to TreeGridFields - see
    // +link{ListGridField} for the set of inherited properties.
    // 
    // @see ListGridField
    // @see TreeGrid.fields
    // @see ListGrid.setFields
    //
    // @treeLocation Client Reference/Grids/TreeGrid
    // @visibility external
    //< 

    // Tree Field
    // ---------------------------------------------------------------------------------------

    //> @attr treeGridField.treeField (boolean : see below : IRW)
    //
    // The field containing <code>treeField: true</code> will display the +link{Tree}.  If no
    // field specifies this property, the first field in +link{TreeGrid.fields} is assigned to
    // display the +link{Tree}.
    // @group treeField
    // @visibility external
    //<

    //>	@attr	treeGrid.treeFieldTitle		(string : "Name" : IR)
	//	Visible title for the tree column (field).
    // @group treeField
    // @visibility external
	//<
	treeFieldTitle:"Name",		
    
    //> @attr treeGrid.autoAssignTreeField (boolean : true : IR)
    // If no field was specified as the "tree-field" (showing indentations for tree hierachy
    // and tree icons), should we assign one of the other fields to be the tree-field?
    // Useful when we want to display a tree or partial tree as a flattened list.
    // @group treeField
    //<
    autoAssignTreeField:true,

    //>	@attr	treeGrid.showRoot		(boolean : false : IR)
    // Specifies whether the root node should be displayed in the treeGrid.
    // <P>
    // This property is only available for "children" modelType trees, hence is not allowed for
    // trees that load data from the server dynamically via +link{fetchData()}.  
    // <P>
    // To get the equivalent of a visible "root" node in a tree that loads data dynamically,
    // add a singular, top-level parent to the data.  However, note that this top-level parent
    // will technically be the only child of root, and the implicit root object will be
    // returned by +link{tree.getRoot,this.data.getRoot()}.
    //
    // @group treeField
    // @visibility external
	//<
	showRoot:false,