DataTable Control: XY-scrolling, Y-scrolling, and X-scrolling

Ajax Javascript YUI DataTable

このExampleでは、下の図のような縦、横、もしくはその両方の幅が固定された、スクロールするテーブルの作成方法が説明されている。

YUIのExampleでは、XY軸の両方向にスクロールするテーブル、X軸に沿ってスクロールするテーブル、Y軸に沿ってスクロールするテーブルの3種類が示されているが、本質的には同じものであるので、ここでは、XY軸の両方向にスクロールするテーブルをサンプリングする。

このようなテーブルを作成することは、簡単にできて、

  1. カラムの幅（テーブルの幅）を指定する。
  2. DataTableのConfiguration Attributesに、その幅とともに、scrollable属性をtrueに設定する。

だけでよい。

以下にJavascriptを含む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/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/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.Scrolling = function() {
        var myColumnDefs = [
					// 幅を固定する。
                    {key:"field1", width:50},
                    {key:"field2", width:100, formatter:"date"},
                    {key:"field3", width:50},
                    {key:"field4", width:50},
                    {key:"field5", width:50},
                    {key:"field6", width:150}
       ];
        
        var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.multitypes);
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
        myDataSource.responseSchema = {
            resultsList: "items",
            fields: [
                {key:"field1"},
                {key:"field2", formatter:"date"},
                {key:"field3"},
                {key:"field4"},
                {key:"field5"},
                {key:"field6"}
            ]
        };
 
        var myDataTableXY = new YAHOO.widget.DataTable("xyscrolling", myColumnDefs,
                myDataSource, 
                // scrollable:true を指定。
				// XY軸のスクロールの時は縦・横を指定。X軸のスクロールの時は横を指定。Y軸のときは縦を指定。
                {scrollable:true, width:"30em", height:"10em"}
        );
        return {
            oDS: myDataSource,
            oDT: myDataTable
        };
    }();
});
</script>
</head> 
 
<body class=" yui-skin-sam">
<div id="main">
<p>XY軸にスクロールするテーブルです。</p>
<div id="xyscrolling"></div> 
</div>
</body> 
</html>