Example: DataTable - Row Selection (YUI Library)

Sample Code

CSS:

Markup:

JavaScript:

var myColumnHeaders = [
    {key:"Date",type:"date"},
    {key:"To"},
    {key:"From"},
    {key:"Subject"}
];

// Single select example
var myColumnSet1 = new YAHOO.widget.ColumnSet(myColumnHeaders);

var myDataSource1 = new YAHOO.util.DataSource(YAHOO.example.Data.emails);
myDataSource1.responseType = YAHOO.util.DataSource.TYPE_JSON;
myDataSource1.responseSchema = {
    resultsList: ["messages"],
    fields: ["Date","To","From","Subject","XID","Date","Attachment"]
};

var myDataTable1 = new YAHOO.widget.DataTable("singleselect",myColumnSet1,myDataSource1,
        {caption:"Example: Row Single-Selection, First Row Selected By Default",rowSingleSelect:true});
myDataTable1.subscribe("cellClickEvent",myDataTable1.onEventSelectRow);
myDataTable1.select(myDataTable1.getRow(0));

// Multi select example
var myColumnSet2 = new YAHOO.widget.ColumnSet(myColumnHeaders);

var myDataSource2 = new YAHOO.util.DataSource(YAHOO.example.Data.emails);
myDataSource2.responseType = YAHOO.util.DataSource.TYPE_JSON;
myDataSource2.responseSchema = {
    resultsList: ["messages"],
    fields: ["Date","To","From","Subject","XID","Date","Attachment"]
};

var outputSelections = function(oArgs) {
    var thisselection = oArgs.els;

thisselection = thisselection.join(", ");
    YAHOO.log("This selection/unselection: " + thisselection);

var allrecords = this.getSelectedRecordIds();
    allrecords = allrecords.join(", ");
    YAHOO.log("All selected records: " + allrecords);

var allrows = this.getSelectedRows();
    allrows = allrows.join(", ");
    YAHOO.log("All selected rows: " + allrows);
}
var myDataTable2 = new YAHOO.widget.DataTable("multiselect",myColumnSet2,myDataSource2,
        {caption:"Example: Row Multi-Selection"});
myDataTable2.subscribe("cellClickEvent",myDataTable2.onEventSelectRow);

myDataTable1.subscribe("selectEvent",outputSelections);
myDataTable1.subscribe("unselectEvent",outputSelections);
myDataTable2.subscribe("selectEvent",outputSelections);
myDataTable2.subscribe("unselectEvent",outputSelections);

DataTable Widget :: Row Selection

Sample Code