如何分组表头 - SAPUI5 xml

Question

我需要使用SAPUI5 XML在表中有多个标头。

这就是我尝试过的。 JsBin

<table:Table title="Real-time order status" noDataText="No data to display" id="tableDisp" enableBusyIndicator="true" showNoData="true" width="auto" class="sapUiResponsiveMargin">
                                    <table:Column id="col6" hAlign="Center" headerSpan="[2,1]">
                    <table:multiLabels>
                        <Label text="2 - Batch records handed over to QA"    class="tableHeaderWrap"/>
                        <Label text="Target" textAlign="Center"  />
                    </table:multiLabels>
                    <table:template>
                        <Label text="{Target}"/>
                    </table:template>
                </table:Column>
                <table:Column id="col10" hAlign="Center">
                    <table:multiLabels>
                        <Label text="2 - Batch records handed over to QA"    class="tableHeaderWrap"/>
                        <Label text="Actual" textAlign="Center"/>
                    </table:multiLabels>
                    <table:template>
                        <Label text="{Actual}"/>
                    </table:template>
                </table:Column>

我需要的是： -

Answer 1

你曾经尝试过的很好。但是，虽然添加标题跨度而不是数组只是给出2如下所示，你可以看到这个thread。

这个答案是针对jsbin中存在的数据。

<Page title="{i18n>title}">
    <content>
        <table:Table title="Real-time order status" noDataText="No data to display" id="tableDisp" enableBusyIndicator="true" showNoData="true" width="auto" class="sapUiResponsiveMargin">
            <table:Column id="col6" headerSpan="2" colspan="2">
                <table:multiLabels >
                    <Label text="Batch records" textAlign="Center" width="100%"/>
                    <Label text="Target" textAlign="Center" width="100%"/>
                </table:multiLabels>
                <table:template>
                    <Text text="Target"/>
                </table:template>
            </table:Column>
            <table:Column id="col10">
                <table:multiLabels>
                    <Label text="Batch records" textAlign="Center"/>
                    <Label text="Actual" textAlign="Center" width="100%"/>
                </table:multiLabels>
                <table:template>
                    <Text text="Actual"/>
                </table:template>
             </table:Column>
         </table:Table>
     </content>
</Page>

或者你必须在控制器中通过id获取列，然后你必须设置headerpan。

对于上面的代码，添加宽度“textAlign”并更改headerSpan属性，如下所示

<table:Table title="Real-time order status" noDataText="No data to display" id="tableDisp" enableBusyIndicator="true" showNoData="true" width="auto" class="sapUiResponsiveMargin">
  <table:Column id="col6" hAlign="Center" headerSpan="2">
    <table:multiLabels>
        <Label text="2 - Batch records handed over to QA" textAlign="Center" width="100%" class="tableHeaderWrap"/>
        <Label text="Target" textAlign="Center" width="100%" />
    </table:multiLabels>
    <table:template>
        <Label text="{Target}"/>
    </table:template>
  </table:Column>
  <table:Column id="col10" hAlign="Center">
    <table:multiLabels>
        <Label text="2 - Batch records handed over to QA" textAlign="Center" width="100%" class="tableHeaderWrap"/>
        <Label text="Actual" textAlign="Center" width="100%"/>
    </table:multiLabels>
    <table:template>
        <Label text="{Actual}"/>    
    </table:template>
  </table:Column>
</table:Table>