滚动时表中的输入字段“保持”编辑的数字在同一行（JSView）

Question

我有一个带有输入字段的 sap.ui.table.Table 并且该表通过 JSON 获取数据，效果很好。但是，例如，如果我编辑第一行中的值，并尝试向下滚动，则该值“保留”在第一行中，直到不同的值命中该字段。因此，它基本上会在滚动时更新除编辑过的单元格之外的每个单元格。之后，我再次向上滚动以查看我更改的值，但该值现在再次具有开始时加载的旧值。我认为我绑定的东西根本不正确，因为我还没有看到这样的东西。我知道表只更新行上下文，但我不知道如何做到这一点。

这是一个例子：https : //jsbin.com/yuvujozide/6/edit?html,console,output

编辑右侧的“门”并滚动，以查看它如何消失并编辑左侧的值并滚动以查看该值如何随表滚动。

我尝试删除/设置 VisibleRowCount 并记录以查看数据是否被多次加载，但事实并非如此。

var oModel = new sap.ui.model.json.JSONModel();

var oTable = new sap.ui.table.Table({

  visibleRowCount: 12,

  selectionMode: sap.ui.table.SelectionMode.Single,

  visibleRowCountMode: sap.ui.table.VisibleRowCountMode.Fixed,

  editable: true

});

oModel.setData({ rows: tableRows.value, columns: columnArray });

oTable.setModel(oModel);

var counter = 0;

oTable.bindColumns("/columns", function (sId, oContext) {

  var columnName = columnArray[counter];

  var defaultTemplate = new sap.m.Input({

    value: "{" + columnName + "}"

  }).bindProperty("value", columnName, function (cellValue) {

    return returnRange(this, oTable, cellValue, columnName, counter, dic);

  });

  counter++;

  return new sap.ui.table.Column({

    label: columnName,

    template: defaultTemplate,

    flexible: true,

    autoResizable: true,

    width: 'auto',

    multiLabels: [

      new sap.ui.commons.Label({ text: columnName }),

      new sap.ui.commons.Label({ text: dic[Number(counter - 1)].value[0] + " - " + dic[Number(counter - 1)].value[1] })

    ]

  });

});

oTable.bindRows("/rows");

如您所见，我将 rowData 和 columnNames 分隔为两个数组：tableRows 和 columnArray

该returnRange函数检查一些值并只返回cellValue

我希望输入字段保留更改后的值（这可能是正常的），因此我可以更改多个输入字段，然后我可以通过 Ajax-Call 更新表。

Answer 1

问题在于它sap.ui.table.Table具有与默认浏览器滚动不同的自定义滚动行为。它不会为每条记录创建一行，而是会创建固定数量的行并在每次滚动后重新绑定这些行。如果表是可编辑的并且绑定到 a JSONModel，它通常会创建一个双向绑定并根据用户输入更新模型值，因此滚动工作正常。但是，由于您为绑定 ( returnRange)提供了自定义格式化程序函数，因此不再可能进行双向绑定。这意味着滚动后任何用户输入都将丢失。如果您像这样删除格式化程序功能var defaultTemplate = new sap.m.Input({    value: "{" + columnName + "}"});它会正常工作。如果您想验证用户输入，您应该监听输入的change事件并使用InputBase#setValue将其设置为不同的值。这也将反映您在JSONModel.