sapui5坐标绘图

Question

关于以下流程的问题。我有一张蓝色框保存的桌子。样品表维护和预期输出。

如何将坐标呈现为可点击的表格/网格，如红框所示。哪个SAPUI5控件能够实现这个目标？ X将是将在表中维护的批次ID，并且当用户单击单元格时，它将触发一个事件以显示详细信息。一些批次将有单个单元格，有些将需要合并单元格（注意：如果不维护坐标，它将留空到该单元格并且不可单击）。

这个要求是否能够使用sapui5来实现fiori app？

Answer 1

有几种方法可以实现这一目标，但并非所有方法都能提供您描述的完整功能。

首先想到的是使用sap.m.Table并在列上设置“mergeDuplicates”属性。示例（工作小提琴here）：

<Table>
    <columns>
    <Column mergeDuplicates="true">
        <header><Label text="1" /></header>
    </Column>
    <Column mergeDuplicates="true">
        <header><Label text="2" /></header>
    </Column>
    <Column mergeDuplicates="true">
        <header><Label text="3" /></header>
    </Column>
  </columns>
  <ColumnListItem>
    <Button text="A"/>
    <Button text="B"/>
    <Button text="X"/>
  </ColumnListItem>
  <ColumnListItem>
    <Button text="A"/>
    <Button text="C"/>
    <Button text="C"/>
  </ColumnListItem>
  <ColumnListItem>
    <Button text="A"/>
    <Button text="C"/>
    <Button text="C"/>
  </ColumnListItem>
</Table>

这样做的主要缺点是你不能跨列合并单元格（例如，在这个例子中，你会得到单元格“C”两次：第二列一次，第三列一次）。

另一个版本是使用sap.ui.layout.Grid。这具有大致相同的限制（您只能在单个方向上合并“单元格”）并且还具有以下附加限制：

  

网格控件是一种布局，可将其子控件放在12列流布局中。

最后，您可以使用sap.ui.commons.layout.MatrixLayout（已弃用btw，但未提供“完整”替换）。这实际上可以用来完全模拟你的问题。示例（工作小提琴here）：

<layout:MatrixLayout class="matrix">
    <layout:rows>
    <layout:MatrixLayoutRow height="4em">
        <layout:MatrixLayoutCell padding="None" rowSpan="3">
            <Button text="A" width="100%"/>
        </layout:MatrixLayoutCell>
      <layout:MatrixLayoutCell padding="None">
            <Button text="B" width="100%"/>
        </layout:MatrixLayoutCell>
      <layout:MatrixLayoutCell padding="None">
            <Button text="X" width="100%"/>
        </layout:MatrixLayoutCell>
    </layout:MatrixLayoutRow>
    <layout:MatrixLayoutRow height="4em">
        <layout:MatrixLayoutCell padding="None" colSpan="2" rowSpan="2" >
            <Button text="C" width="100%"/>
        </layout:MatrixLayoutCell>
    </layout:MatrixLayoutRow>
    <layout:MatrixLayoutRow height="4em">
    </layout:MatrixLayoutRow>
  </layout:rows>
</layout:MatrixLayout>

但是如你所见，它稍微复杂一些，可能需要一些CSS摆弄。