Yahoo! Developer Network Home - Help

YUI Library Examples: DataTable Control (beta): Complex Example of Multiple Features

DataTable Control (beta): Complex Example of Multiple Features

A demonstration of several DataTable features combined in one instance. The features implemented in this example require the Drag and Drop and Animation utilities.

<< first < prev 12345 next > last >>
Area Codes
States
Notes (editable)
201
New Jersey
202
Washington, DC
203
Connecticut
204
Manitoba, Canada
205
Alabama
206
Washington
207
Maine
208
Idaho
209
California
210
Texas
212
New York
213
California
214
Texas
215
Pennsylvania
216
Ohio
217
Illinois
218
Minnesota
219
Indiana
224
Illinois
225
Louisiana
227
Maryland
228
Mississippi
229
Georgia
231
Michigan
234
Ohio
<< first < prev 12345 next > last >>

Sample Code for this Example

Data:

1YAHOO.example.Data = { 
2    areacodes: [ 
3        {areacode: "201", state: "New Jersey"}, 
4        {areacode: "202", state: "Washington, DC"}, 
5        {areacode: "203", state: "Connecticut"}, 
6        ... 
7    ] 
8
view plain | print | ?

CSS:

1/* No custom CSS. */ 
view plain | print | ?

Markup:

1<div id="complex"></div> 
view plain | print | ?

JavaScript:

1YAHOO.util.Event.addListener(window, "load"function() { 
2    YAHOO.example.MultipleFeatures = new function() { 
3        // Custom sort handler to sort by state and then by areacode 
4        // where a and b are Record instances to compare 
5        this.sortStates = function(a, b, desc) { 
6            // Deal with empty values 
7            if(!YAHOO.lang.isValue(a)) { 
8                return (!YAHOO.lang.isValue(b)) ? 0 : 1; 
9            } 
10            else if(!YAHOO.lang.isValue(b)) { 
11                return -1; 
12            } 
13 
14            // First compare by state 
15            var comp = YAHOO.util.Sort.compare; 
16            var compState = comp(a.getData("state"), b.getData("state"), desc); 
17 
18            // If states are equal, then compare by areacode 
19            return (compState !== 0) ? compState : comp(a.getData("areacode"), b.getData("areacode"), desc); 
20        }; 
21 
22        var myColumnDefs = [ 
23            {key:"areacode",label:"Area Codes",width:100,resizeable:true,sortable:true}, 
24            {key:"state",label:"States",width:250,resizeable:true,sortable:true
25                    sortOptions:{sortFunction:this.sortStates}}, 
26            {key:"notes",label:"Notes (editable)",editor:"textbox",resizeable:true,sortable:true
27        ]; 
28 
29        this.myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.areacodes); 
30        this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; 
31        this.myDataSource.responseSchema = { 
32            fields: ["areacode","state"
33        }; 
34 
35        var myConfigs = { 
36            sortedBy:{key:"areacode",dir:"asc"}, 
37            paginator: new YAHOO.widget.Paginator({ 
38                rowsPerPage: 25, 
39                dropdownOptions: [10,25,50,100], 
40                pageLinks: 5 
41            }), 
42            scrollable:true
43            height:"25em" 
44        } 
45 
46        this.myDataTable = new YAHOO.widget.DataTable("complex", myColumnDefs, this.myDataSource, myConfigs); 
47        this.myDataTable.subscribe("rowClickEvent",this.myDataTable.onEventSelectRow); 
48        this.myDataTable.subscribe("cellDblclickEvent",this.myDataTable.onEventShowCellEditor); 
49        this.myDataTable.subscribe("editorBlurEvent"this.myDataTable.onEventSaveCellEditor); 
50 
51        // When cell is edited, pulse the color of the row yellow 
52        this.onCellEdit = function(oArgs) { 
53            var elCell = oArgs.editor.cell; 
54            var oOldData = oArgs.oldData; 
55            var oNewData = oArgs.newData; 
56 
57            // Grab the row el and the 2 colors 
58            var elRow = this.getTrEl(elCell); 
59            var origColor = YAHOO.util.Dom.getStyle(elRow.cells[0], "backgroundColor"); 
60            var pulseColor = "#ff0"
61 
62            // Create a temp anim instance that nulls out when anim is complete 
63            var rowColorAnim = new YAHOO.util.ColorAnim(elRow.cells, { 
64                    backgroundColor:{to:origColor, from:pulseColor}, duration:2}); 
65            var onComplete = function() { 
66                rowColorAnim = null
67                YAHOO.util.Dom.setStyle(elRow.cells, "backgroundColor"""); 
68            } 
69            rowColorAnim.onComplete.subscribe(onComplete); 
70            rowColorAnim.animate(); 
71        } 
72        this.myDataTable.subscribe("editorSaveEvent"this.onCellEdit); 
73    }; 
74}); 
view plain | print | ?

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings