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




 }();

在源代码中，我在“number”列添加了一个按钮（使用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")

希望这有帮助

YUI：单击单元格时获取行的所有数据

1 个答案: