具有动态列的 UI5 表

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）的表格，但是用这种方法，

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

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

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