Odoo 13 时间线视图顶部添加Div/按钮的实现方法求助

Odoo的时间线视图是JS驱动的组件，不是传统QWeb视图，直接插入div会无法正常渲染，给你两个可行的实现方案：

方式一：通过扩展JS渲染逻辑添加顶部内容 #

时间线视图的渲染由web.TimelineRenderer组件控制，你可以继承该组件重写渲染方法，插入自定义内容：

1. 创建自定义JS文件（示例路径：static/src/js/timeline_extend.js）：

odoo.define('your_module.timeline_extend', function (require) {
    "use strict";

    const TimelineRenderer = require('web.TimelineRenderer');
    const core = require('web.core');
    const QWeb = core.qweb;

    TimelineRenderer.include({
        render: function () {
            // 先执行原有渲染逻辑
            this._super.apply(this, arguments);
            // 渲染自定义顶部模板
            const $topContent = $(QWeb.render('your_module.timeline_top_content', {}));
            // 将自定义内容插入时间线视图最顶部
            this.$el.prepend($topContent);
            // 绑定按钮点击事件
            $topContent.find('.custom-action-btn').on('click', () => {
                // 这里编写按钮触发逻辑，比如调用自定义动作
                this.do_action('your_module.your_custom_action');
            });
        },
    });

    return TimelineRenderer;
});

2. 在模块XML视图文件中添加对应的QWeb模板：

<odoo>
    <template id="timeline_top_content" name="Timeline Top Custom Area">
        <div class="timeline-top-bar o_bar_section" style="padding: 8px 16px; border-bottom: 1px solid #eee;">
            <button class="btn btn-primary custom-action-btn">自定义操作按钮</button>
            <div class="ml-3 text-muted">这里是自定义文本区域</div>
        </div>
    </template>
</odoo>

3. 在模块的__manifest__.py中引入JS文件：

'assets': {
    'web.assets_backend': [
        'your_module/static/src/js/timeline_extend.js',
    ],
},

方式二：利用视图控制栏扩展（无需编写JS） #

如果仅需添加按钮或简单元素，直接在时间线视图的XML配置中扩展控制栏即可：

<record id="your_model_timeline_view" model="ir.ui.view">
    <field name="name">your.model.timeline.view</field>
    <field name="model">your.model</field>
    <field name="arch" type="xml">
        <timeline>
            <!-- 原有时间线视图配置，如字段、分组规则等 -->
            <control_panel>
                <!-- 添加调用模型方法的按钮 -->
                <button name="action_custom_button" string="自定义按钮" type="object" class="btn-primary"/>
                <!-- 添加自定义div区域 -->
                <div class="o_control_panel_left ml-3">
                    <span>控制栏内的自定义内容</span>
                </div>
            </control_panel>
        </timeline>
    </field>
</record>

然后在对应模型中定义按钮触发的方法：

class YourModel(models.Model):
    _name = 'your.model'

    def action_custom_button(self):
        # 编写按钮点击后的逻辑，示例为弹出成功提示
        return {
            'type': 'ir.actions.client',
            'tag': 'display_notification',
            'params': {
                'message': '按钮已触发！',
                'type': 'success',
            }
        }

注意事项 #

• 方式一自由度高，适合复杂自定义布局需求；方式二操作简单，适合基础按钮/元素添加场景；
• 修改代码后需升级模块，并清除浏览器缓存刷新页面，确保新配置生效。

内容的提问来源于stack exchange，提问作者Luis Muskus