Table "keeps" 中的输入字段在滚动时在同一行编辑数字（JSView）

Question

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

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

编辑右侧 "Gates" 并滚动，查看它如何消失并编辑左侧值并滚动，查看值如何随 table 滚动。

我尝试 remove/set 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 分成两个数组： table行和列数组

returnRange 函数检查一些值，只是 returns cellValue

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

Answer 1

问题是 sap.ui.table.Table 具有不同于默认浏览器滚动的自定义滚动行为。它不会为每条记录创建一行，而是在每次滚动后创建固定数量的行和 re-bind 这些行。

如果 table 是 editable 并绑定到 JSONModel，它通常会创建一个 two-way-binding 并根据用户输入更新模型值，因此滚动工作正常。但是由于您为绑定提供了自定义格式化程序函数 (returnRange)，因此不再可能使用 two-way-binding。这意味着任何用户输入在滚动后都会丢失。

如果像这样删除格式化函数

var defaultTemplate = new sap.m.Input({
    value: "{" + columnName + "}"
});

它将正常工作。

如果您想验证用户输入，您应该听取输入的 change event and use InputBase#setValue 以将其设置为不同的值。这也将反映您在 JSONModel.

中的更改

Table "keeps" 中的输入字段在滚动时在同一行编辑数字（JSView）

Input field in Table "keeps" edited number in same row while scrolling (JSView)

javascript

sapui5