DataTable Control: Conditional row coloring

Ajax Javascript YUI DataTable

このExampleでは、Row Format（行のフォーマット）をカスタム・フォーマッターとして作成する。
先の例のカスタム・フォーマッターが、テーブルのエレメント（td）を修飾するものであったのに対して、Rowフォーマッターは、行そのもの（tr）を修飾するものである。
Rowフォーマッターの使用は、DataTableのインスタンス生成時に指定すればよい。

サンプルでは、Quantityが40未満の行について、行の色を変えるフォーマッターを作成している（下）が、これは、

  • 各行についてQuantityをチェックする。
  • Quantityが40未満だったら、trにmarkというclassを作成する。
  • markには、あらかじめ、色の違うスタイルを用意しておく。

というやり方で実行される。

以下にJavascriptを含むHTMLの全文をしめす。
scriptはモジュール・パターンに書き直した。

<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/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;*/
}

/* Remove row striping, column borders, and sort highlighting */
/* .yui-dt-odd .yui-dt-ascは自動的に付与されるclass*/
.yui-skin-sam tr.yui-dt-odd,
.yui-skin-sam tr.yui-dt-odd td.yui-dt-asc,
.yui-skin-sam tr.yui-dt-odd td.yui-dt-desc,
.yui-skin-sam tr.yui-dt-even td.yui-dt-asc,
.yui-skin-sam tr.yui-dt-even td.yui-dt-desc {
    background-color: #fff;
}
/* Tableの下線だけ出す。 */
.yui-skin-sam .yui-dt tbody td {
    border-bottom: 1px solid #ddd;
}
/* Tableの下線だけ出す。 */
.yui-skin-sam .yui-dt thead th {
    border-bottom: 1px solid #7f7f7f;
}
/* Tableの縦線をなくす。 */
.yui-skin-sam .yui-dt tr.yui-dt-last td,
.yui-skin-sam .yui-dt th,
.yui-skin-sam .yui-dt td {
    border: none;
}
 
/* マークのついた行のための定義（Rowフォーマッターでは、trにclassが追加される） */
/* .yui-dt-odd .yui-dt-ascは自動的に付与されるclass*/
.yui-skin-sam .yui-dt tr.mark,
.yui-skin-sam .yui-dt tr.mark td.yui-dt-asc,
.yui-skin-sam .yui-dt tr.mark td.yui-dt-desc,
.yui-skin-sam .yui-dt tr.mark td.yui-dt-asc,
.yui-skin-sam .yui-dt tr.mark td.yui-dt-desc {
    background-color: #a33;
    color: #fff;
}  
</style>

<!--  データテーブルの読み込み  -->
<!-- 
YAHOO.example.Data = {
    inventory: [
        {SKU:"23-23874", Quantity:43, Item:"Helmet", Description:"Red baseball helmet. Size: Large."},
        {SKU:"48-38835", Quantity:84, Item:"Football", Description:"Leather football."},
        {SKU:"84-84848", Quantity:31, Item:"Goggles", Description:"Light blue swim goggles"},
        {SKU:"84-84843", Quantity:56, Item:"Badminton Set", Description:"Set of 2 badminton rackets, net, and 3 birdies."},
        {SKU:"84-39321", Quantity:128, Item:"Tennis Balls", Description:"Canister of 3 tennis balls."},
        {SKU:"39-48949", Quantity:55, Item:"Snowboard", Description:""},
        {SKU:"99-28128", Quantity:77, Item:"Cleats", Description:"Soccer cleats. Size: 10."},
        {SKU:"83-48281", Quantity:65, Item:"Volleyball", Description:""},
        {SKU:"89-32811", Quantity:12, Item:"Sweatband", Description:"Blue sweatband. Size: Medium."},
        {SKU:"28-22847", Quantity:43, Item:"Golf Set", Description:"Set of 9 golf clubs and bag."},
        {SKU:"38-38281", Quantity:1, Item:"Basketball Shorts", Description:"Green basketball shorts. Size: Small."},
        {SKU:"82-38333", Quantity:288, Item:"Lip balm", Description:"Lip balm. Flavor: Cherry."},
        {SKU:"21-38485", Quantity:177, Item:"Ping Pong Ball", Description:""},
        {SKU:"83-38285", Quantity:87, Item:"Hockey Puck", Description:"Glow-in-the-dark hockey puck."}
    ],
}
-->
<script type="text/javascript" src="scripts/yui/datatable/assets/js/data.js"></script> 
<script type="text/javascript">
YAHOO.namespace("EGP");

YAHOO.EGP.DataTable = function() {

	// Create a shortcut
	var Dom = YAHOO.util.Dom;

	// カスタム・Rowフォーマッター（カスタム・フォーマッターとは引数が違う）
	var myRowFormatter = function(elTr, oRecord) {
	    if (oRecord.getData('Quantity') < 40) {
	        Dom.addClass(elTr, 'mark');
	    }
	    return true;
	}; 

	var dataSource, dataTable;
	
	return{
    	init: function() {
			// データソースの作成
			dataSource = new YAHOO.util.DataSource(YAHOO.example.Data.inventory);
			dataSource.responseType 
				= YAHOO.util.DataSource.TYPE_JSARRAY;
			dataSource.responseSchema = {
		    	fields : ['SKU','Quantity','Item','Description']
			};

			// データテーブルの作成
			dataTable = 
				new YAHOO.widget.DataTable('tbl',
			                [ {key:'SKU',sortable: true},
			                  {key:'Item',sortable: true},
			                  {key:'Quantity',sortable: true},
			                  {key:'Description',sortable: true}
			                ],
			                dataSource,
			                // Row Formatterを使えるようにする。
			                // APIドキュメント　http://developer.yahoo.com/yui/docs/YAHOO.widget.DataTable.html
                        	// のConfiguration Attributesを参照のこと。 
			                {formatRow: myRowFormatter}
            	);
		},
		// おまじない
        oDS: dataSource,
        oDT: dataTable
	};
}();
		
//DOMが完全にloadされたら、サンプルを初期化する。
YAHOO.util.Event.onDOMReady(
		//DomReadyイベントで発火するハンドラ
		YAHOO.EGP.DataTable.init,
		//ハンドラに渡すオブジェクト（関数）
		YAHOO.EGP.DataTable,
		//ハンドラは、上記のオブジェクトのスコープをもつ。   
		true
);
</script>
</HEAD>

<BODY class="yui-skin-sam">
<div id="main">
<p>
row formatter作成のサンプルです。
</p>
<div class="demo"> 
    <div id="tbl"></div> 
</div> 
</div>
</BODY>
</HTML>