DataTable Control: Row Selection - tetsuya

YUIの「DataTable Control: Row Selection」へのリンク

このExampleでは、テーブルの行を選択するサンプルが２つ示されている。

上から

標準形式(Standard-type)といわれるもの。クリックして選択後に、Ctrl+クリックでマルチな選択ができる。
シングル形式(Single-type）といわれるもの。マルチな選択はできない。

となっている。

これは、DataTableのコンフィグ属性を指定することで指定することができる。一つ目を「標準」と呼んでいるだけに、実際、デフォルトではマルチな選択が可能となっていて、シングル形式の場合のみ、

     selectionMode:"single"

と指定する。これに対して、標準形式の場合、特別な指定は不要である（つまり、これまで出てきたDataTableは、クリックイベントのハンドラを仕込んでなかっただけで、すべて、マルチな行選択が可能）。

YUIのサンプルでは、イベントハンドラにデフォルトを指定しており、クリックイベントに対して、行の色がかわるだけとなっている。
実際には、ここに関数を仕込んでアプリケーションを作成するので、（シングル形式で）調べてみたところ、クリックイベントにたいして、function(arg)というハンドラ記述ができる。
このarg.targetは、HTMLTableRowElementとなっているので、ここから情報をとることができる。

以下に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/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;
}
/* custom styles for this example */
.yui-skin-sam .yui-dt-body { cursor:pointer; } /* when rows are selectable */
#single { margin-top:2em; }

</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.RowSelection = function() {
        var myColumnDefs = [
                {key:"Date",formatter:YAHOO.widget.DataTable.formatDate, sortable:true},
                {key:"To", sortable:true},
                {key:"From", sortable:true},
                {key:"Subject", sortable:true}
        ];
        
        var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.emails);
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
        myDataSource.responseSchema = {
            resultsList: "messages",
            fields: ["Date","To","From","Subject","XID","Date","Attachment"]
        };
 
   	// Standard Type (Multi-Selection)======================================

   		var standardSelectDataTable = new YAHOO.widget.DataTable("standard",
                myColumnDefs, myDataSource, {
                    caption:"標準的な行の選択を行えます（multi-selection）",
                    // 年月日に変更
                    dateOptions:{format:"%Y/%m/%d", locale:"ja"}
                });
                
        // DataTableに標準定義されているマウスイベントと、ハンドラを仕込む。
        standardSelectDataTable.subscribe("rowMouseoverEvent", 
                standardSelectDataTable.onEventHighlightRow);
        standardSelectDataTable.subscribe("rowMouseoutEvent", 
                standardSelectDataTable.onEventUnhighlightRow);
        standardSelectDataTable.subscribe("rowClickEvent", 
                standardSelectDataTable.onEventSelectRow);
 
        // １行目を取得し、それを選択する。 
        var firstRow = standardSelectDataTable.getTrEl(0);
        standardSelectDataTable.selectRow(firstRow);
        // このDataTableにフォーカスを当てる。
        standardSelectDataTable.focus();

        
   	// Single Type (Single-Selection)======================================

        var singleSelectDataTable = new YAHOO.widget.DataTable("single",
                myColumnDefs, myDataSource, {
                    caption:"一行しか選択できません（single-selection）",
                    // selectionModeを"single"にする。
                    selectionMode:"single",
                    // 年月日に変更
                    dateOptions:{format:"%Y/%m/%d", locale:"ja"}
                });

               
        // DataTableに標準定義されているマウスイベントと、ハンドラを仕込む。
        singleSelectDataTable.subscribe("rowMouseoverEvent", 
                singleSelectDataTable.onEventHighlightRow);
        singleSelectDataTable.subscribe("rowMouseoutEvent", 
                singleSelectDataTable.onEventUnhighlightRow);
        singleSelectDataTable.subscribe("rowClickEvent",
                singleSelectDataTable.onEventSelectRow);
        
        // １行目を取得し、それを選択する。 
        singleSelectDataTable.selectRow(singleSelectDataTable.getTrEl(0));
        
        return {
            oDS: myDataSource,
            oDTStandardSelect: standardSelectDataTable,
            oDTSingledSelect: singleSelectDataTable
        };
    }();
});
</script>
</head> 
 
<body class=" yui-skin-sam">
<div id="main">
<p>行を選択するサンプルです。</p>
<div id="standard"></div>
<div id="single"></div> 
</div>
</body> 
</html>