Question

我正在尝试将突出显示行功能添加到表中，我从后端OData服务获取其值。

对于视图，我使用的是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: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: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: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="{/BYD}"
      itemPress="_onTableItemPress"
      ariaLabelledBy="title"
    >
      <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: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: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: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: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: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: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: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:Column>
      </m:columns>
      <m:ColumnListItem id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-items-build_simple_Row-1"
        type="Navigation"
        press="onPress"
      >
        <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:ColumnListItem>
    </m:Table>
    <m:footer>
      <m:Bar id="sap_Responsive_Page_0-footer-sap_m_Bar-1" design="Auto"/>
    </m:footer>
  </m:Page>
</mvc:View>

正如上面的链接中所提到的，我创建了一个CSS文件，其中我提到了表的ID，以便为其添加突出显示功能。

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

我在manifest.json

中的资源中添加了CSS

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

但这并没有奏效，因为预计会有效。

我需要在这里做些更多或更多的事情吗？！

Answer 1

您不应该依赖于SAPUI5中的css：在运行时生成ID并且您没有保证它会随着时间的推移保持一致（+您在XML中指定的ID不是DOM元素的实际ID ）。

更改CSS选择器以使用内置CSS类（SAPUI5随时支持）或添加自己的类。

.XML

 <Table class="myHighlightClass" ....

的CSS

.myHighlightClass { ...

用于突出表行的替代颜色

1 个答案: