This example demonstrates a variety of ways to format data in a DataTable, including form elements, dates, currency, email addresses, and links. The first Column displays custom UI that is based on data in another Column.
Data:
1 | YAHOO.example.Data = { |
2 | formatting: { |
3 | items: [ |
4 | {field1: "001", field2:new Date(2007, 1, 1), field3:111, field4:"23.4", field5:"bob", field6:"http://www.yahoo.com"}, |
5 | {field1: undefined, field2:new Date(2006, 1, 1), field3:12.3, field4:"35.12", field5:"ann", field6:"http://www.yahoo.com"}, |
6 | {field1: 001, field2:new Date(2007, 11, 1), field3:1, field4:34.12, field5:"charlie", field6:"http://www.yahoo.com"}, |
7 | {field1: "aaab", field2:new Date(2007, 1, 11), field3:1112, field4:"03", field5:"diane", field6:"http://www.yahoo.com"}, |
8 | {field1: "1", field2:new Date(1999, 1, 11), field3:124, field4:03, field5:"edgar", field6:"http://www.yahoo.com"}, |
9 | {field1: new Date(1999, 1, 11), field2:"January 10, 2005", field3:"12", field4:"34", field5:"francine", field6:"http://www.yahoo.com"}, |
10 | {field1: "11", field2:"January 1, 2005", field3:"19.1", field4:"234.5", field5:"george", field6:"http://www.yahoo.com"}, |
11 | {field1: null, field2:"1/11/05", field3:"10.02", field4:"345.654", field5:"hannah", field6:"http://www.yahoo.com"}, |
12 | {field1: 110, field2:"1/11/2005", field3:"109", field4:23.456, field5:"igor", field6:"http://www.yahoo.com"}, |
13 | {field1: [1,2,3], field2:"November 1, 2005", field3:"11111", field4:23.0123, field5:"julie", field6:"http://www.yahoo.com"} |
14 | ] |
15 | } |
16 | } |
view plain | print | ? |
CSS:
1 | /* No custom CSS. */ |
view plain | print | ? |
Markup:
1 | <div id="formatting"></div< |
view plain | print | ? |
JavaScript:
1 | abc |
2 | YAHOO.util.Event.addListener(window, "load", function() { |
3 | YAHOO.example.CustomFormatting = new function() { |
4 | // Define a custom formatter for the Column labeled "flag" |
5 | // draws an up icon if value of field3 is greater than 100, |
6 | // otherwise renders a down icon |
7 | this.myCustomFormatter = function(elCell, oRecord, oColumn, oData) { |
8 | YAHOO.util.Dom.addClass(elCell, "flag"); |
9 | if(oRecord.getData("field3") > 100) { |
10 | elCell.innerHTML = ' <img src="assets/img/arrow_up.gif">'; |
11 | } |
12 | else { |
13 | elCell.innerHTML = ' <img src="assets/img/arrow_dn.gif">'; |
14 | } |
15 | }; |
16 | |
17 | // Override the built-in formatter |
18 | YAHOO.widget.Column.formatEmail = function(elCell, oRecord, oColumn, oData) { |
19 | var user = oData; |
20 | elCell.innerHTML = "<a href=\"mailto:" + user + "@mycompany.com\">" + user + "</a>"; |
21 | }; |
22 | |
23 | var myColumnDefs = [ |
24 | {label:"flag", formatter:this.myCustomFormatter}, // use custom formatter |
25 | {label:"radio", formatter:YAHOO.widget.DataTable.formatRadio}, // use the built-in radio formatter |
26 | {label:"check", formatter:YAHOO.widget.DataTable.formatCheckbox}, // use the built-in checkbox formatter |
27 | {label:"button", formatter:YAHOO.widget.DataTable.formatButton}, // use the built-in button formatter |
28 | {key:"field1", sortable:true}, |
29 | {key:"field2", sortable:true, formatter:YAHOO.widget.DataTable.formatDate}, // use the built-in date formatter |
30 | {key:"field3", sortable:true}, |
31 | {key:"field4", sortable:true, formatter:YAHOO.widget.DataTable.formatCurrency}, // use the built-in currency formatter |
32 | {key:"field5", sortable:true, formatter:YAHOO.widget.DataTable.formatEmail}, // use the overridden email formatter |
33 | {key:"field6", sortable:true, formatter:YAHOO.widget.DataTable.formatLink} // use the built-in link formatter |
34 | ]; |
35 | |
36 | this.myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.formatting); |
37 | this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON; |
38 | this.myDataSource.responseSchema = { |
39 | resultsList: ["items"], |
40 | // Use the parse methods to populate the RecordSet with the right data types |
41 | fields: [ |
42 | {key:"field1", parser:YAHOO.util.DataSource.parseString}, // point to the string parser |
43 | {key:"field2", parser:YAHOO.util.DataSource.parseDate}, // point to the date parser |
44 | {key:"field3", parser:YAHOO.util.DataSource.parseNumber}, // point to the number parser |
45 | {key:"field4", parser:YAHOO.util.DataSource.parseNumber}, // point to the number parser |
46 | {key:"field5"}, // this is already string data so no parser needed |
47 | {key:"field6"} // this is already string data so no parser needed |
48 | ] |
49 | }; |
50 | |
51 | this.myDataTable = new YAHOO.widget.DataTable("formatting", myColumnDefs, |
52 | this.myDataSource, {caption:"Example: Custom Formatting"}); |
53 | |
54 | this.myDataTable.subscribe("radioClickEvent", function(oArgs){//debugger; |
55 | var elRadio = oArgs.target; |
56 | var elRecord = this.getRecord(elRadio); |
57 | var name = elRecord.getData("field5"); |
58 | alert("The radio button for " + name + " was selected"); |
59 | }); |
60 | |
61 | this.myDataTable.subscribe("checkboxClickEvent", function(oArgs){ |
62 | var elCheckbox = oArgs.target; |
63 | var elRecord = this.getRecord(elCheckbox); |
64 | var name = elRecord.getData("field5"); |
65 | alert("Checkbox was " + (elCheckbox.checked ? "" : "un") + "checked for " + name); |
66 | }); |
67 | |
68 | this.myDataTable.subscribe("buttonClickEvent", function(oArgs){ |
69 | var oRecord = this.getRecord(oArgs.target); |
70 | alert(YAHOO.lang.dump(oRecord.getData())); |
71 | }); |
72 | }; |
73 | }); |
view plain | print | ? |
Copyright © 2007 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings