DataTable Control: Highlighting Cells, Rows, or Columns

YUIの「DataTable Control: Highlighting Cells, Rows, or Columns」へのリンク

このExampleでは、セル、行、列をハイライトする方法が示されている。
画面は以下のように、3つのテーブルがならんでいて、それぞれ、

CellにMouseOverするとハイライトされる
行にMouseOverするとハイライトされる
見出しにMouseOverすると列がハイライトされる

ようになっている。

これらは、すべて「出来合いの」、すなわち「YUIで用意されている機能」で簡単に実現できる。

以下にHTMLの全文を示す。
これを見れば、十分であると思う。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<title>Ajax Sample</title> 
 
<style type="text/css"> 
body {
	margin:0;
	padding:0;
}
</style> 

<link rel="stylesheet" type="text/css" href="scripts/yui/fonts/fonts-min.css" /> 
<link rel="stylesheet" type="text/css" href="scripts/yui/button/assets/skins/sam/button.css" /> 
<link rel="stylesheet" type="text/css" href="scripts/yui/container/assets/skins/sam/container.css" /> 
<link rel="stylesheet" type="text/css" href="scripts/yui/datatable/assets/skins/sam/datatable.css" /> 
<script type="text/javascript" src="scripts/yui/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script type="text/javascript" src="scripts/yui/element/element-beta-min.js"></script> 
<script type="text/javascript" src="scripts/yui/button/button-min.js"></script> 
<script type="text/javascript" src="scripts/yui/container/container-min.js"></script> 
<script type="text/javascript" src="scripts/yui/datasource/datasource-min.js"></script> 
<script type="text/javascript" src="scripts/yui/datatable/datatable-min.js"></script> 

<style type="text/css" id="defaultstyle">
#main {
	margin: 2px;
	padding: 3px;
}
</style>

<script type="text/javascript" src="scripts/yui/datatable/assets/js/data.js"></script> 
<script type="text/javascript"> 
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にMouseOverするとハイライトされます"
                });
        
        // DataTableのcellMouseoverEventにDataTableで用意しているハンドラをしかけるだけ。
        cellHighlightDataTable.subscribe("cellMouseoverEvent", 
                cellHighlightDataTable.onEventHighlightCell);
        // DataTableのcellMouseoutEventにDataTableで用意しているハンドラをしかけるだけ。
        cellHighlightDataTable.subscribe("cellMouseoutEvent", 
                cellHighlightDataTable.onEventUnhighlightCell);

        // 行のハイライト =======================================================================
		
	var rowHighlightDataTable = new YAHOO.widget.DataTable("row",
                myColumnDefs, myDataSource, {
                    caption:"Example: 行にMouseOverするとハイライトされます"
                });
        
        // DataTableのrowMouseoverEventにDataTableで用意しているハンドラをしかけるだけ。
        rowHighlightDataTable.subscribe("rowMouseoverEvent", 
                rowHighlightDataTable.onEventHighlightRow);
        // DataTableのrowMouseoutEventにDataTableで用意しているハンドラをしかけるだけ。
        rowHighlightDataTable.subscribe("rowMouseoutEvent", 
                rowHighlightDataTable.onEventUnhighlightRow);

        // 列のハイライト =======================================================================

        var colHighlightDataTable = new YAHOO.widget.DataTable("column",
                myColumnDefs, myDataSource, {
                    caption:"Example: 見出しにMouseOverすると列がハイライトされます"
                });
        
        // DataTableのtheadCellMouseoverEventにDataTableで用意しているハンドラをしかけるだけ。
        colHighlightDataTable.subscribe("theadCellMouseoverEvent", 
                colHighlightDataTable.onEventHighlightColumn);
        // DataTableのtheadCellMouseoutEventにDataTableで用意しているハンドラをしかけるだけ。
        colHighlightDataTable.subscribe("theadCellMouseoutEvent", 
                colHighlightDataTable.onEventUnhighlightColumn);		
        
        return {
            oDS: myDataSource,
            oDTCellHighlight: cellHighlightDataTable,
            oDTRowHighlight: rowHighlightDataTable,
            oDTColHighlight: colHighlightDataTable
       };
    }();
});
</script>
</head> 
 
<body class=" yui-skin-sam">
<div id="main">
<p>セル、行、列をマウスオーバーでハイライトするサンプルです</p>
<div id="cell"></div> 
<div id="row"></div> 
<div id="column"></div> 
</div>
</body> 
</html>