A demonstration of several DataTable features combined in one instance. The features implemented in this example require the Drag and Drop and Animation utilities.
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 | |
Loading data... |
Data:
1 | YAHOO.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:
1 | YAHOO.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 | ? |
Note: Logging and debugging is currently turned off for this example.
Copyright © 2008 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings