テーブルヘッダのグループ化方法 - 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で列を取得してから、ヘッダースパンを設定する必要があります。あなたの上記のコードの場合

は 幅、 "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>