根据值 [SAPUI5] 连续更改文本颜色
Change text color in a row depending on a value [SAPUI5]
我想将“Especialidad”值为“Hospitalizado”的整行的文本颜色更改为红色。
我该怎么做？
这是我的代码：
VistaPrinc.view.xml:
这是构建结构的地方，我认为（至少现在）我不需要使用控制器来应用一些 CSS.
<mvc:View
controllerName="CensoTV.CensoTV.controller.VistaPrinc"
xmlns:mvc="sap.ui.core.mvc"
xmlns:core="sap.ui.core"
xmlns:customData="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
xmlns="sap.m">
<Shell id="shell">
<App id="app">
<pages>
<Page id="page" title="{i18n>listaPac}">
<content>
<Text text="{i18n>tituloTablaPl}"/>
<Text text="{i18n>tituloTablaPac}"/>
<Table
id="tablaPacientes"
headerText="{i18n>tituloTablaPl}"
class="sapUiResponsiveMargin"
width="auto"
items="{pacientes>/Pacientes}">
<columns>
<Column
hAlign="Center">
<Text text="{i18n>ColumnaCama}"/>
</Column>
<Column
hAlign="Center">
<Text text="{i18n>ColumnaNombre}"/>
</Column>
<Column
hAlign="Center">
<Text text="{i18n>ColumnaFecha}"/>
</Column>
<Column
hAlign="Center">
<Text text="{i18n>ColumnaHora}"/>
</Column>
<Column
hAlign="Center">
<Text text="{i18n>ColumnaAlergias}"/>
</Column>
<Column
hAlign="Center">
<Text text="{i18n>ColumnaObservacion}"/>
</Column>
<Column
hAlign="Center">
<Text text="{i18n>ColumnaEspecialidad}"/>
</Column>
<Column
hAlign="Center">
<Text text="{i18n>ColumnaCambio}"/>
</Column>
<Column
hAlign="Center">
<Text text="{i18n>ColumnaHoraMedicacion}"/>
</Column>
</columns>
<items>
<ColumnListItem>
<customData>
<core:CustomData key="data" value="{pacientes>Especialidad}" writeToDom="true"/>
</customData>
<cells>
<ObjectIdentifier title="{pacientes>Cama}"/>
<Text text="{pacientes>Nombre} {pacientes>Apellido1} {pacientes>Apellido2}"/>
<Text text="{pacientes>Fecha_ingreso}"/>
<Text text="{pacientes>Hora_ingreso}"/>
<!--<Text text="{pacientes>Alergias}"/>-->
<core:Icon
src="sap-icon://alert"
visible="{= ${pacientes>Alergias} === true }"
alt="Tiene alergias"
color="#FF0000"/>
<Text text="{pacientes>Observacion}"/>
<!--<Text text="{pacientes>Especialidad}"/>-->
<!--<core:Span style="font-color:{= ${pacientes>Especialidad} === 'Hospitalizado' ? '#FF0000' : '#000000'}">"Hola" </core:Span>-->
<!--style="font-color:{= ${pacientes>Especialidad} === 'Hospitalizado' ? '#FF0000' : '#000000'}"/>-->
<Text text="{pacientes>Especialidad}"/>
<!--icon="sap-icon://bed"-->
<!--<Text text="{pacientes>Cambio_medicacion}"/>-->
<core:Icon
src="sap-icon://history"
visible="{= ${pacientes>Cambio_medicacion} === true }"
alt="Cambio de medicación"
color="#FF0000"/>
<Text text="{pacientes>Ultimo_cambio_med}"/>
</cells>
</ColumnListItem>
</items>
</Table>
</content>
</Page>
</pages>
</App>
</Shell>
</mvc:View>
Pacientes.json:
这是我的自定义 JSON 模型文件，用于在字段中显示我想要的数据。
{
"Pacientes": [
{
"Cama": "A3-2304",
"Nombre": "María",
"Apellido1": "Hernández",
"Apellido2": "López",
"Fecha_ingreso": "2020-03-22",
"Hora_ingreso": "00:20:32",
"Alergias": true,
"Observacion": "Hola, soy tu médico",
"Especialidad": "Quirúrgico",
"Cambio_medicacion": false,
"Ultimo_cambio_med": ""
},
{
"Cama": "A4-2302",
"Nombre": "Juan",
"Apellido1": "Hernández",
"Apellido2": "López",
"Fecha_ingreso": "2021-04-26",
"Hora_ingreso": "23:22:11",
"Alergias": false,
"Observacion": "Hola, soy tu médico",
"Especialidad": "Hospitalizado",
"Cambio_medicacion": true,
"Ultimo_cambio_med": "13:13:13"
},
{
"Cama": "A4-8956",
"Nombre": "Luis",
"Apellido1": "Hernández",
"Apellido2": "López",
"Fecha_ingreso": "2013-20-07",
"Hora_ingreso": "11:36:22",
"Alergias": true,
"Observacion": "Hola, soy tu médico",
"Especialidad": "Hospitalizado",
"Cambio_medicacion": true,
"Ultimo_cambio_med": "20:20:16"
},
{
"Cama": "A4-5321",
"Nombre": "Mariano",
"Apellido1": "Hernández",
"Apellido2": "López",
"Fecha_ingreso": "2020-03-22",
"Hora_ingreso": "00:20:32",
"Alergias": true,
"Observacion": "Hola, soy tu médico",
"Especialidad": "Quirúrgico",
"Cambio_medicacion": false,
"Ultimo_cambio_med": ""
},
{
"Cama": "A4-5092",
"Nombre": "Laura",
"Apellido1": "Hernández",
"Apellido2": "López",
"Fecha_ingreso": "2011-08-15",
"Hora_ingreso": "13:41:24",
"Alergias": true,
"Observacion": "Hola, soy tu médico",
"Especialidad": "Hematológico",
"Cambio_medicacion": false,
"Ultimo_cambio_med": ""
},
{
"Cama": "A7-2933",
"Nombre": "Jesús",
"Fecha_ingreso": "2020-03-22",
"Hora_ingreso": "00:20:32",
"Alergias": false,
"Observacion": "Hola, soy tu médico",
"Especialidad": "Quirúrgico",
"Cambio_medicacion": false,
"Ultimo_cambio_med": ""
},
{
"Cama": "A7-2391",
"Nombre": "Paula",
"Apellido1": "Hernández",
"Apellido2": "López",
"Fecha_ingreso": "2020-03-22",
"Hora_ingreso": "00:20:32",
"Alergias": true,
"Observacion": "Hola, soy tu médico",
"Especialidad": "Hematológico",
"Cambio_medicacion": false,
"Ultimo_cambio_med": ""
},
{
"Cama": "39100A",
"Nombre": "Salvador",
"Apellido1": "Hernández",
"Apellido2": "López",
"Fecha_ingreso": "2020-03-22",
"Hora_ingreso": "00:20:32",
"Alergias": true,
"Observacion": "Hola, soy tu médico",
"Especialidad": "Hospitalizado",
"Cambio_medicacion": false,
"Ultimo_cambio_med": ""
},
{
"Cama": "A2-8720",
"Nombre": "Bernardo",
"Apellido1": "Hernández",
"Apellido2": "López",
"Fecha_ingreso": "2020-03-22",
"Hora_ingreso": "00:20:32",
"Alergias": true,
"Observacion": "Hola, soy tu médico",
"Especialidad": "Oncológico",
"Cambio_medicacion": false,
"Ultimo_cambio_med": ""
},
{
"Cama": "A6-9072",
"Nombre": "Kimberly",
"Apellido1": "Hernández",
"Apellido2": "López",
"Fecha_ingreso": "2020-03-22",
"Hora_ingreso": "00:20:32",
"Alergias": true,
"Observacion": "Hola, soy tu médico",
"Especialidad": "Hematológico",
"Cambio_medicacion": false,
"Ultimo_cambio_med": ""
}
]
}
Style.css:
这是我应用样式并设置背景的地方，但它不允许我应用文本颜色。 SAPUI5 忽略该行。
/* Enter your custom styles here */
tr[data-data="Hematológico"]{
background-color: #FFFFFF !important;
color: #000000 !important;
}
tr[data-data="Hospitalizado"]{
background-color: #FFFFFF !important;
color: red !important;
}
tr[data-data="Oncológico"]{
background-color: #51d1f6 !important;
color: #000000 !important;
}
tr[data-data="Quirúrgico"]{
background-color: #82e0aa !important;
color: #000000 !important;
}
.bold {
font-weight: bold;
}
/* Esto es para ponerle las lineas de las celdas, si queremos lo dejamos; sino, lo comentamos o quitamos */
.sapMListTblCell {
border-left: 1px solid #ccc;
}
/* Especifica el tamaño del texto del titulo de la tabla */
.sapMListHdrText {
font-size: 30px;
}
VistaPrinc.controller.js
Actually not using it, it just has the onInit function empty.
首先让我向您展示“fiori”方式：ColumnListItem 有 属性 highlight。我没有找到样本，但看起来像这样：
如果您想走自定义 CSS 路线（不推荐），请试试这个：
<tr>有child仁。很多。
请参阅示例页面中的屏幕截图：
您更改了顶部元素。包含文本（并定义其自己的颜色）的元素是下面的 <span> 方式。
所以你需要将CSS应用到children。最简单的可能就是将它应用于所有这些
tr[data-data="Hospitalizado"] * {
color: red !important;
}
为什么 background-color 有效？因为child元素都有transparent背景或者继承自parent.
我想将“Especialidad”值为“Hospitalizado”的整行的文本颜色更改为红色。 我该怎么做？
这是我的代码：
VistaPrinc.view.xml: 这是构建结构的地方，我认为（至少现在）我不需要使用控制器来应用一些 CSS.
<mvc:View
controllerName="CensoTV.CensoTV.controller.VistaPrinc"
xmlns:mvc="sap.ui.core.mvc"
xmlns:core="sap.ui.core"
xmlns:customData="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
xmlns="sap.m">
<Shell id="shell">
<App id="app">
<pages>
<Page id="page" title="{i18n>listaPac}">
<content>
<Text text="{i18n>tituloTablaPl}"/>
<Text text="{i18n>tituloTablaPac}"/>
<Table
id="tablaPacientes"
headerText="{i18n>tituloTablaPl}"
class="sapUiResponsiveMargin"
width="auto"
items="{pacientes>/Pacientes}">
<columns>
<Column
hAlign="Center">
<Text text="{i18n>ColumnaCama}"/>
</Column>
<Column
hAlign="Center">
<Text text="{i18n>ColumnaNombre}"/>
</Column>
<Column
hAlign="Center">
<Text text="{i18n>ColumnaFecha}"/>
</Column>
<Column
hAlign="Center">
<Text text="{i18n>ColumnaHora}"/>
</Column>
<Column
hAlign="Center">
<Text text="{i18n>ColumnaAlergias}"/>
</Column>
<Column
hAlign="Center">
<Text text="{i18n>ColumnaObservacion}"/>
</Column>
<Column
hAlign="Center">
<Text text="{i18n>ColumnaEspecialidad}"/>
</Column>
<Column
hAlign="Center">
<Text text="{i18n>ColumnaCambio}"/>
</Column>
<Column
hAlign="Center">
<Text text="{i18n>ColumnaHoraMedicacion}"/>
</Column>
</columns>
<items>
<ColumnListItem>
<customData>
<core:CustomData key="data" value="{pacientes>Especialidad}" writeToDom="true"/>
</customData>
<cells>
<ObjectIdentifier title="{pacientes>Cama}"/>
<Text text="{pacientes>Nombre} {pacientes>Apellido1} {pacientes>Apellido2}"/>
<Text text="{pacientes>Fecha_ingreso}"/>
<Text text="{pacientes>Hora_ingreso}"/>
<!--<Text text="{pacientes>Alergias}"/>-->
<core:Icon
src="sap-icon://alert"
visible="{= ${pacientes>Alergias} === true }"
alt="Tiene alergias"
color="#FF0000"/>
<Text text="{pacientes>Observacion}"/>
<!--<Text text="{pacientes>Especialidad}"/>-->
<!--<core:Span style="font-color:{= ${pacientes>Especialidad} === 'Hospitalizado' ? '#FF0000' : '#000000'}">"Hola" </core:Span>-->
<!--style="font-color:{= ${pacientes>Especialidad} === 'Hospitalizado' ? '#FF0000' : '#000000'}"/>-->
<Text text="{pacientes>Especialidad}"/>
<!--icon="sap-icon://bed"-->
<!--<Text text="{pacientes>Cambio_medicacion}"/>-->
<core:Icon
src="sap-icon://history"
visible="{= ${pacientes>Cambio_medicacion} === true }"
alt="Cambio de medicación"
color="#FF0000"/>
<Text text="{pacientes>Ultimo_cambio_med}"/>
</cells>
</ColumnListItem>
</items>
</Table>
</content>
</Page>
</pages>
</App>
</Shell>
</mvc:View>
Pacientes.json: 这是我的自定义 JSON 模型文件，用于在字段中显示我想要的数据。
{
"Pacientes": [
{
"Cama": "A3-2304",
"Nombre": "María",
"Apellido1": "Hernández",
"Apellido2": "López",
"Fecha_ingreso": "2020-03-22",
"Hora_ingreso": "00:20:32",
"Alergias": true,
"Observacion": "Hola, soy tu médico",
"Especialidad": "Quirúrgico",
"Cambio_medicacion": false,
"Ultimo_cambio_med": ""
},
{
"Cama": "A4-2302",
"Nombre": "Juan",
"Apellido1": "Hernández",
"Apellido2": "López",
"Fecha_ingreso": "2021-04-26",
"Hora_ingreso": "23:22:11",
"Alergias": false,
"Observacion": "Hola, soy tu médico",
"Especialidad": "Hospitalizado",
"Cambio_medicacion": true,
"Ultimo_cambio_med": "13:13:13"
},
{
"Cama": "A4-8956",
"Nombre": "Luis",
"Apellido1": "Hernández",
"Apellido2": "López",
"Fecha_ingreso": "2013-20-07",
"Hora_ingreso": "11:36:22",
"Alergias": true,
"Observacion": "Hola, soy tu médico",
"Especialidad": "Hospitalizado",
"Cambio_medicacion": true,
"Ultimo_cambio_med": "20:20:16"
},
{
"Cama": "A4-5321",
"Nombre": "Mariano",
"Apellido1": "Hernández",
"Apellido2": "López",
"Fecha_ingreso": "2020-03-22",
"Hora_ingreso": "00:20:32",
"Alergias": true,
"Observacion": "Hola, soy tu médico",
"Especialidad": "Quirúrgico",
"Cambio_medicacion": false,
"Ultimo_cambio_med": ""
},
{
"Cama": "A4-5092",
"Nombre": "Laura",
"Apellido1": "Hernández",
"Apellido2": "López",
"Fecha_ingreso": "2011-08-15",
"Hora_ingreso": "13:41:24",
"Alergias": true,
"Observacion": "Hola, soy tu médico",
"Especialidad": "Hematológico",
"Cambio_medicacion": false,
"Ultimo_cambio_med": ""
},
{
"Cama": "A7-2933",
"Nombre": "Jesús",
"Fecha_ingreso": "2020-03-22",
"Hora_ingreso": "00:20:32",
"Alergias": false,
"Observacion": "Hola, soy tu médico",
"Especialidad": "Quirúrgico",
"Cambio_medicacion": false,
"Ultimo_cambio_med": ""
},
{
"Cama": "A7-2391",
"Nombre": "Paula",
"Apellido1": "Hernández",
"Apellido2": "López",
"Fecha_ingreso": "2020-03-22",
"Hora_ingreso": "00:20:32",
"Alergias": true,
"Observacion": "Hola, soy tu médico",
"Especialidad": "Hematológico",
"Cambio_medicacion": false,
"Ultimo_cambio_med": ""
},
{
"Cama": "39100A",
"Nombre": "Salvador",
"Apellido1": "Hernández",
"Apellido2": "López",
"Fecha_ingreso": "2020-03-22",
"Hora_ingreso": "00:20:32",
"Alergias": true,
"Observacion": "Hola, soy tu médico",
"Especialidad": "Hospitalizado",
"Cambio_medicacion": false,
"Ultimo_cambio_med": ""
},
{
"Cama": "A2-8720",
"Nombre": "Bernardo",
"Apellido1": "Hernández",
"Apellido2": "López",
"Fecha_ingreso": "2020-03-22",
"Hora_ingreso": "00:20:32",
"Alergias": true,
"Observacion": "Hola, soy tu médico",
"Especialidad": "Oncológico",
"Cambio_medicacion": false,
"Ultimo_cambio_med": ""
},
{
"Cama": "A6-9072",
"Nombre": "Kimberly",
"Apellido1": "Hernández",
"Apellido2": "López",
"Fecha_ingreso": "2020-03-22",
"Hora_ingreso": "00:20:32",
"Alergias": true,
"Observacion": "Hola, soy tu médico",
"Especialidad": "Hematológico",
"Cambio_medicacion": false,
"Ultimo_cambio_med": ""
}
]
}
Style.css: 这是我应用样式并设置背景的地方，但它不允许我应用文本颜色。 SAPUI5 忽略该行。
/* Enter your custom styles here */
tr[data-data="Hematológico"]{
background-color: #FFFFFF !important;
color: #000000 !important;
}
tr[data-data="Hospitalizado"]{
background-color: #FFFFFF !important;
color: red !important;
}
tr[data-data="Oncológico"]{
background-color: #51d1f6 !important;
color: #000000 !important;
}
tr[data-data="Quirúrgico"]{
background-color: #82e0aa !important;
color: #000000 !important;
}
.bold {
font-weight: bold;
}
/* Esto es para ponerle las lineas de las celdas, si queremos lo dejamos; sino, lo comentamos o quitamos */
.sapMListTblCell {
border-left: 1px solid #ccc;
}
/* Especifica el tamaño del texto del titulo de la tabla */
.sapMListHdrText {
font-size: 30px;
}
VistaPrinc.controller.js
Actually not using it, it just has the onInit function empty.
首先让我向您展示“fiori”方式：ColumnListItem 有 属性 highlight。我没有找到样本，但看起来像这样：
如果您想走自定义 CSS 路线（不推荐），请试试这个：
<tr>有child仁。很多。
请参阅示例页面中的屏幕截图：
您更改了顶部元素。包含文本（并定义其自己的颜色）的元素是下面的 <span> 方式。
所以你需要将CSS应用到children。最简单的可能就是将它应用于所有这些
tr[data-data="Hospitalizado"] * {
color: red !important;
}
为什么 background-color 有效？因为child元素都有transparent背景或者继承自parent.