datatable.js

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

            var el = Dom.get(dt.getRecord(0).getId());
            UserAction.click(el);
            
            var aSelectedRows = dt.getSelectedRows();
            var aSelectedEls = Dom.getElementsByClassName("yui-dt-selected", "*", dt.getTbodyEl());
            var elTestRow = dt.getTbodyEl().rows[0];
            ArrayAssert.itemsAreSame([elTestRow.id], aSelectedRows, "Expected only first row selected");
            ArrayAssert.itemsAreSame([el], aSelectedEls, "Expected only first TR el selected");

            el = Dom.get(dt.getRecord(1).getId());
            UserAction.click(el);
            el = Dom.get(dt.getRecord(2).getId());
            UserAction.click(el);
            el = Dom.get(dt.getRecord(3).getId());
            UserAction.click(el);
            
            aSelectedRows = dt.getSelectedRows();
            aSelectedEls = Dom.getElementsByClassName("yui-dt-selected", "*", dt.getTbodyEl());
            var elTestRow = dt.getTbodyEl().rows[3];
            ArrayAssert.itemsAreSame([elTestRow.id], aSelectedRows, "Expected only fourth row selected");
            ArrayAssert.itemsAreSame([el], aSelectedEls, "Expected only fourth TR el selected");
        },
        
        testShiftSelect: function() {
            var dt = this.createInstance();
            dt.subscribe("rowClickEvent",dt.onEventSelectRow,dt);
            var el = Dom.get(dt.getRecord(0).getId());
            UserAction.click(el);
            el = Dom.get(dt.getRecord(3).getId());
            UserAction.click(el, {"shiftKey":true});
            
            var aSelectedRows = dt.getSelectedRows();
            var aSelectedEls = Dom.getElementsByClassName("yui-dt-selected", "*", dt.getTbodyEl());
            var aTestRecordIds = [
                dt._oRecordSet._records[0].getId(),
                dt._oRecordSet._records[1].getId(),
                dt._oRecordSet._records[2].getId(),
                dt._oRecordSet._records[3].getId()
            ];
            var aTestTrEls = [
                dt.getTbodyEl().rows[0],
                dt.getTbodyEl().rows[1],
                dt.getTbodyEl().rows[2],
                dt.getTbodyEl().rows[3]
            ];
            ArrayAssert.itemsAreSame(aTestRecordIds, aSelectedRows, "Expected four rows selected");
            ArrayAssert.itemsAreSame(aTestTrEls, aSelectedEls, "Expected four TR els selected");

            el = Dom.get(dt.getRecord(2).getId());
            UserAction.click(el);
            
            aSelectedRows = dt.getSelectedRows();
            aSelectedEls = Dom.getElementsByClassName("yui-dt-selected", "*", dt.getTbodyEl());
            aTestRecordIds = [
                dt._oRecordSet._records[2].getId()
            ];
            aTestTrEls = [
                dt.getTbodyEl().rows[2]
            ];
            ArrayAssert.itemsAreSame(aTestRecordIds, aSelectedRows, "Expected only third row selected");
            ArrayAssert.itemsAreSame(aTestTrEls, aSelectedEls, "Expected only third TR el selected");

            el = Dom.get(dt.getRecord(0).getId());
            UserAction.click(el, {"shiftKey":true});
            
            aSelectedRows = dt.getSelectedRows();
            aSelectedEls = Dom.getElementsByClassName("yui-dt-selected", "*", dt.getTbodyEl());
            aTestRecordIds = [
                dt._oRecordSet._records[2].getId(),
                dt._oRecordSet._records[1].getId(),
                dt._oRecordSet._records[0].getId()
            ];
            aTestTrEls = [
                dt.getTbodyEl().rows[0],
                dt.getTbodyEl().rows[1],
                dt.getTbodyEl().rows[2]
            ];
            ArrayAssert.itemsAreSame(aTestRecordIds, aSelectedRows, "Expected three rows selected");
            ArrayAssert.itemsAreSame(aTestTrEls, aSelectedEls, "Expected three TR els selected");
        },
        
        testUnselectAllRows: function() {
            var dt = this.createInstance();
            dt.subscribe("rowClickEvent",dt.onEventSelectRow,dt);
            var el = Dom.get(dt.getRecord(0).getId());
            UserAction.click(el);
            el = Dom.get(dt.getRecord(3).getId());
            UserAction.click(el, {"shiftKey":true});
            dt.unselectAllRows();

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

            el = Dom.get(dt.getRecord(1).getId());
            UserAction.click(el);
            el = Dom.get(dt.getRecord(3).getId());
            UserAction.click(el, {"ctrlKey":true});
            dt.unselectAllRows();

            aSelectedRows = dt.getSelectedRows();
            aSelectedEls = Dom.getElementsByClassName("yui-dt-selected", "*", dt.getTbodyEl());
            ArrayAssert.itemsAreSame(aTestRecordIds, aSelectedRows, "Ctrl-select: Expected no rows selected");
            ArrayAssert.itemsAreSame(aTestTrEls, aSelectedEls, "Ctrl-select: Expected no rows selected");
        },
        
        testAppendX3ThenDeleteSingleSelectedFromTop: function() {
            var i;
            var dt = this.createInstance(null, {selectionMode:"single"});
            dt.subscribe("rowClickEvent",dt.onEventSelectRow,dt);
            dt.addRow({a:"4a",b:"4b",c:"4c"});
            dt.addRow({a:"5a",b:"5b",c:"5c"});
            var el = Dom.get(dt.getRecord(0).getId());
            UserAction.click(el);
            var rows = dt.getSelectedRows();
            for(i=0; i<rows.length; i++) {
                var row = rows[i];
                //TODO: Support passing in Record ID to dt.getRecordIndex and rs.getRecordIndex
                dt.deleteRow(dt.getRecordIndex(dt.getRecord(row)));
            }
            
            var elRow = dt.getFirstTrEl();
            var oTestRecord = dt._oRecordSet._records[0];
            Assert.areSame(5, dt.getRecordSet().getLength(), "Expected 5 Records");
            Assert.areSame(5, dt.getTbodyEl().rows.length, "Expected 5 TR els");
            Assert.areSame(oTestRecord.getId(), elRow.id, "Unexpected DOM ID");
            DataTableAssert.areSameRow(elRow, oTestRecord, dt, "Row mismatch");

            el = Dom.get(dt.getRecord(1).getId());
            UserAction.click(el);
            rows = dt.getSelectedRows();
            for(i=0; i<rows.length; i++) {
                var row = rows[i];
                //TODO: Support passing in Record ID to dt.getRecordIndex and rs.getRecordIndex
                dt.deleteRow(dt.getRecordIndex(dt.getRecord(row)));
            }
            
            elRow = dt.getFirstTrEl();
            oTestRecord = dt._oRecordSet._records[0];
            Assert.areSame(4, dt.getRecordSet().getLength(), "Expected 4 Records");
            Assert.areSame(4, dt.getTbodyEl().rows.length, "Expected 4 TR els");
            Assert.areSame(oTestRecord.getId(), elRow.id, "Unexpected DOM ID");
            DataTableAssert.areSameRow(elRow, oTestRecord, dt, "Row mismatch");
        },

        testIsSelected: function() {
            var dt = this.createInstance();
            var elRow = dt.getFirstTrEl();
            
            // TR el reference agnst row selection
            dt.selectRow(elRow);
            Assert.areSame(true, dt.isSelected(elRow), "Failed to detect selected row by TR");
            dt.unselectRow(elRow);
            Assert.areSame(false, dt.isSelected(elRow), "Failed to detect unselected row by TR");
            
            // TD el reference agnst row selection
            dt.selectRow(elRow.cells[0]);
            Assert.areSame(true, dt.isSelected(elRow.cells[0]), "Failed to detect selected row by TD");
            dt.unselectRow(elRow.cells[0]);
            Assert.areSame(false, dt.isSelected(elRow.cells[0]), "Failed to detect unselected by row TD");

            // Child elements agnst row selection
            dt.selectRow(elRow.cells[0].firstChild);
            Assert.areSame(true, dt.isSelected(elRow.cells[0].firstChild), "Failed to detect selected row by liner el");
            dt.unselectRow(elRow.cells[0].firstChild);
            Assert.areSame(false, dt.isSelected(elRow.cells[0].firstChild), "Failed to detect unselected by row liner el");
            
            // TD el reference agnst cell selection
            dt.selectCell(elRow.cells[0]);
            Assert.areSame(true, dt.isSelected(elRow.cells[0]), "Failed to detect selected cell by TD");
            dt.unselectCell(elRow.cells[0]);
            Assert.areSame(false, dt.isSelected(elRow.cells[0]), "Failed to detect unselected cell by TD");

            // Child elements agnst cell selection
            dt.selectCell(elRow.cells[0].firstChild);
            Assert.areSame(true, dt.isSelected(elRow.cells[0].firstChild), "Failed to detect selected cell by liner el");
            dt.unselectCell(elRow.cells[0].firstChild);
            Assert.areSame(false, dt.isSelected(elRow.cells[0].firstChild), "Failed to detect unselected cell by liner el");

            // Record instance
            dt.selectRow(dt._oRecordSet._records[0]);
            Assert.areSame(true, dt.isSelected(dt._oRecordSet._records[0]), "Failed to detect selected row by Record instance");
            dt.unselectRow(dt._oRecordSet._records[0]);
            Assert.areSame(false, dt.isSelected(dt._oRecordSet._records[0]), "Failed to detect unselected row by Record instance");
            
            // RecordSet index
            dt.selectRow(0);
            Assert.areSame(true, dt.isSelected(0), "Failed to detect selected row by RecordSet index");
            dt.unselectRow(0);
            Assert.areSame(false, dt.isSelected(0), "Failed to detect unselected row by RecordSet index");
            
            // {record: oRecord, column: oColumn}
            dt.selectCell({record:dt._oRecordSet._records[0], column: dt._oColumnSet.keys[0]});
            Assert.areSame(true, dt.isSelected({record:dt._oRecordSet._records[0], column: dt._oColumnSet.keys[0]}), "Failed to detect selected cell by object literal");
            dt.unselectCell({record:dt._oRecordSet._records[0], column: dt._oColumnSet.keys[0]});
            Assert.areSame(false, dt.isSelected({record:dt._oRecordSet._records[0], column: dt._oColumnSet.keys[0]}), "Failed to detect unselected cell by object literal");
        }
    });
    var dtRowSelectionTest = new DataTableTestCase(dtRowSelectionTemplate);

    /**
     *
     *
     * Tests cell selection APIs.
     *
     *
     */
    var dtCellSelectionTemplate = YAHOO.lang.merge(dtBaseTemplate, {
        name: "DataTable Row Selection Tests"
    });
    var dtCellSelectionTest = new DataTableTestCase(dtCellSelectionTemplate);
    
    /**
     *
     *
     * Tests pagination APIs.
     *
     *
     */
    var dtPaginationTemplate = YAHOO.lang.merge(dtBaseTemplate, {
        name: "DataTable Pagination Tests",
        
       dsData: [
            {a:0},{a:1},{a:2},{a:3},{a:4},
            {a:5},{a:6},{a:7},{a:8},{a:9},
            {a:10},{a:11},{a:12},{a:13},{a:14},
            {a:15},{a:16},{a:17},{a:18},{a:19},
            {a:20},{a:21}
        ],

        dsConfig: {
            responseType:YAHOO.util.DataSource.TYPE_JSARRAY,
            responseSchema:{fields:["a"]}
        },

        columns: [{key:"a", sortable:true}],

        testPagination: function() {
            var oConfig = {
                paginator: new YAHOO.widget.Paginator({rowsPerPage:5})
            }
            var dt = this.createInstance(null, oConfig);
                Assert.areSame(5, dt.get("paginator").getTotalPages(), "Expected 5 pages");
        },

        testPageThenSort: function() {
            var oConfig = {
                paginator: new YAHOO.widget.Paginator({rowsPerPage:5}),
                sortedBy: {key:"a"}
            }
            var dt = this.createInstance(null, oConfig);
            dt.get("paginator").setPage(2);
            dt.sortColumn(dt.getColumn("a"));
            
            var elRow = dt.getFirstTrEl();
            var oTestRecord = dt._oRecordSet._records[0];
            Assert.areSame(1, dt.get("paginator").getCurrentPage(), "Expected to be on page 1");
            Assert.areSame(oTestRecord.getId(), elRow.id, "Unexpected DOM ID");
            DataTableAssert.areSameRow(elRow, oTestRecord, dt, "Row mismatch");

            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, "Row mismatch");
        },

        testDeleteRowsCurrentPage: function() {
            var oConfig = {
                paginator: new YAHOO.widget.Paginator({rowsPerPage:5})
            }
            var dt = this.createInstance(null, oConfig);
            dt.deleteRows(0,2);
            
            Assert.areSame(4, dt.get("paginator").getTotalPages(), "Expected 4 pages");
        },
        
         testDeleteRowsDifferentPage: function() {
            var oConfig = {
                paginator: new YAHOO.widget.Paginator({rowsPerPage:5})
            }
            var dt = this.createInstance(null, oConfig);
            dt.get("paginator").setPage(5);
            dt.deleteRows(0,2);
            
            Assert.areSame(4, dt.get("paginator").getTotalPages(), "Expected 4 pages");
            Assert.areSame(4, dt.get("paginator").getCurrentPage(), "Expected to be on page 4");
        },
        
        testSingleSelectAcrossPages: 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