自定义 CSS 和 t-att-class 的使用
一、创建css文件
<model_name>\static\src\scss\custom.css
.color_loss_red {
color: red !important;
}
二、声明css文件
__manifest__.py
'assets': {
'web.assets_backend': [
...
'<model_name>/static/src/scss/custom.css',
]
},
三、引用自定义的css文件
views.xml
<?xml version='1.0' encoding='utf-8'?>
<odoo>
<!-- 引用自定义的css文件 -->
<template id="assets_backend" name="<model_name> assets" >
<xpath expr="." position="inside">
<link rel="stylesheet" type="text/css" href="/<model_name>/static/src/scss/custom.css"/>
</xpath>
</template>
<!-- tree view -->
<record id="<实际模型名称>_view_tree" model="ir.ui.view">
<field name="name"><实际模型名称>.view.tree</field>
<field name="model"><实际模型名称></field>
<field name="arch" type="xml">
<tree>
<field name="age" t-att-class="age > 18? 'color_loss_red' : ''"/>
</tree>
</field>
</record>
</odoo>
三、介绍t-att-class
t-att-class 是 Odoo 的 QWeb 模板引擎中的一个动态属性，用于在 XML 视图中根据条件动态添加 CSS 类。这种机制允许你在视图渲染时根据模型字段的值或其他逻辑条件，动态应用不同的样式。
基本语法：
<element t-att-class="condition ? 'class-if-true' : 'class-if-false'">
<!-- content -->
</element>
condition: 条件表达式。如果条件为True，会使用'class-if-true'；否则使用'class-if-false'。如果不需要class-if-false，可以留空。'class-if-true'和'class-if-false': 要应用的 CSS 类名。
使用场景：
- 根据字段值动态应用样式。
- 控制显示逻辑和样式的条件变化。
- 基于状态、数量等的动态样式变化。
示例用法
1. 基于条件动态添加样式
假设你有一个 qty_loss 字段，并且你希望在值大于 500 时显示红色背景，在其他情况下保持默认样式：
<field name="qty_loss" t-att-class="qty_loss > 500 ? 'red-bg' : ''"/>
在这个例子中：
- 当
qty_loss的值大于 500 时，red-bg类会被应用。 - 当
qty_loss的值小于等于 500 时，不会应用任何类（即保持默认样式）。
2. 应用多个类
你还可以同时添加多个类，例如根据条件决定是否应用多个类：
<field name="qty_loss" t-att-class="qty_loss > 500 ? 'red-bg bold-text' : ''"/>
这个例子中：
- 如果
qty_loss大于 500，则会同时添加red-bg和bold-text两个类。 - 否则不添加任何类。
3. 更复杂的条件表达式
你可以使用更复杂的条件逻辑，例如根据多个字段值来动态应用样式：
<field name="status" t-att-class="status == 'done' ? 'green-text' : (status == 'cancelled' ? 'red-text' : '')"/>
在这个例子中：
- 如果
status为'done'，则应用green-text类。 - 如果
status为'cancelled'，则应用red-text类。 - 否则，不应用任何类。
4. 应用 CSS 类和保留已有类
你可以使用 t-attf-class 来动态添加类并且保留已经定义的类，类似于字符串格式化功能：
<field name="qty_loss" t-attf-class="qty_loss > 500 and 'red-bg' or ''"/>
5. 结合 t-if 使用
如果你需要更加精确地控制什么时候显示某个字段或元素，可以将 t-att-class 与 t-if 结合使用。
<field name="qty_loss" t-if="qty_loss > 0" t-att-class="qty_loss > 500 ? 'red-bg' : ''"/>
在这个例子中，只有在 qty_loss > 0 时才会渲染该字段，并且动态应用背景颜色。
注意事项：
- 确保 CSS 类存在：你需要在自定义 CSS 文件中预先定义这些动态类，否则它们将不起作用。
- 简洁条件：条件表达式可以非常灵活，但应保持简洁，避免嵌套过深的逻辑。
- 在不同视图中使用：
t-att-class可用于tree、form等不同视图，适合根据不同数据在不同视图中动态设置样式。
小结：
t-att-class 是 Odoo QWeb 模板中非常实用的动态属性，允许你根据模型数据的值动态应用 CSS 类，从而改变元素的外观。通过这种方式，视图可以实现更加灵活和动态的呈现。