DataTable Control: Cell Selection
このExampleでは、3種類のセルの選び方について、その作成方法が説明されている。（下図）
- Cell−Blockでの選択；先頭となるセルと、終端となるセルを指定して、それらが生成するブロック内のセルを選択できる（Modifier key; shift）。マルチの選択もできる（Modifier key; ctrl）。
- Cell−Rangeでの選択；先頭となるセルと、終端となるセルを指定して、それらの間のセルを選択できる（Modifier key; shift）。マルチの選択もできる（Modifier key; ctrl）。
- 単一選択；一つのセルしか選択できない（Modifier key; 無効）。
上の画面は、それぞれにおいて、
- (1,1)のセル20をクリック後、(4,2)のセル465をshift-クリックした
ときの画面となっている。
「DataTable Control: Row Selection」と同様に、これらの指定は、DataTableのコンフィグ属性（selectionMode）として指定することができる。
| Select Type | selectionModeの値 |
| Cell−Blockでの選択 | cellblock |
| Cell−Rangeでの選択 | cellrange |
| 単一選択 | singlecell |
以下にHTMLの全文を示すが、この中に
cellBlockSelectDataTable.subscribe("cellSelectEvent",
cellBlockSelectDataTable.clearTextSelection);
というコード部分がある。これば、セルが選択されたときに発生されたイベント（クリック時に発生。もし、Cell-Blockで選択された場合には、shift+クリック時に、先頭のセルから順に発生）に対して、ブラウザのText Node選択の機能を抑止するための処置である（Text Node選択については、こちら）。
これを外して、Cell-Block選択をしたときの画面が以下である。おまじないのようなもの、と考えておいていいと思う。
また、click時にはイベントハンドラとしてfunction(arg)の形のハンドラを作ることができる。
この際のarg.targetは、HTMLTableCellElementとなる。
selectイベントの場合にも、function(arg)の形式のハンドラを作ることができるが、この場合、arg.elがHTMLTableCellElementとなる。
<!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 cells are selectable */ #cellrange, #singlecell { 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.CellSelection = function() { var myColumnDefs = [ {key:"col1", sortable:true}, {key:"col2", sortable:true}, {key:"col3", sortable:true}, {key:"col4", sortable:true} ]; var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.webstats); myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; myDataSource.responseSchema = { fields: ["col0","col1","col2","col3","col4"] }; // cell-block-Selection================================================= var cellBlockSelectDataTable = new YAHOO.widget.DataTable("cellblock", myColumnDefs, myDataSource, { caption:"Cell-Block Selection; 先頭と終端を指定してそれが生成するブロック内のセルを選択できます", selectionMode:"cellblock" }); // Subscribe to events for cell selection cellBlockSelectDataTable.subscribe("cellMouseoverEvent", cellBlockSelectDataTable.onEventHighlightCell); cellBlockSelectDataTable.subscribe("cellMouseoutEvent", cellBlockSelectDataTable.onEventUnhighlightCell); // cellがクリックされたときのイベントとハンドラ cellBlockSelectDataTable.subscribe("cellClickEvent", cellBlockSelectDataTable.onEventSelectCell ); // cellが選択されたときのイベントとハンドラ // （注） 選択されたセル数だけ（自動的に）順に発生する。 // BrowserのText Node Selection機能を抑止する。 // http://ajaxcookbook.org/disable-text-selection/ cellBlockSelectDataTable.subscribe("cellSelectEvent", cellBlockSelectDataTable.clearTextSelection); // cell-range-Selection================================================= var cellRangeSelectDataTable = new YAHOO.widget.DataTable("cellrange", myColumnDefs, myDataSource, { caption:"Cell-Range Selection; 先頭と終端を指定して全てのカラムのセルを選択できます", selectionMode:"cellrange" }); // Subscribe to events for cell selection cellRangeSelectDataTable.subscribe("cellMouseoverEvent", cellRangeSelectDataTable.onEventHighlightCell); cellRangeSelectDataTable.subscribe("cellMouseoutEvent", cellRangeSelectDataTable.onEventUnhighlightCell); cellRangeSelectDataTable.subscribe("cellClickEvent", cellRangeSelectDataTable.onEventSelectCell); // cellが選択されたときのイベントとハンドラ // BrowserのText Node Selectionを抑止する。 // http://ajaxcookbook.org/disable-text-selection/ cellRangeSelectDataTable.subscribe("cellSelectEvent", cellRangeSelectDataTable.clearTextSelection); // single-Selection===================================================== var singleCellSelectDataTable = new YAHOO.widget.DataTable("singlecell", myColumnDefs, myDataSource, { caption:"Single-Cell Selection; 一つのセルしか選べません", selectionMode:"singlecell" }); // Subscribe to events for cell selection singleCellSelectDataTable.subscribe("cellMouseoverEvent", singleCellSelectDataTable.onEventHighlightCell); singleCellSelectDataTable.subscribe("cellMouseoutEvent", singleCellSelectDataTable.onEventUnhighlightCell); singleCellSelectDataTable.subscribe("cellClickEvent", singleCellSelectDataTable.onEventSelectCell); // cellが選択されたときのイベントとハンドラ // BrowserのText Node Selectionを抑止する。 // http://ajaxcookbook.org/disable-text-selection/ singleCellSelectDataTable.subscribe("cellSelectEvent", singleCellSelectDataTable.clearTextSelection); return { oDS: myDataSource, oDTCellBlockSelect: cellBlockSelectDataTable, oDTCellRangeSelect: cellRangeSelectDataTable, oDTSingleCellSelect: singleCellSelectDataTable }; }(); }); </script> </head> <body class=" yui-skin-sam"> <div id="main"> <p>セルを選択するサンプルです。</p> <div id="cellblock"></div> <div id="cellrange"></div> <div id="singlecell"></div> </div> </body> </html>
