2017-01-14 4 views
1

私はsap.m.Tableを作成しているJSビューを持っています。 「列」はJSONModelにバインドされています。それは "アイテム"はODataModelにバインドされています。 ColumnListItemに含まれるIconをクリックすると、行データと列名にアクセスしたいと思います。ColumnListItemのアイコンをクリックすると行と列のデータにアクセスする方法

ビューコード:私のコントローラで

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

私はそれからJSONモデル「期間」、その後、配列を作成し、このビューに設定します。 Odataモデル "zStatus"はマニフェストファイルで定義されています。

コントローラーコード:

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

私はそれを自分で解決するために管理。

createContentに配列を作成しました。列のbindAggregationの列IDでそれを埋め込み、この配列をbindItemsメソッドで使用しました。 次に、customDataをアイコンに渡すことができます。

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

} 
+0

あなたはあなたのソリューションを投稿する必要があります - ここで

はコードです。それ以外の場合は、同じ質問や関連する質問をしている人を助けません。 – matbtt

+0

あなたは正しいです。私は答えにコードを掲示します。 –

関連する問題