YUI：點擊單元格時獲取所有行數據

Question

我試着用YUI-2.8.2的數據表做例子。

YAHOO.example.DynamicData = function() { 
    // Column definitions 


myColumnDefs = [ // sortable:true enables sorting 
    {key:"id", label:"id", sortable:true}, 
    {key:"date", label:"date", sortable:true}, 
    {key:"price", label:"price", sortable:true}, 
    {key:"number", label:"number", sortable:true} 

]; 

// Custom parser 
var stringToDate = function(sData) { 
    var array = sData.split("-"); 
    return new Date(array[1] + " " + array[0] + ", " + array[2]); 
}; 
var appendTestBtn = function(sData){ 
    return "<input type=\"button\" value=\"Cancel\" onClick=\"javascript:onGetRowData();\">"; 
}; 

// DataSource instance 
myDataSource = new YAHOO.util.DataSource("http://developer.yahoo.com/yui/examples/datatable/assets/php/json_proxy.php?"); 
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON; 
myDataSource.responseSchema = { 

    resultsList: "records", 
    fields: [ 
     {key:"id"}, 
     {key:"date"}, 
     {key:"price"}, 
     {key:"number",parser:appendTestBtn} 
    ], 
    metaFields: { 
     totalRecords: "totalRecords" // Access to value in the server response 
    } 
}; 

// DataTable configuration 
myConfigs = { 
    initialRequest: "sort=id&dir=asc&startIndex=0&results=25", // Initial request for first page of data 
    dynamicData: true, // Enables dynamic server-driven data 
    sortedBy : {key:"id", dir:YAHOO.widget.DataTable.CLASS_ASC}, // Sets UI initial sort arrow 
    paginator: new YAHOO.widget.Paginator({ rowsPerPage:5 }) // Enables pagination 
}; 

// DataTable instance 
myDataTable = new YAHOO.widget.DataTable("dynamicdata", myColumnDefs, myDataSource, myConfigs); 
// Update totalRecords on the fly with value from server 
    myDataTable.handleDataReturnPayload = function(oRequest, oResponse, oPayload) { 
    oPayload.totalRecords = oResponse.meta.totalRecords; 
    return oPayload; 
} 



return { 
    ds: myDataSource, 
    dt: myDataTable 
}; 




}(); 

在源，我在 「編號」 列添加一個按鈕（使用appendTestBtn法）。 我想：當我點擊那個按鈕，我可以得到該行的所有數據（目前我只獲得該單元格的數據）。

請幫幫我。

謝謝。

Answer 1

您可以使用，而不是一個格式化：

var buttonFormatter = function (elCell, oRecord, oColumn, oData) { 
    return "<input type=\"button\" value=\"Cancel\" />" 
}; 

在列定義：

myColumnDefs = [ // sortable:true enables sorting 
    {key:"id", label:"id", sortable:true}, 
    {key:"date", label:"date", sortable:true}, 
    {key:"price", label:"price", sortable:true}, 
    {key:"number", label:"number", formatter: buttonFormatter ,sortable:true} 

]; 

，並在模式中不使用的解析器：在

fields: [ 
     {key:"id"}, 
     {key:"date"}, 
     {key:"price"}, 
     {key:"number"} 
    ], 

現在你buttonFormatter方法可以訪問像這樣的行：

oRecord.getData("id") 
oRecord.getData("date") 
oRecord.getData("price") 

希望這有助於