Question

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

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

一列内的数据是HTML格式。第一次显示很好。但当我在桌子上向下滚动时再次滚动到顶部，单元格内的数据与之前的单元格数据重叠。

请参阅下面的屏幕截图＆amp;滚动后

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

我正在尝试以下代码：

<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控件有两个重要的约束：

因为它不控制其渲染的最外层DOM，所以内容必须满足控件DOM的UI5需求：它必须具有等于HTML控件ID的ID（oHTML.getID（）= == oHTMLControl。$（）。attr（＆＃39; id＆＃39;））
为了与UI5呈现和重新呈现正确集成，DOM必须只有一个根节点（UI5控件的DOM中不能有多个根节点）。

您是否尝试过切换＆＃34; preferDOM＆＃34; HTML控件的选项？

最后但并非最不重要的是，您是否尝试了FormattedText

SAP表格单元格文本在SAP.UI5中重叠

1 个答案: