Добавить разные элементы управления в разные строки в таблице UI5 - PullRequest
Новая
       14

Добавить разные элементы управления в разные строки в таблице UI5

0 голосов
/ 03 января 2019

У меня есть таблица 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");

Я хочу добавить link и noLink в столбец likColumn runtime в соответствии с данными в модуле. Как мне этого добиться?

1 Ответ

0 голосов
/ 03 января 2019

Отображаемое содержимое каждого столбца можно изменить с помощью 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 с полным примером того, что вам нужно: ОБНОВЛЕННЫЙ пример

...