DataTable Control: Complex Example of Multiple Features

Ajax Javascript YUI Pagination Datatable Anim

このExampleは、これまでのExampleでやってきた、いくつかの要素を組み合わせた例。

state列でのソーティングは、「DataTable Control: Client-side Sorting」でやったのと同じに、state列でソートした後に同じstate内でarea codeでソートする（このカスタム・ソーターは全く同じもの）。また、画面には行数を決めるリストボックスがある。
編集可のNote列は、ダブルクリックで編集モードとなり、編集終了と同時に色が黄色に光って消えるような細工がしてある。
この部分は、編集が行われた行にたいして、YAHOO.util.ColorAnimを適用することで実装されていて、面白い。

基本的に、新しい要素のないExampleではあるが、Ajaxらしい楽しいサンプルとなっている。
以下に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/paginator/assets/skins/sam/paginator.css" /> 
<link rel="stylesheet" type="text/css" href="scripts/yui/datatable/assets/skins/sam/datatable.css" /> 
<script type="text/javascript" src="scripts/yui/utilities/utilities.js"></script> 
<script type="text/javascript" src="scripts/yui/paginator/paginator-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.MultipleFeatures = function() {
		// 列定義
		
		// カスタムのソーター
		// state > area codeでソーティングする。
		// 「DataTable Control: Client-side Sorting」のサンプルと同じ。
		var sortStates = function(a, b, desc) {
        	// Deal with empty values
        	if(!YAHOO.lang.isValue(a)) {
        		return (!YAHOO.lang.isValue(b)) ? 0 : 1;
        	}else if(!YAHOO.lang.isValue(b)) {
            	return -1;
        	}
 
        	var comp = YAHOO.util.Sort.compare;
        	var compState = comp(a.getData("state"), b.getData("state"), desc);
 
            	return (compState !== 0) ? compState : comp(a.getData("areacode"), b.getData("areacode"), desc);
        };

        // 列定義
        var myColumnDefs = [
                 	{	key:"areacode",
                     	label:"Area Codes",
                     	width:100,
                     	resizeable:true,
                     	sortable:true},
                    {	key:"state",
                        label:"States",
                        width:250,
                        resizeable:true,
                        sortable:true,
                        sortOptions:{sortFunction:sortStates}},
                    {	key:"notes",
                        label:"Notes (編集可)",
                        editor:"textbox",
                        resizeable:true,
                        sortable:true}
        ];

        // DataSourceのインスタンス化
        var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.areacodes);
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        myDataSource.responseSchema = {
            fields: ["areacode","state"]
        };

        // DataTableのコンフィグ属性
        var myConfigs = {
                sortedBy:{key:"areacode",dir:"asc"},
                paginator: 
                    new YAHOO.widget.Paginator({
                    	rowsPerPage: 25,
                    	template: YAHOO.widget.Paginator.TEMPLATE_ROWS_PER_PAGE,
                    	rowsPerPageOptions: [10,25,50,100],
                    	pageLinks: 5
                	})
        };

        // DataTableのインスタンス化
        var myDataTable = new YAHOO.widget.DataTable("complex", myColumnDefs, myDataSource, myConfigs);
		// クリックでハイライトするようにハンドラを設定
        myDataTable.subscribe("rowClickEvent",
                myDataTable.onEventSelectRow);
		// ダブルクリックでセルのエディターを呼ぶ。
        myDataTable.subscribe("cellDblclickEvent",
                myDataTable.onEventShowCellEditor);
		// カーソル・アウトで編集結果を保存する。
        myDataTable.subscribe("editorBlurEvent", 
                myDataTable.onEventSaveCellEditor);

        // 編集＆セーブ後のイベントのハンドラー
        var onCellEdit = function(oArgs) {
            // セーブされたTDエレメントを取得
            var elCell = oArgs.editor.getTdEl();
            // 新旧のデータを取得
            var oOldData = oArgs.oldData;
            var oNewData = oArgs.newData;
 
            // 変更が起こった行(TRエレメント)を取得する。
            var elRow = this.getTrEl(elCell);
            // 変更されるのは１行だから、配列の引数は0
            var origColor = YAHOO.util.Dom.getStyle(elRow.cells[0], "backgroundColor");
            var pulseColor = "#ff0";
 
            // 変更が起こった行をカラー・アニメで光らせる
            var rowColorAnim = new YAHOO.util.ColorAnim(elRow.cells, 
                    {
                	// 黄色から元の色（選択されているので青）に２秒間で変化する。
                    backgroundColor:{to:origColor, from:pulseColor}, 
                    duration:2
                    }
            );

			// バックグラウンドカラーを青から（指定されていない状態に）戻す。
            var onComplete = function() {
                rowColorAnim = null;
                YAHOO.util.Dom.setStyle(elRow.cells, "backgroundColor", "");
            }
            // カラー・アニメの終わりに、色を戻すハンドラ（上）を仕込む。
            rowColorAnim.onComplete.subscribe(onComplete);
            rowColorAnim.animate();
        }
        // 編集＆セーブ後のイベントに上の関数を仕込む
        myDataTable.subscribe("editorSaveEvent", onCellEdit);
        
        return {
            oDS: myDataSource,
            oDT: myDataTable
       };
    }();
});
</script>
</head> 
 
<body class=" yui-skin-sam">
<div id="main">
<p>いくつかのオプションを加えたサンプルです。<br/>
編集可能な部分はダブルクリックで変更できます。変更すると色が変わります。</p>
<div id="complex"></div>
</div>
</body> 
</html>