DataTable Control: Context Menu Integration

Ajax Javascript YUI DataTable Menu

これもAjaxらしい、触って楽しいExampleとなっている。
テーブルのある行にカーソルを合わせて、右クリックすると、OSライクなメニュー（コンテキスト・メニュー；Context Menu）が表示される。
この例では、その行を削除することのみが選択できる（下の図；これを拡張することは簡単。以前の「Menu Family: Context Menu」を参照）。

ここで消すを選択すると、以下のような、確認画面（Confirm Box）が上がって（ちゃんと、消すデータの中身を取ってきていることに注目）、OKとするとDataTableから行が削除される。

このサンプルのポイントは、コンテキストメニューの表示をDataTableのTBodyに設定していることだけで、これはContextMenuのコンフィグ属性（trigger）で指定できる（YAHOO.widget.ContextMenuのAPIドキュメントはこちら）。

イベントハンドラーは先の「Menu Family: Context Menu」と殆ど同じとなっている。

以下に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/menu/assets/skins/sam/menu.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/container/container_core-min.js"></script> 
<script type="text/javascript" src="scripts/yui/menu/menu-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;
}
div.yuimenu .bd {
    zoom: normal;
}
</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.ContextMenu = function() {
		// 列定義
        var myColumnDefs = [
               {key:"SKU", sortable:true},
               {key:"Quantity", sortable:true},
               {key:"Item", sortable:true},
               {key:"Description"}
        ];

        var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.inventory);
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        myDataSource.responseSchema = {
            fields: ["SKU","Quantity","Item","Description"]
        };
 
        var myDataTable 
        		= new YAHOO.widget.DataTable("myContainer", myColumnDefs, myDataSource);

        // コンテキストメニュークリック時の処理（イベントハンドラー）
        var onContextMenuClick = function(p_sType, p_aArgs, p_myDataTable) {
            // p_aArgs[1]はクリックされたMenuItem
            var task = p_aArgs[1];
            if(task) {
                // コンテキストメニューが表示された行のTR要素を抜き出す。（※１）
                var elRow = this.contextEventTarget;
                elRow = p_myDataTable.getTrEl(elRow);
 
                if(elRow) {
                    // MenuItemは「delete」の１つしかないので、task.indexは0だけ。
                    switch(task.index) {
                        case 0:     // Delete row upon confirmation
                            var oRecord = p_myDataTable.getRecord(elRow);
                            if(confirm("SKU " +
                                    oRecord.getData("SKU") + " (" +
                                    oRecord.getData("Description") + ")　を消去しますがよろしいですか?")) {
								// ※１で求めたTRエレメントをもとに、DataTableからデータ列を消去する。
								p_myDataTable.deleteRow(elRow);
                            }
                    }
                }
            }
        };
 
        var myContextMenu 
        		= new YAHOO.widget.ContextMenu("mycontextmenu",
                		// コンテキストメニューが現れるHTMLエレメントをDataTableのTBodyに設定。
                		{trigger:myDataTable.getTbodyEl()}
        		);
        myContextMenu.addItem("Delete Item");
        // Render the ContextMenu instance to the parent container of the DataTable
        myContextMenu.render("myContainer");
        myContextMenu.clickEvent.subscribe(onContextMenuClick, myDataTable);
        
        return {
            oDS: myDataSource,
            oDT: myDataTable
       };
    }();
});
</script>
</head> 
 
<body class=" yui-skin-sam">
<div id="main">
<p>右クリックすると行を消すメニュー（コンテキストメニュー）が現れます</p>
<div id="myContainer"></div>
</div>
</body> 
</html>