Question

我有以下问题：
我想动态创建具有不同设置的表行和单元格这里提到的解决方案：Dynamic binding of table column and rows
对我的问题来说是一个很好的起点，但我仍然无法让它发挥作用。

该表应该在一个新行中显示模型的每个对象，并绑定该对象的给定属性 checked属性应显示在/中作为复选框显示，该复选框已选中或取消选中，具体取决于checked的值（true或false）。

中定义绑定和列，这完全正常

问题：
根据对象existsLocal属性的值（true或false），我希望启用或禁用该行的复选框。此外，该行应该获得一个新类 - 名为existsLocalClass，如果existsLocal为真，则将其背景设置为灰色。

我在想这可以通过创建我的行及其单元格的工厂函数来解决。不幸的是我的工厂没有按预期工作。

这是我的代码：

模型定义：

var model = [
  {name: "name1", description: "description1", checked: true, existsLocal: true},  
  {name: "name2", description: "description2", checked: false, existsLocal: false}
]
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({modelData: model});

表加工厂功能：

var oTable = new sap.ui.table.Table({
visibleRowCount: 7,
firstVisibleRow: 3,
selectionMode: sap.ui.table.SelectionMode.None
});

var tableRowFactory = function (sId, oContext) {
  console.log("row factory");
  var exists = oContext.getProperty("existsLocal");

  if(exists){
    return new sap.ui.table.Row(sId)
    .addCell(new sap.ui.commons.TextView()
    .bindProperty("text", oContext.sPath + "/name"))
    .addCell(new sap.ui.commons.TextView()
    .bindProperty("text", oContext.sPath+ "/description"))
    .addCell(new sap.ui.commons.CheckBox()
    .bindProperty("checked", oContext.sPath+ "/checked").setEnabled(false))
    .addStyleClass("existsLocal");
 }else{
   return new sap.ui.table.Row(sId)
   .addCell(new sap.ui.commons.TextView()
   .bindProperty("text", oContext.sPath + "/name"))
   .addCell(new sap.ui.commons.TextView()
   .bindProperty("text", oContext.sPath+ "/description"))
   .addCell(new sap.ui.commons.CheckBox()
   .bindProperty("checked", oContext.sPath+ "/checked"))
  }

};

oTable.setModel(oModel);
oTable.bindRows("/modelData",tableRowFactory); // does not work
oTable.bindAggregation("rows", "/modelData", tableRowFactory); //doesn't work either

浏览器不显示任何错误，表格保持为空。我认为该功能甚至没有被调用，但我无法修复它。也许我的整个方法都是错误的 - 我不太了解sapui5的绑定和上下文的东西。
我希望你能帮助我。

编辑：

我发现了一个有点愚蠢的解决方案：

var model = oTable.getModel();
var rows = oTable.getRows();
var indicesOfRows = [];
$.each(rows, function (index, row){
  indicesOfRows.push(oTable.indexOfRow(row));
});
$.each(rows, function(index, row){
  var rowIndex = indicesOfRows[index];
  var exists = model.getProperty("existsLocal", oTable.getContextByIndex(rowIndex));
  var cells = row.getCells();
  if(exists){
    $.each(cells, function(index, cell){
      if(cell instanceof sap.ui.commons.CheckBox){
        row.$().toggleClass("existsLocal", true);
        cell.setEnabled(false);
      }
    })
  }
})

Answer 1

相反，您可以使用模板绑定到列。您只有行绑定，表不知道列。顺便说一句，您可以使用格式化程序定义复选框的“启用”属性。必要时，您只需要为addStyleClass工厂所以类似的东西：http://jsbin.com/poyetoqa/1/edit

Answer 2

在原始问题中查看我编辑过的解决方案。如果您有更好的工作解决方案，请随时回答。与此同时，我将问题标记为已回答。

SAPUI5动态绑定表格单元格

2 个答案: