具有动态列的 UI5 table

Question

正如这里提到的 Dynamic binding of table column and rows，我们使用两个模型，但是如果我们有一个呢？

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

我想用 5 列（ol）实现 table，但是用这个方法，

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

Answer 1

嗯，您正在将行聚合绑定到包含五个项目的数组。因此将创建五行，每行都有一个绑定上下文指向数组中的相应对象。对于每一行，列的模板控件被克隆并放置到该行的单元格中。这些控件可以使用它们行的绑定上下文作为相对数据绑定路径（没有前面的 /）。

在您的情况下，列模板 - 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");

具有动态列的 UI5 table

UI5 table with dynamic columns

dynamic-columns

sapui5