Таблица UI5 с динамическими столбцами

Как было упомянуто здесь Динамическое связывание столбца и строк таблицы, мы использовать две модели, но что, если у нас есть одна?

var aColumnData = [
        {
            qual : "1",
            ol:100
        },
        {
            qual : "2",
            ol:200
        },
        {
            qual : "3",
            ol:300
        },
        {
            qual : "2",
            ol:400
        },
        {
            qual : "5",
            ol:500
        }
    ];

Я хочу получить таблицу с 5 столбцами (ol), но с помощью этого метода

var myTable = new sap.ui.table.Table("mT");  
myTable.setModel(vizModel);  

myTable.bindColumns("/", function(index, context) {  

var sColumnId = context.getProperty().ol;  
  var xColumnId = context.getProperty().qual;  

return new sap.ui.table.Column({  
label: sColumnId , 
template: new sap.ui.commons.TextField ({value: xColumnId})
});  
});  
 myTable.bindRows("/");

У меня есть 5 повторяющихся строк, например:

100     200     300     400     500
1       2       3       4       5
1       2       3       4       5
1       2       3       4       5
1       2       3       4       5
1       2       3       4       5

вместо этого:

100     200     300     400     500
1       2       3       4       5

sapui5 dynamic-columns
person placebo    schedule 06.05.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Итак, вы привязываете агрегирование строк к вашему массиву из пяти элементов. Таким образом, будет создано пять строк с контекстом привязки, указывающим на соответствующий объект в массиве. Для каждой строки элементы управления шаблона столбцов клонируются и помещаются в ячейки строки. Эти элементы управления могут использовать контекст привязки своей строки для относительных путей привязки данных (без предшествующего /).

В вашем случае шаблоны столбцов - TextFields - имеют статическое значение. Таким образом, клоны для пяти строк также будут иметь это статическое значение.

Поскольку ваши TextField значения не связаны, изменения, сделанные пользователем, не будут записаны обратно в модель.

Если вы хотите иметь эту двустороннюю привязку, вам придется перенести вашу модель на один объект с множеством свойств.

Если вы хотите иметь только одну строку, в качестве обходного пути вы можете привязать строки к фиктивному массиву с одним объектом и использовать абсолютные пути привязки в вашем элементе управления шаблоном.

myTable.bindColumns("/", function(index, context) {  

  var sColumnId = context.getProperty().ol;  
  var xColumnId = context.getProperty().qual;  

  return new sap.ui.table.Column({  
    label: sColumnId , 
    template: new sap.ui.commons.TextField ({value: { path: "/" + index + "/qual" } })
  });  
});  
myTable.bindRows("dummy>/");
myTable.setModel(new sap.ui.model.json.JSONModel([{}]) ,"dummy");
person schnoedel    schedule 07.05.2016
comment
спасибо за подробный ответ. Я думал об этом подходе, но ожидал, что ui5 будет более сложным и решит проблему с фабричными функциями :) Наличие фиктивных данных создает для меня одну небольшую проблему в будущем: мне приходится удалять их вручную каждый раз, когда я передаю модель таблицы как массив параметров для следующего сервисного вызова. Еще одна задача - отсортировать значения заголовков столбцов, потому что теперь у меня получается 300 500 100 200 400. Думаю, надо как-нибудь поиграться с сортировкой моделей. - person placebo; 11.05.2016
comment
Сортировка столбцов действительно должна быть возможна с помощью Сортировщика: myTable.bindColumns({path:"/", sorter:[new sap.ui.model.Sorter("qual")], factory: function(index, context) {...}}); - person schnoedel; 12.05.2016