简体   繁体   English

SAPUI5动态绑定表单元格

[英]SAPUI5 dynamic binding of table cells

I have the following Problem: 我有以下问题:
I want to dynamically create table rows and cells with different settings. 我想动态创建具有不同设置的表行和单元格。
The Solution mentioned here: Dynamic binding of table column and rows 这里提到的解决方案: 表列和行的动态绑定
was a good starting point for my problem, but I still could not get it to work. 是解决我的问题的一个很好的起点,但是我仍然无法解决它。

The table should display each object of the model in a new row with the binding for the given attributes of that object. 该表应在新行中显示模型的每个对象,并带有该对象给定属性的绑定。
The checked attribute should be displayed in/as a checkbox that is either checked or unchecked depending on the value (true or false) of checked . checked属性应显示在复选框中,也可以作为选中的复选框显示,或者根据复选框的值(true或false)选中或取消checked

Now, this works perfectly fine if I define the bindings and columns as they are in the SAPUI5 Table Example 现在,如果我像在SAPUI5表示例中那样定义绑定和列,则可以很好地工作

The Problem: 问题:
Depending on value (true or false) of the objects existsLocal attribute I want the checkbox of that row to be either enabled or disabled. 根据对象的值(true或false), existsLocal应该启用或禁用该行的复选框。 Further that row should get a new class - called existsLocalClass wich sets its background to grey if existsLocal is true. 此外,该行应获得一个新类-称为existsLocalClass ,如果existsLocal为true,则将其背景设置为灰色。

I was thinking that this can be solved with a factory function that creates my rows and its cells. 我当时以为可以用创建我的行及其单元格的工厂函数来解决。 Unfortunately my factory does not work as intended. 不幸的是我的工厂没有按预期工作。

Here is my code: 这是我的代码:

Model definition: 型号定义:

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});

Table plus factory function: 表加工厂功能:

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

The browser does not show any errors and the table stays empty. 浏览器没有显示任何错误,并且该表保持为空。 I think the function does not even get called but I could not manage to fix it. 我认为该函数甚至都没有被调用,但是我无法修复它。 Maybe my entire approach is wrong - I don't really understand sapui5's binding and context thingy. 也许我的整个方法是错误的-我不太了解sapui5的绑定和上下文。
I hope that you can help me with this. 希望您能对此有所帮助。

Edit: 编辑:

I found a kinda hacky solution for this: 我为此找到了一个不错的解决方案:

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);
      }
    })
  }
})

Instead you could bind to column with template. 相反,您可以使用模板绑定到列。 You have only rows binding and table does not know the columns. 您只有行绑定,而表不知道列。 BTW, You can define "enable" property of the checkbox with formatters. 顺便说一句,您可以使用格式化程序定义复选框的“启用”属性。 You need factory only for addStyleClass when necessary So something like that: http://jsbin.com/poyetoqa/1/edit 您仅在需要时才需要addStyleClass的工厂。像这样: http : //jsbin.com/poyetoqa/1/edit

See my edited solution in the original question. 请参阅原始问题中我编辑的解决方案。 If you have a better working solution feel free to answer. 如果您有更好的工作解决方案,请随时回答。 Meanwhile I'll mark the question as answered. 同时,我会将问题标记为已回答。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM