在 UI5 的不同行中添加不同的控件 table

Question

我有 table sap.ui.table.Table 并且我有一个模型，其中一些记录有 links 而有些没有。我想在列的 sap.m.Link 组件中呈现 link，当 link 在记录中不可用时，它应该在 [=15= 中呈现 "Link is not provided." ] 列中。

由于 sap.ui.table.Column 具有不支持绑定聚合的模板聚合，因为它仅支持 0 或 1 个控件。格式化程序在这里也适用。有什么方法可以根据模块数据在运行时更改列的内容？

我的模块数据是：

var data = [{
   id : 1,
   link : 'abc.com'
},
{
   id : 2
},
{
   id : 3,
   link : 'pqr.com'
}]

我提供代码：

var link = new sap.m.Link({text : "{link}"});
var noLink = new sap.m.Text({text : "Link is not provided."});

var idColumn = new sap.ui.table.Column({
    label : [new sap.m.Label({text : "ID"})],
    template : [new sap.m.Text({text : "{id}"})]
});

var linkColumn = new sap.ui.table.Column({
   label : [new sap.m.Label({text : "Link"})],
   template : [??????]
});

var table = new sap.ui.table.Table({
    columns : [idColumn, linkColumn]
});

var model = new sap.ui.model.json.JSONModel();
model.setData({items : data});
table.setModel(model);
table.bindRows("/items");

我想根据模块中的数据在likColumn列运行时添加link和noLink。我怎样才能做到这一点？

Answer 1

每栏的显示内容可以使用formatter

改变

例如：

   new sap.m.Link({
      width: "20em",
      //editable: false,
      //text: "{items>link}"   
      text: {
        path: "items>link",
        formatter: function(link){
          if (link === undefined) return "Link is not provided"
          return link;
        }
      }
    });

...

oTable.addEventDelegate({
    onAfterRendering: function(){
        $('#idTable a:contains("Link is not provided")').removeClass("sapMLnk");
    }
}, oTable);

更新： 这是一个 jsbin，其中包含您需要的完整示例： UPDATED example

在 UI5 的不同行中添加不同的控件 table

Add different controls in different rows in UI5 table

javascript

data-binding

sapui5