javascript - SAP.UI5 中重叠的 HTML 表格单元格文本

Question

sap.ui.core.HTML 控件内部的文本重叠问题 sap.ui.table.Table

我正在尝试在 SAP 中构建一个 sap.ui.table.Table。

其中一列的数据为 HTML 格式。第一次显示没问题。但是当我向下滚动表格并再次滚动到顶部时，单元格内的数据与之前的单元格数据重叠。

查看滚动前后的截图

当我第二次向下滚动鼠标时，第一列第一个单元格中的一些文本被添加。请仔细比较这两张图片。

我正在尝试以下代码:

<ui:Table id="table"  enableBusyIndicator="true" rowHeight="38" columnHeaderHeight="21" enableColumnReordering="false"
       selectionMode="Single" cellClick="onCellClick"  visibleRowCountMode="Auto"  selectionBehavior="RowOnly" class="requirementTypesTable" rows="{approvalModel7>/results}">
    <ui:toolbar>
                             <Toolbar class="tableToolbar toolbar">
                                                   <SearchField id="Phrase_desc"
                              search="onSearchField" liveChange="onSearchField"
                              width="413px" class="toolbar searchfield" />
                              <SearchField id="Status_desc" liveChange="onSearchField"
                              search="onSearchField" class="toolbar"/>
                              <SearchField id="Geography_desc" liveChange="onSearchField"
                               visible="false" class="toolbar" 
                              search="onSearchField"/>
                               <SearchField id="Regulatory_desc" liveChange="onSearchField"
                                visible="false"  class="toolbar"
                              search="onSearchField"/>
                               <SearchField id="Author_desc" class="toolbar" liveChange="onSearchField"
                              search="onSearchField"/>
                             </Toolbar>
              </ui:toolbar>

    <ui:columns >
     <ui:Column   width="420px"   hAlign="Left"
     resizable="false" flexible="false"
autoResizable="true">
       <Toolbar class="">
<ToolbarSpacer/>
            <Label text="Phrases" class="headerClass commonSorting"  />

                              <ToolbarSpacer/>

                                    <Button id="idPAsc" icon="sap-icon://sort-ascending" class="ButnInner ascdecBIcon" press="onAPhrase"></Button>
                                    <Button id="idPDsc" icon="sap-icon://sort-descending" class="ButnInner ascdecBIcon" press="onDPhrase"></Button>                           
        </Toolbar> 
      <ui:template>
    <core:HTML  id="test" preferDOM="false" content="{approvalModel7>Phrase_desc}">

       </core:HTML>
      </ui:template>
     </ui:Column>
     <ui:Column hAlign="Center" 
      resizable="false" flexible="false"
autoResizable="true">
                             <Toolbar class="tableToolbar">
<ToolbarSpacer/>                             
      <Label class="headerClass commonSorting" text="Status"/>
        <ToolbarSpacer/>
                <Button id="idSAsc" icon="sap-icon://sort-ascending" class="ButnInner ascdecBIcon" press="onAStatus"></Button>
                 <Button id="idSDsc" icon="sap-icon://sort-descending" class="ButnInner ascdecBIcon" press="onDStatus"></Button>
           </Toolbar>  

      <ui:template>
       <Text class="Phrases element.style" text="{approvalModel7>Status_desc}" tooltip="{approvalModel7>Status_desc}" wrapping="false"/>
      </ui:template>
     </ui:Column>
     <ui:Column hAlign="Center"     id="geohide"     visible="false"  
      resizable="false" flexible="false"
autoResizable="true">
       <Toolbar class="tableToolbar">
                             <ToolbarSpacer/>

      <Label class="headerClass commonSorting" text="Geography"/>
        <ToolbarSpacer/>   
                                    <Button id="idGAsc" icon="sap-icon://sort-ascending" class="ButnInner ascdecBIcon" press="onAGeo"></Button>
                                    <Button id="idGDsc" icon="sap-icon://sort-descending" class="ButnInner ascdecBIcon" press="onDGeo"></Button>

                              </Toolbar>  
      <ui:template>

       <Text class="Phrases" text="{approvalModel7>Geography_desc}" tooltip="{approvalModel7>Geography_desc}" wrapping="false"/>

      </ui:template>
     </ui:Column>
     <ui:Column hAlign="Center"    id="reghide" visible="false"  
      resizable="false" flexible="false"
autoResizable="true">
      <Toolbar class="tableToolbar">
              <ToolbarSpacer/>
      <Label class="headerClass commonSorting" text="Regulatory class" />
        <ToolbarSpacer/>
                                    <Button id="idRegAsc" icon="sap-icon://sort-ascending" class="ButnInner ascdecBIcon" press="onARegC"></Button>
                                    <Button id="idRegDsc" icon="sap-icon://sort-descending" class="ButnInner ascdecBIcon" press="onDRegC"></Button>
                              </Toolbar>  
      <ui:template>

       <Text class="Phrases" text="{approvalModel7>Regulatory_desc}" tooltip="{approvalModel7>Regulatory_desc}" wrapping="false"/>

      </ui:template>
     </ui:Column>
     <ui:Column hAlign="Center"   resizable="false" flexible="false"
autoResizable="true">
      <Toolbar class="tableToolbar">
              <ToolbarSpacer/>

      <Label class="headerClass commonSorting" text="Author"/>
       <ToolbarSpacer/>
                                   <Button id="idAAsc" icon="sap-icon://sort-ascending" class="ButnInner ascdecBIcon" press="onAAuthor"></Button>
                                    <Button id="idADsc" icon="sap-icon://sort-descending" class="ButnInner ascdecBIcon" press="onDAuthor"></Button>
                              </Toolbar>  
      <ui:template>
       <Text   class="Phrases"  text="{approvalModel7>Author_desc}" tooltip="{approvalModel7>Author_desc}" wrapping="false"/>
      </ui:template>
     </ui:Column>

    </ui:columns>
   </ui:Table> 

问题是什么，任何帮助将不胜感激。提前谢谢

Answer 1

我不太确定，但也许这是您设置到 HTML 控件的内容的问题。HTML 控件旨在将 HTML 内容无缝添加到控件树中。因此它不会在 HTML 周围创建额外的标签。但作为该设计决策的副作用，HTML 控件有两个重要的约束:

1. 因为它不控制其渲染的最外层 DOM，所以该内容必须满足 UI5 对控制 DOM 的需求:它必须有一个 ID 等于 HTML 控件的 ID (oHTML.getID() === oHTMLControl.$().attr('id') )
2. 要与 UI5 渲染和重新渲染正确集成，DOM 必须只有一个根节点(UI5 控件的 DOM 中不能有多个根节点)。

您是否尝试过切换 HTML 控件的“preferDOM”选项？

最后但同样重要的是，你试过了吗FormattedText相反