YUI Library JavaScript DHTML


            



    
Highlighting Cells, Rows, or Columns

/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
  margin:0;
  padding:0;
}










Highlighting Cells, Rows, or Columns





YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.Highlighting = function() {
        var myColumnDefs = [
            {key:"Page"},
            {key:"VisitsThisMonth"},
            {key:"VisitsThisYear"},
            {key:"ViewsThisMonth"},
            {key:"ViewsThisYear"}
        ];
        var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.webstats);
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        myDataSource.responseSchema = {
            fields: ["Page","VisitsThisMonth","VisitsThisYear","ViewsThisMonth","ViewsThisYear"]
        };
        var cellHighlightDataTable = new YAHOO.widget.DataTable("cell",
                myColumnDefs, myDataSource, {
                    caption:"Example: Cell Highlighting"
                });
        // Enable cell highlighting
        cellHighlightDataTable.subscribe("cellMouseoverEvent", cellHighlightDataTable.onEventHighlightCell);
        cellHighlightDataTable.subscribe("cellMouseoutEvent", cellHighlightDataTable.onEventUnhighlightCell);
        var rowHighlightDataTable = new YAHOO.widget.DataTable("row",
                myColumnDefs, myDataSource, {
                    caption:"Example: Row Highlighting"
                });
        // Enable row highlighting
        rowHighlightDataTable.subscribe("rowMouseoverEvent", rowHighlightDataTable.onEventHighlightRow);
        rowHighlightDataTable.subscribe("rowMouseoutEvent", rowHighlightDataTable.onEventUnhighlightRow);
        var colHighlightDataTable = new YAHOO.widget.DataTable("column",
                myColumnDefs, myDataSource, {
                    caption:"Example: Column Highlighting"
                });
        // Enable Column highlighting
        colHighlightDataTable.subscribe("theadCellMouseoverEvent", colHighlightDataTable.onEventHighlightColumn);
        colHighlightDataTable.subscribe("theadCellMouseoutEvent", colHighlightDataTable.onEventUnhighlightColumn);
        
        return {
            oDS: myDataSource,
            oDTCellHighlight: cellHighlightDataTable,
            oDTRowHighlight: rowHighlightDataTable,
            oDTColHighlight: colHighlightDataTable
        };
    }();
});





   
   
yui_2.7.0b.zip( 4,431 k)