datatable.js

这是YUI的源码及相关示例。里面有很多很炫的Javascript效果。

(function() {

    var gCount = -1;

    var Dom=YAHOO.util.Dom,
        Assert=YAHOO.util.Assert,
        ObjectAssert=YAHOO.util.ObjectAssert,
        ArrayAssert=YAHOO.util.ArrayAssert,
        DateAssert=YAHOO.util.DateAssert,
        UserAction=YAHOO.util.UserAction,
        TestCase = YAHOO.tool.TestCase,
        TestLogger = YAHOO.tool.TestLogger,
        TestRunner = YAHOO.tool.TestRunner,
        TestSuite = YAHOO.tool.TestSuite,

        DataSource = YAHOO.util.DataSource,
        DataTable = YAHOO.widget.DataTable,
        ColumnSet = YAHOO.widget.ColumnSet,
        RecordSet = YAHOO.widget.RecordSet;

    /**
     *
     *
     * DataTable assertions.
     *
     *
     */
    var DataTableAssert = {
        areSameRow: function(elTr, oRecord, dt,  msg) {
            Assert.areSame("tr", elTr.tagName.toLowerCase(), "Expected a TR element: " + msg);
            Assert.areSame(elTr.id, oRecord.getId(), "TR ID and Record IDs don't match: " + msg);
        },
        
        areSameCell: function(elTd, oRecord, oColumn, dt, msg) {
            Assert.areSame("td", elTd.tagName.toLowerCase(), "Expected a TD element: " + msg);
            Assert.areSame(elTd.cellIndex, oColumn.getKeyIndex(), "TR index and Column key index don't match: " + msg);
            this.areSameRow(elTd.parentNode, oRecord, dt, msg);
        }
    };

    /**
     *
     *
     * Base DataTable test case.
     *
     *
     */
    function DataTableTestCase(template) {
        DataTableTestCase.superclass.constructor.call(this, template);
    };
    YAHOO.lang.extend(DataTableTestCase, TestCase);

    DataTableTestCase.prototype.setUp = function() {
        // Create container anew
        this.container = document.createElement("div");
        document.body.appendChild(this.container);
        
        // Create DataSource anew
        this.datasource = new YAHOO.util.DataSource(this.dsData, this.dsConfig);
    };

    DataTableTestCase.prototype.tearDown = function() {
        // Destroy DataTable
        this.datatable.destroy();
        this.datatable = null;
        
        //  Destroy container
        if(this.container !== null) {
            YAHOO.util.Event.purgeElement(this.container, true);
            document.body.removeChild(this.container);
            this.container = null;
        }
        
        // TODO: need a destroy method
        this.datasource = null;
    };

    DataTableTestCase.prototype.createInstance = function(oDT, oConfig) {
        oDT = oDT || DataTable;
        this.datatable = new oDT(this.container, this.columns, this.datasource, oConfig);
        gCount++;
        return this.datatable;
    };

    /**
     *
     *
     * Base DataTable test template. Sets up values for a DataTable instance.
     *
     *
     */
    var dtBaseTemplate = {
        name: "DataTable Base Tests",
        
        dsData: [
            {a:"0a",b:"0b",c:"0c"},
            {a:"1a",b:"1b",c:"1c"},
            {a:"2a",b:"2b",c:"2c"},
            {a:"3a",b:"3b",c:"3c"}
        ],
            
        dsConfig: {
            responseType:YAHOO.util.DataSource.TYPE_JSARRAY,
            responseSchema:{fields:["a","b","c"]}
        },

        columns: [{key:"a"},{key:"b"},{key:"c"}]
    };
    
    /**
     *
     *
     * Tests various construction use cases.
     *
     *
     */
    var dtConstructionTemplate = YAHOO.lang.merge(dtBaseTemplate, {
        name: "DataTable Construction Tests",

        testConstruction: function() {
            var dt = this.createInstance();

            Assert.isInstanceOf(DataTable, this.datatable, "Failed to create DataTable instance");
            Assert.isInstanceOf(ColumnSet, this.datatable.getColumnSet(), "Failed to create ColumnSet instance");
            Assert.isInstanceOf(RecordSet, this.datatable.getRecordSet(), "Failed to create RecordSet instance");
            Assert.areSame(this.dsData.length, this.datatable.getRecordSet().getLength(), "Unexpected RecordSet length");

        },

        testNestedHeaders: function() {
            //TODO
            var dt = this.createInstance();
        },
        
        testMultipleInstances: function() {
            var multiple = 3; // Set how many instances (total) to create for this test case
            
            // Create first instance
            var dt = this.createInstance();
            var cs = dt.getColumnSet();
            var oColumn = cs.keys[0];

            // Create more instances
            for(var i=1; i<multiple; i++) {
                this["container"+i] = document.createElement("div");
                this["container"+i].id = "testDTContainer"+i;
                document.body.appendChild(this["container"+i]);

                this["datasource"+i] = new YAHOO.util.DataSource(this.dsData, this.dsConfig);
                
                this["dt"+i] = new YAHOO.widget.DataTable(this["container"+i], this.columns, this["datasource"+i]);
                this["cs"+i] = this["dt"+i].getColumnSet();
                gCount++;
            }
            
            // Test getColumn() on first instance
            var el = dt.getTheadEl().rows[0].cells[0];
            var oTestColumn = dt.getColumn(el);
            Assert.areSame(oColumn, oTestColumn, "Expected to get Column by el reference");

            //oTestColumn = dt.getColumn(el.id);
            //Assert.areSame(oColumn, oTestColumn, "Expected to get Column by DOM ID");

            oTestColumn = dt.getColumn(0);
            Assert.areSame(oColumn, oTestColumn, "Expected to get Column by key index");

            oTestColumn = cs.getColumn("a");
            Assert.areSame(oColumn, oTestColumn, "Expected to get Column by key (ColumnSet method)");

            oTestColumn = cs.getColumnById(oTestColumn.getId());
            Assert.areSame(oColumn, oTestColumn, "Expected to get Column by Column ID (ColumnSet method)");
            
            // Test getColumn() on other instances
            for(var i=1; i<multiple; i++) {
                oColumn = this["cs"+i].keys[0];
                
                el = this["dt"+i].getTheadEl().rows[0].cells[0];
                oTestColumn = this["dt"+i].getColumn(el);
                Assert.areSame(oColumn, oTestColumn, "Expected to get Column by el reference");

                //oTestColumn = this["dt"+i].getColumn(el.id);
                //Assert.areSame(oColumn, oTestColumn, "Expected to get Column by DOM ID");

                oTestColumn = this["dt"+i].getColumn(0);
                Assert.areSame(oColumn, oTestColumn, "Expected to get Column by key index");

                oTestColumn = this["cs"+i].getColumn("a");
                Assert.areSame(oColumn, oTestColumn, "Expected to get Column by key");

                oTestColumn = this["cs"+i].getColumnById(oTestColumn.getId());
                Assert.areSame(oColumn, oTestColumn, "Expected to get Column by Column ID");
            }

            // Destroy the other instances (first instance gets destroyed by the tearDown() function)
            for(var i=1; i<3; i++) {
                this["dt"+i].destroy();
                this["dt"+i] = null;

                if (this["container"+i] != null) {
                    YAHOO.util.Event.purgeElement(this["container"+i], true);
                    document.body.removeChild(this["container"+i]);
                }

                this.datasource = null;
            }
        }
    });
    var dtConstructionTest = new DataTableTestCase(dtConstructionTemplate)

    /**
     *
     *
     * Tests DOM element getters.
     *
     *
     */
    var dtDomAccessorsTemplate = YAHOO.lang.merge(dtBaseTemplate, {
        name: "DataTable DOM Accessors Tests",

        testGetContainerEl: function() {
            var dt = this.createInstance();

            var elContainer = dt.getContainerEl();
            
            Assert.areSame("div", elContainer.tagName.toLowerCase(), "Expected a DIV element");
            Assert.areSame(true, YAHOO.util.Dom.hasClass(elContainer, "yui-dt"), "Failed to apply yui-dt classname");
        },

        testGetMsgTbodyEl: function() {
            var dt = this.createInstance();
            var elContainer = dt.getContainerEl();
            var elTbody = dt.getMsgTbodyEl();
            
            Assert.areSame("tbody", elTbody.tagName.toLowerCase(), "Expected a TBODY element");
            Assert.areSame(elContainer.lastChild.tBodies[0], elTbody, "Expected to get first TBODY element of the TABLE");
        },

        testGetTbodyEl: function() {
            var dt = this.createInstance();
            var elContainer = dt.getContainerEl();
            var elTbody = dt.getTbodyEl();
            
            Assert.areSame("tbody", elTbody.tagName.toLowerCase(), "Expected a TBODY element");
            Assert.areSame(elContainer.lastChild.tBodies[elContainer.lastChild.tBodies.length-1], elTbody, "Expected to get last TBODY element of the TABLE");
        },

        testGetFirstTrEl: function() {
            var dt = this.createInstance();
            var elRow = dt.getFirstTrEl();
            var oTestRecord = dt._oRecordSet._records[0];
            var elTbody = dt.getContainerEl().lastChild.tBodies[dt.getContainerEl().lastChild.tBodies.length-1];

            Assert.areSame(elTbody.rows[0], elRow, "Expected to get first TR element of the TBODY");
            Assert.areSame(oTestRecord.getId(), elRow.id, "Unexpected DOM ID");
            DataTableAssert.areSameRow(elRow, oTestRecord, dt, "Expected row and Record to be in sync");
        },

        testGetLastTrEl: function() {
            var dt = this.createInstance();
            var elRow = dt.getLastTrEl();
            var oTestRecord = dt._oRecordSet._records[dt.getTbodyEl().rows.length-1];
            var elTbody = dt.getContainerEl().lastChild.tBodies[dt.getContainerEl().lastChild.tBodies.length-1];

            Assert.areSame(elTbody.rows[elTbody.rows.length-1], elRow, "Expected to get last TR element of the TBODY");
            Assert.areSame(oTestRecord.getId(), elRow.id, "Unexpected DOM ID");
            DataTableAssert.areSameRow(elRow, oTestRecord, dt, "Expected row and Record to be in sync");
        },
        
        testGetTrEl: function() {
            var dt = this.createInstance();
            var elRow = dt.getTrEl(dt._oRecordSet._records[0].getId());
            var elFirstTr = dt.getTbodyEl().rows[0];

            Assert.areSame(elFirstTr, elRow, "By DOM ID: TR el mismatch");

            elRow = dt.getTrEl(dt.getTbodyEl().rows[0]);

            Assert.areSame(elFirstTr, elRow, "By el ref: TR el mismatch");

            elRow = dt.getTrEl(0);

            Assert.areSame(elFirstTr, elRow, "Page row index: TR el mismatch");

            elRow = dt.getTrEl(dt._oRecordSet._records[0]);

            Assert.areSame(elFirstTr, elRow, "Record instance: TR el mismatch");
        },

        testGetNextTrEl: function() {
            var dt = this.createInstance();
            var elFirstTr = dt.getTbodyEl().rows[0];
            var elSecondTr = dt.getTbodyEl().rows[1];
            var elTr = dt.getNextTrEl(elFirstTr);

            Assert.areSame(elSecondTr, elTr, "Expected second TR element");

            var elPenultimateTr = dt.getTbodyEl().rows[dt.getTbodyEl().rows.length-2];
            var elLastTr = dt.getTbodyEl().rows[dt.getTbodyEl().rows.length-1];
            elTr = dt.getNextTrEl(elPenultimateTr);