考慮的問題是如何精美的設置,與選項:
- sap.ui.table.Table:滾動固定頭。
- sap.m.Table:增長列表,srcollable沒有固定標題。
但很多時候,我們需要一個sap.m.Table-滾動的,但與靜態頭,所以下面的表格內容不低於進一步移動。以下代碼將在此期間提供幫助。它有一個固定標題的可滾動身體。
設置:我使用兩個sap.m.Table實例,一個只是頭和其他僅用於數據。另外,我正在使用一個可滾動的容器,它包含第二個表格(不包含標題)。由於Scrollable容器的固定寬度,我們看到一個滾動條。僞代碼下面提供:
view.xml用:
<Table showNoData='false'>
<columns>
<Column>
<header>
<Text text='ID' />
</header>
</Column>
<Column>
<header>
<Text text='First Name' />
</header>
</Column>
<Column>
<header>
<Text text='Last Name' />
</header>
</Column>
<Column>
<header>
<Text text='Gender' />
</header>
</Column>
</columns>
</Table>
<ScrollContainer height='20rem' vertical='true'> <!-- To have fixed with and enable vertical scrolling of data table -->
<!-- Table to hold data, data ,data -->
<Table class='tableHdr' items='{/}'> <!-- CSS class to hide the column header, otherwise we will have 2 headers. -->
<columns>
<!-- Dont need columns header, as upper table has already defined them. -->
<Column >
</Column>
<Column >
</Column>
<Column >
</Column>
<Column >
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text='{id}' />
<Text text='{first_name}' />
<Text text='{last_name}' />
<Text text='{gender}' />
</cells>
</ColumnListItem>
</items>
</Table>
</ScrollContainer>
現在,如果你沒有這個執行以下樣式類上面的代碼,你會從2個表結束了2列標頭。所以,要刪除第二列標題,我使用了下列類別:
.tableHdr .sapMListTblHeaderCell {
padding: 0rem;
}
想聽聽對此的反饋。
嘗試點擊「更多」按鈕,它不會加載更多的數據到表? – Jaro
hi @Jaro不,它不會加載整個數據。只有可以在頁面 – d33a
上顯示的數據可能是基於您的父容器發生的。如果使用'layout:fixContent'作爲容器,則表的滾動行爲可能會受到影響。 – Andreas