DataTable Widget
:: Row Selection
Sample Code
Data:
YAHOO.example.Data.emails = { account:"jenny@yahoo.com", currStorage: 10, maxStorage: 200, messages: [ {XID: "9897",Date:new Date(1981, 2, 24),To:"Joe",From:"Jenny",Unread:false,Subject:"Check out my new pictures"}, {XID: "7899",Date:new Date(1980, 1, 11),To:"Jane",From:"Jenny",Unread:false,Subject:"Let's have lunch"}, {XID: "6789",Date:new Date(1978, 11, 12),To:"Ann",From:"Jenny",Unread:false,Subject:"Here's the info you requested"}, {XID: "4996",Date:new Date(1974, 1, 11),To:"Bob",From:"Jenny",Unread:true,Subject:"RE: Let's have lunch"}, {XID: "4544",Date:new Date(1974, 1, 10),To:"Charlie",From:"Jenny",Unread:false,Subject:"Birthday party Saturday"} ] };
CSS:
/* custom css*/ .selectionexample {margin:1em;} .selectionexample table {border-collapse:collapse;} .selectionexample th, #rowselect td {border:1px solid #000;padding:.25em;} .selectionexample th {background-color:#696969;color:#fff;}/*dark gray*/ .selectionexample .yui-dt-odd {background-color:#eee;} /*light gray*/ .selectionexample .yui-dt-selected {background-color:#97C0A5;} /*green*/
Markup:
<div id="standardselect" class="selectionexample"></div> <div id="singleselect" class="selectionexample">></div>
JavaScript:
var myColumnHeaders = [ {key:"Date",type:"date"}, {key:"To"}, {key:"From"}, {key:"Subject"} ]; var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders); var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.emails); myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON; myDataSource.responseSchema = { resultsList: ["messages"], fields: ["Date","To","From","Subject","XID","Date","Attachment"] }; // Default selection mode var defaultDataTable = new YAHOO.widget.DataTable("standardselect",myColumnSet,myDataSource, {caption:"Example: Default Selection Mode"}); defaultDataTable.subscribe("cellClickEvent",defaultDataTable.onEventSelectRow); // Single-row selection mode var singleRowDataTable = new YAHOO.widget.DataTable("singleselect",myColumnSet,myDataSource, {caption:"Example: Single-row Selection Mode", rowSingleSelect:true}); singleRowDataTable.subscribe("cellClickEvent",singleRowDataTable.onEventSelectRow); // Select the first row immediately singleRowDataTable.select(singleRowDataTable.getRow(0));