YUI : 셀을 클릭하면 행의 모든 ​​데이터를 가져옵니다.

Question

YUI-2.8.2의 datatable을 사용하여 예제를 만들려고합니다.

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 
}; 




}(); 

원본에서는 "number"열에 버튼을 추가합니다 (appendTestBtn 메서드 사용). 내가 원한다 : 그 버튼을 클릭하면 그 행의 모든 ​​데이터를 얻을 수있다. (현재 나는 그 셀의 데이터 만 얻는다.)

도와주세요.

감사합니다.

당신은 대신 포맷터 사용할 수 있습니다

Answer 1

: 파서 ​​사용하지 않는

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} 

]; 

및 스키마에 : 당신의 열 정의에

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

을 지금

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

당신의 buttonFormatter 메서드를 사용하면 다음과 같은 행에 액세스 할 수 있습니다.

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

희망이 도움이