Question

我正在使用SAPUI5网格表批量编辑（可编辑或不可编辑的单元格）。我正在考虑下面提到的两个选项，但我不确定我是否可以实现这一点，或者它是否支持Grid Table

我想点击网格单元格并将控件从文本更改为输入，以便我可以编辑记录并稍后保存。
将输入可编辑设置为false，并通过单击单元格或输入（无论哪个容易），将输入可编辑更改为true。我正在尝试此选项，但是一旦输入editable设置为false，就不会在输入中触发事件，因此，根本无法更改状态。

另外，我注意到在Table上设置editable为false本身并没有做任何事情，至少在我的情况下它没有做任何事情。

任何帮助或指导都将不胜感激。

Answer 1

要使用多种类型的控件，您需要处理其特定事件。尝试设置隐藏控件并处理它们的事件以使它们可见或不可见。

查看

<VBox>
  <Link text="{OrderID}" press="onSFPressed" visible="true"/>
  <Input value="{OrderID}" submit="onSFSubmitted" change="onSFChanged" visible="false"/>
</VBox>

控制器

onSFPressed: function(oEvent){
    var oText = oEvent.getSource();
    var oInput = oEvent.getSource().getParent().getItems()[1];

    oText.setVisible(false);
    oInput.setVisible(true);
},

onSFSubmitted: function(oEvent){
    var oText = oEvent.getSource().getParent().getItems()[0];
    var oInput = oEvent.getSource();

    oText.setVisible(true);
    oInput.setVisible(false);
},

onSFChanged: function(oEvent){
    var oText = oEvent.getSource().getParent().getItems()[0];
    var oInput = oEvent.getSource();

    oText.setVisible(true);
    oInput.setVisible(false);
}

这里的代码段为：https://plnkr.co/edit/nSMv3BZoifdQaqWYtZgM?p=preview

Answer 2

您似乎只是为了直观表示而需要此功能（您不希望在每个网格表格单元格中看到原始输入）。

最简单的解决方案是在每个单元格中使用 sap.m.Input 控件并使用CSS伪造 sap.m.Text 如果它没有聚焦

我创建了一个简单的示例：http://jsbin.com/ziwoyel/edit?html,js,output

CSS：

 .myCustomInputClass input {
    border: 0;
    background: none;
  }

这是最简单轻便的解决方案。

如果你真的需要在2个控件之间切换，我建议你创建一个自定义控件，它根据聚焦输入/输出事件封装在2个状态（2个控件）之间切换的逻辑。

SAPUI5网格表批量编辑

2 个答案: