How to access row and column data on click of an i

问题:

I have a JS view in which I am creating a sap.m.Table. It's "columns" are bound to a JSONModel. It's "items" are bound to ODataModel. I want to access the row data and the column name when I click on an Icon contained in the ColumnListItem.

View code:

createContent : function(oController) {
    var oTable = new sap.m.Table("table1", {
        width: "auto",
        noDataText: "Please add rows to be displayed!"
    }).addStyleClass("sapUiResponsiveMargin");

    oTable.bindAggregation("columns", "Periods>/periods", function(sId, oContext) {
        var sColumnId = oContext.getObject().period;
            return new sap.m.Column({
                hAlign: "Center",
                vAlign: "Middle",
                header: new sap.m.Text({
                    text: sColumnId
                })
            });
       });

    oTable.bindItems("zStatus>/StatusSet", function(sId, oContext) { 

    var row = new sap.m.ColumnListItem(sId, {
        type : "Inactive",
        cells: [
            new sap.ui.core.Icon({
                src: "sap-icon://delete",
                hoverColor: "red",
                activeColor: "red",
                press: [oController.onDeleteIconPress, oController]
            }),
            new sap.m.Text({
                text: "{zStatus>Description}"
            }),                                      
            new sap.ui.core.Icon(sId, {
                src: {
                    path: "zStatus>Status1",
                    formatter: function(status) {
                    switch(status) {
                        case "R":
                            return "sap-icon://sys-cancel";
                        case "G":
                            return "sap-icon://sys-enter";
                        case "Y":
                            return "sap-icon://notification";
                        default:
                            return "sap-icon://sys-help";
                    }
                }
            },
            size: "1.5em",
            press: [oController.onStatusIconPress, oController]
       }) ]
    });


   return oTable;
}

In my controller I create an array, then a JSON model "Periods" from it and set it to this view. Odata model "zStatus" is defined in manifest file.

Controller code:

onInit : function() {
    // array aPeriods is populated first then
    var oPeriodsModel = new sap.ui.model.json.JSONModel();
    oPeriodsModel.setData({
        periods : aPeriods
    });
    this.getView().setModel(oPeriodsModel, "Periods");
},

onStatusIconPress : function(oEvent) {
    // I can get the row data on icon press
    // Problem 2: but how do I get the column name?
    // I wanted to attach the column name to icon as customData but I could       
    // not access model attached to columns inside bindItems method
}

回答1:

I managed to solve it myself.

Created an array in createContent. Filled it with column IDs in bindAggregation of columns and then used this array in bindItems method. Then I can pass customData to icons.

Here is the code -

createContent : function(oController) {
        var aColumns = []; // array to store column ids
        var columnIndex = 0; // index to track
//more code
// create table oTable

oTable.bindAggregation("columns", "/columns", function(sId, oContext) {
            var sColumnId = oContext.getObject().period;

            if (sColumnId === "DeleteIcon") {
                // this is always my first column
                columnIndex = 0;
                return new sap.m.Column({
                    hlign : "Begin",
                    vAlign : "Middle",
                    width : "2em",
                    header : new sap.m.Text({
                        text : ""
                    })
                });
            } else {
                // add column ids to array
                aColumns[columnIndex++] = sColumnId;

                return new sap.m.Column({
                    hlign : "Center",
                    vAlign : "Middle",
                    header : new sap.m.Text({
                        text : sColumnId
                    })
                });
            }
        });

oTable.bindItems("/rows", function(sId, oContext) {
    var row = new sap.m.ColumnListItem({
        new sap.m.Text({
            text: "{Name}"
        }),
        new sap.ui.core.Icon(sId, {
            src: "sap-icon://sys-help"
            size: "1.5em",
            press: [oController.onStatusIconPress, oController],
            customData : [
                // use column ids here
                new sap.ui.core.CustomData({key: "column", value: aColumns[0]})   
            ]
        }),
    });

    return row;
}

}