YUI recommends YUI3.
YUI 2 has been deprecated since 2011. This site acts as an archive for files and documentation.
This documentation is no longer maintained.
These examples demonstrate "cellblock", "cellrange", and "singlecell" selection modes.
Data:
1 | YAHOO.example.Data = { |
2 | webstats: [ |
3 | ["home.html",20,400,44,657], |
4 | ["blog.html",24,377,97,567], |
5 | ["contact.html",32,548,42,543], |
6 | ["about.html",8,465,12,946], |
7 | ["pagenotfound.html",0,0,0,0] |
8 | ] |
9 | } |
view plain | print | ? |
CSS:
1 | /* custom styles for this example */ |
2 | .yui-skin-sam .yui-dt-body { cursor:pointer; } /* when cells are selectable */ |
3 | #cellrange, #singlecell { margin-top:2em; } |
view plain | print | ? |
Markup:
1 | <div id="cellblock"></div> |
2 | <div id="cellrange"></div> |
3 | <div id="singlecell"></div> |
view plain | print | ? |
JavaScript:
1 | YAHOO.util.Event.addListener(window, "load", function() { |
2 | YAHOO.example.CellSelection = new function() { |
3 | var myColumnDefs = [ |
4 | {key:"col1", sortable:true}, |
5 | {key:"col2", sortable:true}, |
6 | {key:"col3", sortable:true}, |
7 | {key:"col4", sortable:true} |
8 | ]; |
9 | |
10 | this.myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.webstats); |
11 | this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; |
12 | this.myDataSource.responseSchema = { |
13 | fields: ["col0","col1","col2","col3","col4"] |
14 | }; |
15 | |
16 | this.cellBlockSelectDataTable = new YAHOO.widget.DataTable("cellblock", |
17 | myColumnDefs, this.myDataSource, { |
18 | caption:"Cell-Block Selection Mode with Support for Modifier Keys", |
19 | selectionMode:"cellblock" |
20 | }); |
21 | |
22 | // Subscribe to events for cell selection |
23 | this.cellBlockSelectDataTable.subscribe("cellMouseoverEvent", this.cellBlockSelectDataTable.onEventHighlightCell); |
24 | this.cellBlockSelectDataTable.subscribe("cellMouseoutEvent", this.cellBlockSelectDataTable.onEventUnhighlightCell); |
25 | this.cellBlockSelectDataTable.subscribe("cellClickEvent", this.cellBlockSelectDataTable.onEventSelectCell); |
26 | this.cellBlockSelectDataTable.subscribe("cellSelectEvent", this.cellBlockSelectDataTable.clearTextSelection); |
27 | |
28 | this.cellRangeSelectDataTable = new YAHOO.widget.DataTable("cellrange", |
29 | myColumnDefs, this.myDataSource, { |
30 | caption:"Example: Cell-Range Selection Mode Support for Modifier Keys", |
31 | selectionMode:"cellrange" |
32 | }); |
33 | |
34 | // Subscribe to events for cell selection |
35 | this.cellRangeSelectDataTable.subscribe("cellMouseoverEvent", this.cellRangeSelectDataTable.onEventHighlightCell); |
36 | this.cellRangeSelectDataTable.subscribe("cellMouseoutEvent", this.cellRangeSelectDataTable.onEventUnhighlightCell); |
37 | this.cellRangeSelectDataTable.subscribe("cellClickEvent", this.cellRangeSelectDataTable.onEventSelectCell); |
38 | this.cellRangeSelectDataTable.subscribe("cellSelectEvent", this.cellRangeSelectDataTable.clearTextSelection); |
39 | |
40 | this.singleCellSelectDataTable = new YAHOO.widget.DataTable("singlecell", |
41 | myColumnDefs, this.myDataSource, { |
42 | caption:"Single-Cell Selection Mode with Modifier Keys Disabled", |
43 | selectionMode:"singlecell" |
44 | }); |
45 | |
46 | // Subscribe to events for cell selection |
47 | this.singleCellSelectDataTable.subscribe("cellMouseoverEvent", this.singleCellSelectDataTable.onEventHighlightCell); |
48 | this.singleCellSelectDataTable.subscribe("cellMouseoutEvent", this.singleCellSelectDataTable.onEventUnhighlightCell); |
49 | this.singleCellSelectDataTable.subscribe("cellClickEvent", this.singleCellSelectDataTable.onEventSelectCell); |
50 | this.singleCellSelectDataTable.subscribe("cellSelectEvent", this.singleCellSelectDataTable.clearTextSelection); |
51 | }; |
52 | }); |
view plain | print | ? |
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.
All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.
Copyright © 2013 Yahoo! Inc. All rights reserved.