在 sap.ui.table 中选择带有复选框的单行

Question

noobie_sapui5_developer

我正在尝试使用复选框选择单行sap.ui.table。

此表有 2 种模式

1. 多
2. 单

在多选模式下，每行都有复选框，可以选择多行 - 但我只想选择一行

在单选模式下，它只允许选择一行 - 但没有复选框。

如何实现只有一个可选行的带有复选框的表格？

使用 sap.m.table 是可能的，但我的要求是让它与 sap.ui.table 一起工作。

Answer 1

为什么我不建议这样做：

复选框(selectionMode="MultiToggle"(通常用于向用户发出信号，表明他可以选择否，一个或多个选项，而单选按钮(selectionMode="Single"(告诉用户他只能选择一个选项。

参见：material.io、nngroup、uxplanet-radio、uxplanet-checkbox

在您的情况下，我建议使用selectionMode="Single"并将selectionBehavior属性设置为Row、RowOnly或RowSelector(选择行为(。

---

正如@jasbir所指出的，您可以使用rowSelectionChange事件来调用一个函数，该函数抓取刚刚选择的行的索引(getSelectedIndex(。然后，您可以在sap.ui.table.Table上调用setSelectedIndex函数，并向其传递抓取的索引。这将删除以前选择的行，并将当前选定的行设置为选定行。

<Table id="yourTableId"
selectionMode="MultiToggle"
rowSelectionChange="onSelectionChange">
</Table>

并在控制器中。

onSelectionChange: function(oEvent) {
var oYourTable = this.getView().byId("yourTableId"),
iSelectedIndex = oEvent.getSource().getSelectedIndex();
oYourTable.setSelectedIndex(iSelectedIndex);
}

注意：由于setSelectedIndex函数触发了rowSelectionChange，因此上述函数被触发了两次(这是此解决方案不是预期行为的另一个指标(。

有关详细信息，请查看 SAP Fiori 指南以获取 sap.ui.table.Table 的信息。

Answer 2

您可以使用 rowSelectionChange 事件 每当更改所选内容时，都可以取消选择其他行并保留所选行。

希望这有帮助