SAPUI5：表の行を強調表示するための代替色

Question

表に強調表示行機能を追加しようとしています。値はバックエンドのodataサービスから取得しています。 私はこれを参照しています：ビューの場合enter link description here

を、上記のリンクで述べたように、私はxmlview

<mvc:View xmlns:mvc="sap.ui.core.mvc" controllerName="generated.app.controller.14768629992738663_S0" xmlns:m="sap.m" xmlns:html="http://www.w3.org/1999/xhtml"> 
<m:Page id="sap_Responsive_Page_0" showHeader="true" title="Manage Tenants" showFooter="true" showNavButton="true"> 
    <m:content> 
     <m:SearchField id="sap_Responsive_Page_0-content-sap_m_SearchField-1476864205399" placeholder="Search" showSearchButton="true" 
      visible="true" width="268.140625px" liveChange="onFilter"/> 
     <m:Toolbar id="sap_Responsive_Page_0-content-sap_m_Toolbar3-1476863171475" width="auto" design="Transparent" height="46px" visible="true" 
      enabled="true"> 
      <m:content> 
       <m:Text id="sap_Responsive_Page_0-content-sap_m_Toolbar3-1476863171475-content-sap_m_Text-1" text="Items" width="auto" maxLines="1" 
        wrapping="false" textAlign="Begin" textDirection="Inherit"/> 
       <m:ToolbarSpacer id="sap_Responsive_Page_0-content-sap_m_Toolbar3-1476863171475-content-sap_m_ToolbarSpacer-2" width=""/> 
       <m:Button id="sap_Responsive_Page_0-content-sap_m_Toolbar3-1476863171475-content-sap_m_Button-1476863865529" iconDensityAware="false" 
        text="" type="Default" icon="sap-icon://add" iconFirst="true" width="auto" enabled="true" visible="true" press="_onButtonPress2"/> 

       <m:Button id="sap_Responsive_Page_0-content-sap_m_Toolbar3-1476863171475-content-sap_m_Button-4" iconDensityAware="false" text="" 
        type="Transparent" icon="sap-icon://drop-down-list" iconFirst="true" width="auto" enabled="true" visible="true" press="onGroup"/> 
      </m:content> 
      <m:tooltip/> 
     </m:Toolbar> 
     <m:Table id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613" width="100%" noDataText="No data" selectionMode="MultiToggle" 
     growing="false" growingThreshold="20" growingScrollToLoad="false" items="{path:'/BYD'}" itemPress="_onTableItemPress" ariaLabelledBy="title"> 

      <m:headerToolbar/> 
      <m:columns> 
       <m:Column id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-columns-build_simple_Column-1" width="auto" hAlign="Left" 
        vAlign="Top" minScreenWidth="Tablet" demandPopin="true" popinDisplay="Inline" mergeDuplicates="false"> 
        <m:header> 
         <m:Text id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-columns-build_simple_Column-1-header-sap_m_Text-1" text="Tenant" 
          width="auto" maxLines="1" wrapping="false" textAlign="Begin" textDirection="Inherit"/> 
        </m:header> 
        <m:footer/> 
       </m:Column> 
       <m:Column id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-columns-build_simple_Column-2" width="auto" hAlign="Left" 
        vAlign="Top" minScreenWidth="Tablet" demandPopin="true" popinDisplay="Block" mergeDuplicates="false"> 
        <m:header> 
         <m:Text id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-columns-build_simple_Column-2-header-sap_m_Text-1" 
          text="Division" width="auto" maxLines="1" wrapping="false" textAlign="Begin" textDirection="Inherit"/> 
        </m:header> 
        <m:footer/> 
       </m:Column> 
       <m:Column id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-columns-build_simple_Column-3" width="auto" hAlign="Left" 
        vAlign="Top" minScreenWidth="Tablet" demandPopin="true" popinDisplay="Block" mergeDuplicates="false"> 
        <m:header> 
         <m:Text id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-columns-build_simple_Column-3-header-sap_m_Text-1" text="Type" 
          width="auto" maxLines="1" wrapping="false" textAlign="Begin" textDirection="Inherit"/> 
        </m:header> 
        <m:footer/> 
       </m:Column> 
       <m:Column id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-columns-build_simple_Column-1476863521840" width="auto" 
        hAlign="Left" vAlign="Top" minScreenWidth="Tablet" demandPopin="true" popinDisplay="Inline" mergeDuplicates="false"> 
        <m:header> 
         <m:Text id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-columns-build_simple_Column-1476863521840-header-sap_m_Text-1" 
          text="Status" width="auto" maxLines="1" wrapping="false" textAlign="Begin" textDirection="Inherit"/> 
        </m:header> 
        <m:footer/> 
       </m:Column> 
      </m:columns> 
      <m:items> 
       <m:ColumnListItem id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-items-build_simple_Row-1" type="Navigation" press="onPress"> 
        <m:cells> 
         <m:ObjectIdentifier 
          id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-items-build_simple_Row-1-cells-sap_m_ObjectIdentifier-1" title="{TENANTNAME}" 
          text="{ID}" titleActive="false" visible="true"/> 
         <m:Text id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-items-build_simple_Row-1-cells-sap_m_Text-2" text="{DIVISION}" 
          width="auto" maxLines="1" wrapping="false" textAlign="Begin" textDirection="Inherit"/> 
         <m:Text 
          id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-items-build_simple_Row-1-cells-build_simple_TableCell-1476863445271-content-sap_m_Text-1476863453798" 
          text="{TYPES}" width="auto" maxLines="1" wrapping="false" textAlign="Begin" textDirection="Inherit"/> 
         <m:ObjectStatus 
          id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-items-build_simple_Row-1-cells-build_simple_TableCell-1476863521843-content-sap_m_ObjectStatus-1476863547560" 
          title="" text="{STATUS}" state="{STATUSFLAG}"/> 
        </m:cells> 
       </m:ColumnListItem> 
      </m:items> 
     </m:Table> 
    </m:content> 
    <m:footer> 
     <m:Bar id="sap_Responsive_Page_0-footer-sap_m_Bar-1" design="Auto"> 

     </m:Bar> 
    </m:footer> 
    <m:headerContent/> 
    <m:subHeader/> 
    <m:customHeader/> 
</m:Page> 

を使用しています、私は中に私がのIDを言及していcssファイルを、作成しましたハイライト機能を追加します。

#sap_Responsive_Page_0-content-build_simple_Table-1476863214613 tbody tr:nth-child(even) { 
background: rgb(24, 245, 25); 

}

私はmanifest.jsonを

"sap.ui5": { 


"resources": { 
     "css": [{ 
      "uri": "css/style.css" 
     }] 
    } 

}

内のリソースにCSSを追加している。しかし、動作するように期待されているので、これは働いていません。

私はここで行う必要がある、より多くのまたは別のものがありますか？

Answer 1

IDは実行時に生成され、時間が経つにつれて一貫性が保たれるという保証はありません（+ XMLで指定したIDはDOMの実際のIDではありません）素子）。

CSSセレクタを変更して、組み込みCSSクラス（SAPUI5が時間をかけてサポートする）を使用するか、独自のクラスを追加します。

の.xml

<Table class="myHighlightClass" .... 

の.css

.myHighlightClass { ...