datatable.js

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

            Assert.areSame(elLastTr, elTr, "Expected last TR element");

            elTr = dt.getNextTrEl(elLastTr);

            Assert.areSame(null, elTr, "Expected null");
        },

        testGetPreviousTrEl: function() {
            var dt = this.createInstance();
            var elFirstTr = dt.getTbodyEl().rows[0];
            var elTr = dt.getPreviousTrEl(elFirstTr);

            Assert.areSame(null, elTr, "Expected null");

            var elSecondTr = dt.getTbodyEl().rows[1];
            elTr = dt.getPreviousTrEl(elSecondTr);

            Assert.areSame(elFirstTr, elTr, "Expected first TR element");

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

            Assert.areSame(elPenultimateTr, elTr, "Expected penultimate TR element");
        },

        testGetFirstTdEl: function() {
            var dt = this.createInstance();
            var oTestRecord = dt._oRecordSet._records[0];
            var oTestColumn = dt._oColumnSet.keys[0];
            var elCell = dt.getFirstTdEl();

            //Assert.areSame(dt.getId()+"-bdrow0-cell0", elCell.id, "Unexpected DOM ID");
            Assert.areSame(dt._elTbody.rows[0].cells[0], elCell, "Unexpected DOM element");
            DataTableAssert.areSameCell(elCell, oTestRecord, oTestColumn, dt, "Expected cell, Record, and Column to be in sync");
        },

        testGetLastTdEl: function() {
            var dt = this.createInstance();
            var nRowIndex = dt._elTbody.rows.length-1;
            var nColumnIndex = dt._elTbody.rows[nRowIndex].cells.length-1;
            var oRecordSet = dt._oRecordSet;
            var oColumnSet = dt._oColumnSet;
            var oTestRecord = dt._oRecordSet._records[oRecordSet.getLength()-1];
            var oTestColumn = dt._oColumnSet.keys[oColumnSet.keys.length-1];
            var elCell = dt.getLastTdEl();
    
            Assert.areSame(dt._elTbody.rows[nRowIndex].cells[nColumnIndex], elCell, "Unexpected DOM element");
            DataTableAssert.areSameCell(elCell, oTestRecord, oTestColumn, dt, "Expected cell, Record, and Column to be in sync");
        },

        testGetTdEl: function() {
            var dt = this.createInstance();
            var elFirstTd = dt.getTbodyEl().rows[0].cells[0];    
            var elCell = dt.getTdEl(dt.getTbodyEl().rows[0].cells[0]);

            Assert.areSame(elFirstTd, elCell, "By el ref: TD el mismatch");

            var oRecord = dt._oRecordSet._records[0];
            var oColumn = dt._oColumnSet.keys[0];
            elCell = dt.getTdEl({record:oRecord, column:oColumn});

            Assert.areSame(elFirstTd, elCell, "By obj literal: TD el mismatch");
        },

        testGetTdLinerEl: function() {
            var dt = this.createInstance();
            var elFirstTdLiner = dt.getTbodyEl().rows[0].cells[0].firstChild;
            var elLiner = dt.getTdLinerEl(dt.getTbodyEl().rows[0].cells[0]);

            Assert.areSame(elFirstTdLiner, elLiner, "By el ref: liner el mismatch");

            var oRecord = dt._oRecordSet._records[0];
            var oColumn = dt._oColumnSet.keys[0];
            elLiner = dt.getTdLinerEl({record:oRecord, column:oColumn});

            Assert.areSame(elFirstTdLiner, elLiner, "By obj literal: liner el mismatch");
        },

        testGetNextTdEl: function() {
            var dt = this.createInstance();
            var elFirstTd = dt.getFirstTdEl();
            var elSecondTd = elFirstTd.nextSibling;
            var elLastTd = dt.getLastTdEl();
            var elPenultimateTd = elLastTd.previousSibling;

            var elTd = dt.getNextTdEl(elFirstTd);

            Assert.areSame(elSecondTd, elTd, "Expected second TD element");

            elTd = dt.getNextTdEl(elPenultimateTd);

            Assert.areSame(elLastTd, elTd, "Expected last TD element");

            elTd = dt.getNextTdEl(elLastTd);

            Assert.areSame(null, elTd, "Expected null");
        },

        testGetPreviousTdEl: function() {
            var dt = this.createInstance();
            var elFirstTd = dt.getFirstTdEl();
            var elSecondTd = elFirstTd.nextSibling;
            var elLastTd = dt.getLastTdEl();
            var elPenultimateTd = elLastTd.previousSibling;

            var elTd = dt.getPreviousTdEl(elFirstTd);

            Assert.areSame(null, elTd, "Expected null");

            elTd = dt.getPreviousTdEl(elSecondTd);

            Assert.areSame(elFirstTd, elTd, "Expected first TD element");

            elTd = dt.getPreviousTdEl(elLastTd);
            
            Assert.areSame(elPenultimateTd, elTd, "Expected penultimate TD element");
        },

        testGetsAfterDeleteRow: function() {
            var dt = this.createInstance();
            var oRecord = dt.getRecord(0);
            dt.deleteRow(0);
            var elTestRow = dt.getTrEl(oRecord);

            Assert.areSame(null, elTestRow, "Expected null TR el returned");

            var nTestIndex = dt.getTrIndex(oRecord);

            Assert.areSame(null, nTestIndex, "Expected null TR index returned");

            var oTestRecord = dt.getRecord(oRecord);

            Assert.areSame(null, oTestRecord, "Expected null Record returned");

            oTestRecord = dt.getRecordSet().getRecord(oRecord);

            Assert.areSame(null, oTestRecord, "Expected null Record returned (RecordSet method)");
        }
    });
    var dtDomAccessorsTest = new DataTableTestCase(dtDomAccessorsTemplate);

    /**
     *
     *
     * Tests row mutation APIs.
     *
     *
     */
    var dtRowMutationTemplate = YAHOO.lang.merge(dtBaseTemplate, {
        name: "DataTable Row Mutation Tests",
        testInsertRow: function() {
            var dt = this.createInstance();
            dt.addRow({a:"4a",b:"4b",c:"4c"}, 0);
            
            var oTestRecord = dt._oRecordSet._records[0];
            var elRow = dt.getFirstTrEl();
            Assert.areSame(oTestRecord.getId(), elRow.id, "Unexpected DOM ID");
            DataTableAssert.areSameRow(elRow, oTestRecord, dt, "Expected row and Record to be in sync");
        },
        
        testAppendRow: function() {
            var dt = this.createInstance();
            dt.addRow({a:"4a",b:"4b",c:"4c"});
            
            var oTestRecord = dt._oRecordSet._records[4];
            var elRow = dt.getLastTrEl();
            Assert.areSame(oTestRecord.getId(), elRow.id, "Unexpected DOM ID");
            DataTableAssert.areSameRow(elRow, oTestRecord, dt, "Expected row and Record to be in sync");
        },

        testUpdateRow: function() {
            var dt = this.createInstance();
            var newData = {a:"4a",b:"4b",c:"4c"};
            dt.updateRow(0, newData);
            
            var oData = dt._oRecordSet._records[0].getData();
            Assert.areSame(newData, oData, "Failed to update by Record index (0)");

            newData = {a:"8a",b:"8b",c:"8c"};
            dt.updateRow(3, newData);

            oData = dt._oRecordSet._records[3].getData();
            Assert.areSame(newData, oData, "Failed to update by Record index (3)");

            newData = {a:"5a",b:"5b",c:"5c"};
            dt.updateRow(dt.getRecord(0), newData);

            oData = dt._oRecordSet._records[0].getData();
            Assert.areSame(newData, oData, "Failed to update by Record instance");

            newData = {a:"6a",b:"6b",c:"6c"};
            dt.updateRow(dt.getRecord(0).getId(), newData);

            oData = dt._oRecordSet._records[0].getData();
            Assert.areSame(newData, oData, "Failed to update by TR el ID");

            newData = {a:"7a",b:"7b",c:"7c"};
            dt.updateRow(Dom.get(dt.getRecord(0).getId()), newData);

            oData = dt._oRecordSet._records[0].getData();
            Assert.areSame(newData, oData, "Failed to update by TR el reference");
        },

        testUpdateInvalidRow: function() {
            var dt = this.createInstance();
            var oRecord = dt.getRecord(0);
            dt.deleteRow(0);
            var oData = {a:"4a", b:"4b", c:"4b"};
            dt.updateRow(oRecord, oData);

            var oTestRecords = dt.getRecordSet().getRecords();
            for(var i=0; i<oTestRecords.length; i++) {
                var oTestData = oTestRecords[i].getData();
                Assert.areNotSame(oData, oTestData, "Record "+i+"should not have updated");
            }
        },

        testDeleteRow: function() {
            //TODO: Test all the arg sigs of deleteRow() method
            var dt = this.createInstance();
            dt.deleteRow(0);
            
            var nRecordsLength = dt.getRecordSet().getLength();
            var nTrElsLength = dt.getTbodyEl().rows.length;
            Assert.areSame(3, nRecordsLength, "Expected 3 Records left");
            Assert.areSame(3, nTrElsLength, "Expected 3 TR els left");

            dt.deleteRow(0);
            
            nRecordsLength = dt.getRecordSet().getLength();
            nTrElsLength = dt.getTbodyEl().rows.length;
            Assert.areSame(2, nRecordsLength, "Expected 2 Records left");
            Assert.areSame(2, nTrElsLength, "Expected 2 TR els left");

            dt.deleteRow(0);
            
            nRecordsLength = dt.getRecordSet().getLength();
            nTrElsLength = dt.getTbodyEl().rows.length;
            Assert.areSame(1, nRecordsLength, "Expected 1 Records left");
            Assert.areSame(1, nTrElsLength, "Expected 1 TR els left");

            dt.deleteRow(0);
            
            nRecordsLength = dt.getRecordSet().getLength();
            nTrElsLength = dt.getTbodyEl().rows.length;
            Assert.areSame(0, nRecordsLength, "Expected 0 Records left");
            Assert.areSame(0, nTrElsLength, "Expected 0 TR els left");
            Assert.areSame("", dt.getMsgTbodyEl().rows[0].cells[0].style.display, "Expected message displayed");
            Assert.areSame(true, Dom.hasClass(dt.getMsgTbodyEl().rows[0].cells[0], "yui-dt-empty"), "Expected empty message");
        },

        testDeleteAppendThenInsert: function() {
            var dt = this.createInstance();
            dt.deleteRow(dt.getFirstTrEl());
            dt.addRow({a:"4a",b:"4b",c:"4c"});
            dt.addRow({a:"5a",b:"5b",c:"5c"},0);

            var elRow = dt.getFirstTrEl();
            var oTestRecord = dt._oRecordSet._records[0];
            Assert.areSame(oTestRecord.getId(), elRow.id, "Unexpected DOM ID");
            DataTableAssert.areSameRow(elRow, oTestRecord, dt, "Expected row and Record to be in sync");

            elRow = dt.getLastTrEl();
            oTestRecord = dt._oRecordSet._records[dt.getTbodyEl().rows.length-1];
            Assert.areSame(oTestRecord.getId(), elRow.id, "Unexpected DOM ID");
            DataTableAssert.areSameRow(elRow, oTestRecord, dt, "Expected row and Record to be in sync");
        },

        testDeleteRowsInReverse: function() {
            var dt = this.createInstance();
            dt.deleteRow(3);
            
            var nRecordsLength = dt.getRecordSet().getLength();
            var nTrElsLength = dt.getTbodyEl().rows.length;
            Assert.areSame(3, nRecordsLength, "Expected 3 Records left");
            Assert.areSame(3, nTrElsLength, "Expected 3 TR els left");

            dt.deleteRow(2);
            
            nRecordsLength = dt.getRecordSet().getLength();
            nTrElsLength = dt.getTbodyEl().rows.length;
            Assert.areSame(2, nRecordsLength, "Expected 2 Records left");
            Assert.areSame(2, nTrElsLength, "Expected 2 TR els left");

            dt.deleteRow(1);
            
            nRecordsLength = dt.getRecordSet().getLength();
            nTrElsLength = dt.getTbodyEl().rows.length;
            Assert.areSame(1, nRecordsLength, "Expected 1 Records left");
            Assert.areSame(1, nTrElsLength, "Expected 1 TR els left");

            dt.deleteRow(0);
            
            nRecordsLength = dt.getRecordSet().getLength();
            nTrElsLength = dt.getTbodyEl().rows.length;
            Assert.areSame(0, nRecordsLength, "Expected 0 Records left");
            Assert.areSame(0, nTrElsLength, "Expected 0 TR els left");