DataTable Control: Nested Headers

Ajax Javascript YUI DataTable

Nested Headerとは、入れ子になった見出しのこと。
こういったデータを扱うことはあまり多くはないが、この例のように、あるデータとサマリーが並んでいるようなケースでは確かに必要なフォーマット。
HTMLでかくと、columnをくっつけるという作業になるので、とかく、tableタグの中がグチャグチャになってしまう。

YUIでは、表見出しをオブジェクト・リテラルで表現するので、tableタグで書くよりもスッキリと書くことができる。この際には、（これまで出てきた）key属性ではなく、label属性を定義するだけでよい。key属性は、これまで通り、一番下位の見出しとして定義する。

以下は、サンプル画面。

YUIのサンプルでは、Year to date（その年の1/1から当日まで）がYTDと表現されているが、略記をやめにした。
また、pageはHTMLのページなので、YAHOO.widget.DataTable.formatLinkをフォーマッターとしてみた。

以下にJavascriptを含むHTMLの全文を示す。
scriptは、module patternで書き直した。

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>Ajax_Sampling</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/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/dragdrop/dragdrop-min.js"></script> 
<script type="text/javascript" src="scripts/yui/element/element-beta-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;
/*	width: 560px;
	height: auto;
	border:1px dashed #999999;*/
} 
</style>

<!--  データテーブルの読み込み  -->
<!-- 
YAHOO.example.Data = {
    webstats: [
        ["home.html",20,400,44,657],
        ["blog.html",24,377,97,567],
        ["contact.html",32,548,42,543],
        ["about.html",8,465,12,946],
        ["pagenotfound.html",0,0,0,0]
    ]
}
-->
<script type="text/javascript" src="scripts/yui/datatable/assets/js/data.js"></script> 
<script type="text/javascript">
YAHOO.namespace("EGP");

YAHOO.EGP.NestedHeaders = function() {
    var myColumnDefs = [
                        // HP名
                        {key:"page", label:"Page", sortable:true, resizeable:true,formatter:YAHOO.widget.DataTable.formatLink},
                        // 統計数値()は、labelで一つにまとめる。数値なので、ここでフォーマッターはまとめて定義してしまう。
                        {label:"Statistics", formatter:YAHOO.widget.DataTable.formatNumber, 
                            children:[
                            {label:"Visits",
                                children: [
                                    {key:"visitsmonth", label:"This Month",sortable:true, resizeable:true},
                                    {key:"visitsytd", label:"Year To Date", abbr:"Year to Date",sortable:true, resizeable:true}
                                ]
                            },
                            {label:"Views",
                                children: [
                                    {key:"viewsmonth", label:"This Month",sortable:true, resizeable:true},
                                    {key:"viewsytd", label:"Year To Date", abbr:"Year to Date",sortable:true, resizeable:true}
                                ]
                            }
                        ]}
                    ];
             
	var myDataTable;
	var myDataSource;
	
	return{
    	init: function() {
			myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.webstats);    			
    		// 読み込んだデータソースのタイプ（JavascriptのArray）
    		// 祖先DataSourceBaseのAPIドキュメント（http://developer.yahoo.com/yui/docs/YAHOO.util.DataSourceBase.html）
    		// を参照。
        	myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        	myDataSource.responseSchema = {
            	fields: ["page","visitsmonth","visitsytd","viewsmonth","viewsytd"]
        	};
 
        	myDataTable 
        			= new YAHOO.widget.DataTable("nested", 
                				myColumnDefs, 
                				myDataSource,                					
        						{caption:"Statistics of some pages"});
		},
		// おまじない
        oDS: myDataSource,
        oDT: myDataTable
	};
}();
		
//DOMが完全にloadされたら、サンプルを初期化する。
YAHOO.util.Event.onDOMReady(
		//DomReadyイベントで発火するハンドラ
		YAHOO.EGP.NestedHeaders.init,
		//ハンドラに渡すオブジェクト（関数）
		YAHOO.EGP.NestedHeaders,
		//ハンドラは、上記のオブジェクトのスコープをもつ。   
		true
);
</script>
</HEAD>

<BODY class="yui-skin-sam">
<div id="main">
<p>
Nestしたテーブルヘッダーのサンプルです。
</p>
<div id="nested"></div> 
</div>
</BODY>
</HTML>