突出显示表格行的备用颜色

右旋

我试图将突出显示行功能添加到表中,该值是从后端OData服务获取的。

指的是SAPUI5 sap.m.Table中的备用颜色

对于视图,我正在使用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"
    }]
  }
}

但这并没有奏效,因为它预期会奏效。

我需要在这里做更多或不同的事情吗?

吉阿舒

在SAPUI5中,您不应该依赖于id作为css:id是在运行时生成的,并且您不保证它会随着时间的推移保持一致(+在XML中指定的ID不是DOM元素的实际ID)。

更改CSS选择器以使用内置CSS类(SAPUI5随着时间的推移会支持该类)或添加您自己的类。

.xml

 <Table class="myHighlightClass" ....

.css

.myHighlightClass { ...

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Pandas数据框to_html:突出显示表格行

来自分类Dev

颜色名称以突出显示匹配的行

来自分类Dev

更改的突出显示颜色

来自分类Dev

使用基因敲除表突出显示表格行

来自分类Dev

在vim中更改水平拆分状态行的突出显示颜色

来自分类Dev

如何使具有不同颜色的列表行的选择突出显示?

来自分类Dev

使用angularjs突出显示表格行

来自分类Dev

突出显示表格行并在表格行单击jQuery时选择单选输入

来自分类Dev

表格行未在选择/点击时突出显示

来自分类Dev

CSS备用表格行

来自分类Dev

NSTableView行-突出显示时更改颜色

来自分类Dev

如何在表格视图单元格中设置色调/突出显示颜色?

来自分类Dev

notepad ++突出显示颜色

来自分类Dev

颜色名称以突出显示匹配的行

来自分类Dev

更改表格选择多个突出显示颜色

来自分类Dev

选中时突出显示表格行

来自分类Dev

如何使函数不突出显示表格的最后一行?

来自分类Dev

Excel条件格式行以不同颜色突出显示周

来自分类Dev

突出显示表格行,具体取决于变量

来自分类Dev

突出显示表格行并在表格行单击jQuery时选择单选输入

来自分类Dev

表格行突出显示不适用于动态行

来自分类Dev

突出显示表格行中的子组件

来自分类Dev

MVC表格使用JavaScript突出显示行

来自分类Dev

使用备用表格行时表格行背景颜色不变

来自分类Dev

ListView中的备用行颜色

来自分类Dev

当表格失去焦点时,NSTableView突出显示颜色

来自分类Dev

使用 css 悬停时突出显示表格行

来自分类Dev

跳转到表格行并在 html 中突出显示它?

来自分类Dev

Google 表格:更改颜色/突出显示活动电子表格选项卡

Related 相关文章

热门标签

归档