datatable.js

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

            UserAction.click(el);
            dt.get("paginator").setPage(4);
            el = dt.getTrEl(0); // record 15
            UserAction.click(el);
            
            var aSelectedRows = dt.getSelectedRows();
            var aSelectedEls = Dom.getElementsByClassName("yui-dt-selected", "*", dt.getTbodyEl());
            var aTestRecords = [
                dt._oRecordSet._records[15].getId()
            ];
            var aTestTrEls = [
                dt.getTbodyEl().rows[0]
            ];

            dt.get("paginator").setPage(1);
            
            aSelectedRows = dt.getSelectedRows();
            aSelectedEls = Dom.getElementsByClassName("yui-dt-selected", "*", dt.getTbodyEl());
            Assert.areSame(1, aSelectedRows.length, "Expected one Record to still be selected");
            ArrayAssert.itemsAreSame(aTestRecords, aSelectedRows, "Expected last record to still be selected");
            Assert.areSame(0, aSelectedEls.length, "Expected no TR els selected");
        },
        
        testSingleSelectAcrossPagesAfterSort: function() {
            var oConfig = {
                paginator: new YAHOO.widget.Paginator({rowsPerPage:5}),
                selectionMode:"single",
                sortedBy: {key:"a"}
            }
            var dt = this.createInstance(null, oConfig);
            dt.subscribe("rowClickEvent",dt.onEventSelectRow,dt);
            dt.get("paginator").setPage(4);
            var el = dt.getTrEl(0); // record 15
            UserAction.click(el);
            dt.sortColumn(dt.getColumn(0));
            el = dt.getTrEl(0); // record 0
            UserAction.click(el);
            
            var aSelectedRows = dt.getSelectedRows();
            var aSelectedEls = Dom.getElementsByClassName("yui-dt-selected", "*", dt.getTbodyEl());
            var aTestRecords = [
                dt._oRecordSet._records[0].getId()
            ];
            var aTestTrEls = [
                dt.getTbodyEl().rows[0]
            ];
            ArrayAssert.itemsAreSame(aTestRecords, aSelectedRows, "Expected only last row of first page (Record index 4) selected");
            ArrayAssert.itemsAreSame(aTestTrEls, aSelectedEls, "Expected only last TR el selected");
            
            dt.get("paginator").setPage(3);
            el = dt.getTrEl(2); // record 12
            UserAction.click(el);
            
            aSelectedRows = dt.getSelectedRows();
            aSelectedEls = Dom.getElementsByClassName("yui-dt-selected", "*", dt.getTbodyEl());
            aTestRecords = [
                dt._oRecordSet._records[12].getId()
            ];
            aTestTrEls = [
                dt.getTbodyEl().rows[2]
            ];
            ArrayAssert.itemsAreSame(aTestRecords, aSelectedRows, "Expected only third row of third page (Record index 12) selected");
            ArrayAssert.itemsAreSame(aTestTrEls, aSelectedEls, "Expected only third TR el selected");
        },

        testShiftSelectAcrossPages: function() {
            var oConfig = {
                paginator: new YAHOO.widget.Paginator({rowsPerPage:5}),
                selectionMode:"standard"
            }
            var dt = this.createInstance(null, oConfig);
            dt.subscribe("rowClickEvent",dt.onEventSelectRow,dt);
            var el = dt.getTrEl(0); // record 0
            UserAction.click(el);
            dt.get("paginator").setPage(2);
            el = dt.getTrEl(1); //record 6
            UserAction.click(el, {"shiftKey":true});
            
            var aSelectedRows = dt.getSelectedRows();
            var aSelectedEls = Dom.getElementsByClassName("yui-dt-selected", "*", dt.getTbodyEl());
            var aTestRecords = [
                dt._oRecordSet._records[0].getId(),
                dt._oRecordSet._records[1].getId(),
                dt._oRecordSet._records[2].getId(),
                dt._oRecordSet._records[3].getId(),
                dt._oRecordSet._records[4].getId(),
                dt._oRecordSet._records[5].getId(),
                dt._oRecordSet._records[6].getId()
            ];
            var aTestTrEls = [
                dt.getTbodyEl().rows[0],
                dt.getTbodyEl().rows[1]
            ];
            ArrayAssert.itemsAreSame(aTestRecords, aSelectedRows, "Expected seven rows across two pages selected");
            ArrayAssert.itemsAreSame(aTestTrEls, aSelectedEls, "Expected first two TR els selected");

            el = dt.getTrEl(2); // record 7
            UserAction.click(el);
            
            aSelectedRows = dt.getSelectedRows();
            aSelectedEls = Dom.getElementsByClassName("yui-dt-selected", "*", dt.getTbodyEl());
            aTestRecords = [
                dt._oRecordSet._records[7].getId()
            ];
            aTestTrEls = [
                dt.getTbodyEl().rows[2]
            ];
            ArrayAssert.itemsAreSame(aTestRecords, aSelectedRows, "Expected only third row of second page selected");
            ArrayAssert.itemsAreSame(aTestTrEls, aSelectedEls, "Expected only third TR el selected");
        },

        testUnselectAllRowsAcrossPages: function() {
            var oConfig = {
                paginator: new YAHOO.widget.Paginator({rowsPerPage:5}),
                selectionMode:"standard"
            }
            var dt = this.createInstance(null, oConfig);
            dt.subscribe("rowClickEvent",dt.onEventSelectRow,dt);
            var el = dt.getTrEl(0); // record 0
            UserAction.click(el);
            dt.get("paginator").setPage(2);
            el = dt.getTrEl(1); // record 6
            UserAction.click(el, {"shiftKey":true});
            dt.unselectAllRows();

            var aSelectedRows = dt.getSelectedRows();
            var aSelectedEls = Dom.getElementsByClassName("yui-dt-selected", "*", dt.getTbodyEl());
            var aTestRecords = [];
            var aTestTrEls = [];
            ArrayAssert.itemsAreSame(aTestRecords, aSelectedRows, "Shift-select: Expected no rows on any page selected");
            ArrayAssert.itemsAreSame(aTestTrEls, aSelectedEls, "Shift-select: Expected no TR els selected");

            el = dt.getTrEl(2); // record 7
            UserAction.click(el);
            el = dt.getTrEl(4); // record 9
            UserAction.click(el, {"ctrlKey":true});
            dt.get("paginator").setPage(3);
            el = dt.getTrEl(3); // record 13
            UserAction.click(el, {"ctrlKey":true});
            el = dt.getTrEl(4); // record 14
            UserAction.click(el, {"ctrlKey":true});
            dt.unselectAllRows();

            aSelectedRows = dt.getSelectedRows();
            aSelectedEls = Dom.getElementsByClassName("yui-dt-selected", "*", dt.getTbodyEl());
            ArrayAssert.itemsAreSame(aTestRecords, aSelectedRows, "Ctrl-select: Expected no rows on any page selected");
            ArrayAssert.itemsAreSame(aTestTrEls, aSelectedEls, "Ctrl-select: Expected no TR els selected");
        },


        testSingleSelectAcrossRowsPerPage: function() {
            var oConfig = {
                paginator: new YAHOO.widget.Paginator({rowsPerPage:5}),
                selectionMode:"single"
            }
            var dt = this.createInstance(null, oConfig);
            dt.subscribe("rowClickEvent",dt.onEventSelectRow,dt);
            var el = dt.getTrEl(0); // record 0
            UserAction.click(el);
            dt.get("paginator").setPage(2);
            el = dt.getTrEl(2); // record 7
            UserAction.click(el);
            dt.get("paginator").setRowsPerPage(10);
            dt.get("paginator").setPage(1);
            //dt.get("paginator").setState({page:1,rowsPerPage:10});
            //dt.render();
            
            var aSelectedRows = dt.getSelectedRows();
            var aSelectedEls = Dom.getElementsByClassName("yui-dt-selected", "*", dt.getTbodyEl());
            var aTestRecords = [
                dt._oRecordSet._records[7].getId()
            ];
            var aTestTrEls = [
                dt.getTbodyEl().rows[7]
            ];
            ArrayAssert.itemsAreSame(aTestRecords, aSelectedRows, "Expected only one row selected");
            ArrayAssert.itemsAreSame(aTestTrEls, aSelectedEls, "Expected seventh TR el selected");
        },
        
        testGetRecordAcrossPages: function() {
            var oConfig = {
                paginator: new YAHOO.widget.Paginator({rowsPerPage:2}),
                selectionMode:"single"
            }
            var dt = this.createInstance(null, oConfig);
            dt.get("paginator").setPage(2);

            // Get Record on this page
            var rs = dt.getRecordSet();
            var oRecord = rs._records[3];
            var sRecordId = oRecord.getId();

            var el = dt.getTbodyEl().rows[1];
            var oTestRecord = dt.getRecord(el);
            Assert.areSame(oRecord, oTestRecord, "Expected to get last Record by el reference");

            oTestRecord = dt.getRecord(3);
            Assert.areSame(oRecord, oTestRecord, "Expected to get last Record by position index");

            oTestRecord = dt.getRecord(sRecordId);
            Assert.areSame(oRecord, oTestRecord, "Expected to get last Record by Record ID");

            // Get Record on a different page
            oRecord = rs._records[1];
            sRecordId = oRecord.getId();
            oTestRecord = dt.getRecord(el);
            Assert.areNotSame(oRecord, oTestRecord, "Last Record on page 1 should NOT match last Record on this page");

            oTestRecord = dt.getRecord(1);
            Assert.areSame(oRecord, oTestRecord, "Expected to get Record 0 by position index");
        }
    });
    var dtPaginationTest = new DataTableTestCase(dtPaginationTemplate);
    
    /**
     *
     *
     * Tests the _cloneObject API.
     *
     *
     */
    var dtCloneObjectTemplate = YAHOO.lang.merge(dtBaseTemplate, {
        name: "DataTable Clone Object Tests",
        
        testUndefined: function() {
            var dt = this.createInstance();
            Assert.areSame(undefined, YAHOO.widget.DataTable._cloneObject(undefined), "Expected undefined");
        },

        testNull: function() {
            var dt = this.createInstance();
            Assert.areSame(null, YAHOO.widget.DataTable._cloneObject(null), "Expected null");
        },
        
        testNaN: function() {
            var dt = this.createInstance();
            Assert.areSame(isNaN(NaN), isNaN(YAHOO.widget.DataTable._cloneObject(NaN)), "Expected NaN");
        },
        
        testZero: function() {
            var dt = this.createInstance();
            Assert.areSame(0, YAHOO.widget.DataTable._cloneObject(0), "Expected 0");
        },
        
        testNumber: function() {
            var dt = this.createInstance();
            Assert.areSame(5, YAHOO.widget.DataTable._cloneObject(5), "Expected 5");
        },
        
        testString: function() {
            var dt = this.createInstance();
            Assert.areSame("abc", YAHOO.widget.DataTable._cloneObject("abc"), "Expected abc");
        },
        
        testFalse: function() {
            var dt = this.createInstance();
            Assert.areSame(false, YAHOO.widget.DataTable._cloneObject(false), "Expected false");
        },
        
        testTrue: function() {
            var dt = this.createInstance();
            Assert.areSame(true, YAHOO.widget.DataTable._cloneObject(true), "Expected true");
        },
        
        testArraySimple: function() {
            var dt = this.createInstance();
            ArrayAssert.itemsAreSame([1,2,3], YAHOO.widget.DataTable._cloneObject([1,2,3]), "Expected simple array");
        },
        
        testObjectSimple: function() {
            var dt = this.createInstance();
            ObjectAssert.propertiesAreEqual({"a":1,"b":2,"c":3}, YAHOO.widget.DataTable._cloneObject({"a":1,"b":2,"c":3}), "Expected simple object");
        }
    });

    var dtCloneObjectTest = new DataTableTestCase(dtCloneObjectTemplate);

    /**
     *
     *
     * Runs tests.
     *
     *
     */
    YAHOO.util.Event.addListener(window, "load", function() {
        var datatablesuite = new TestSuite("DataTable Test Suite");
        datatablesuite.add(dtConstructionTest);
        datatablesuite.add(dtDomAccessorsTest);
        datatablesuite.add(dtRowMutationTest);
        datatablesuite.add(dtSortingTest);
        datatablesuite.add(dtRowSelectionTest);
        datatablesuite.add(dtCellSelectionTest);
        datatablesuite.add(dtPaginationTest);
        datatablesuite.add(dtCloneObjectTest);
        
        TestRunner.add(datatablesuite);
    });
})();