【问题标题】:Add different controls in different rows in UI5 table在UI5表格的不同行中添加不同的控件
【发布时间】:2019-01-03 09:49:19
【问题描述】:

我有表sap.ui.table.Table 我有一个模型,其中有些记录有链接,有些没有。我想在列中的sap.m.Link 组件中呈现链接,当链接在记录中不可用时,它应该呈现“未提供链接”。在sap.m.Text 列中。

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");

我想根据模块中的数据在likColumnruntime列中添加linknoLink。我怎样才能做到这一点?

【问题讨论】:

  • 您能否澄清一下: 1. 您需要 2 列还是 1 列,并根据链接可用性,将其显示为 sap.m.Link 或 sap.m.Text? 2. 或者,您想要 2 个单独的列吗?
  • 另外,看看这个问题:github.com/SAP/openui5/issues/866。在 sap.ui.table.table 的不同行中不可能有不同的控件。但是,在 sap.m.Table 中是可能的。

标签: javascript data-binding sapui5


【解决方案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

【讨论】:

  • 我想在链接不可用时在列中添加sap.m.Text,在链接可用时添加sap.m.Link
  • 据我所知这是不可能的,但在这种情况下,您可以将 sap.m.Link 元素的行为更改为类似于 sap.m.Text,您可以在 onAfterRendering 中进行操作功能。请参阅更新后的示例。
  • 好的,我可以试试这个。感谢您的帮助!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2010-09-17
  • 1970-01-01
  • 2017-02-06
  • 2014-08-27
  • 1970-01-01
相关资源
最近更新 更多